Projektowanie nawigacji obejmuje dwa aspekty: jaka będzie struktura treści i jak ta struktura będzie prezentowana użytkownikowi. Oczywiście nie są one oddzielne i struktura (zwykle) wpływa na prezentację. Nawigacja obejmuje selekcję — nawet jeśli treść, która ma zostać uwzględniona, może być już ustalona — sposób, w jaki ta treść jest pogrupowana, w jaki sposób grupy są ze sobą powiązane i w jaki sposób użytkownik porusza się między nimi, składa się na nawigację. Menu, niezależnie od jego formy, zapewnia wskazówki ułatwiające nawigację. Informuje użytkownika, gdzie się znajduje w witrynie i jak dotrzeć do innego miejsca.
Jana Galla
Jana Galla jest prawdopodobnie najbardziej znany ze swoich projektów okładek książek, a jego witryna odtwarza te treści. Zamiast standardowego menu otrzymujemy siatkę „miękkich okładek”, z których każda jest klikalną miniaturką otwierającą informacje na temat wybranego projektu. Miniaturka z jego inicjałami otwiera informacje o nim.
[pullquote]Jeśli chcesz zastosować takie podejście, zadbaj o to, aby prezentowane prace były najwyższej jakości[/pullquote]
Jest to bardzo prosty, podstawowy projekt zarówno wizualnie, jak i pod względem zachowania. Zawiera niewiele treści tekstowych poza najkrótszymi informacjami na temat każdego prezentowanego dzieła oraz linkami do mediów zewnętrznych i społecznościowych. Ta strona jest poświęcona pracy; jeśli chcesz opinii i wyjaśnień, są inne miejsca, które je mają. A jednak nie sprawia wrażenia zimnego, zbyt formalnego ani pozbawionego osobowości. Nawigacja, taka jaka jest, nie wydaje się trudna ani niejasna. Treścią jest nawigacja, co zapewnia przyjemne, praktyczne i wciągające wrażenie. Niestety, na urządzeniach mobilnych jest to trochę rozczarowujące, ponieważ zachowanie pulpitu zostało porzucone na rzecz przycisków Wstecz, Dalej i Indeks u góry ekranu. Podwójnie rozczarowujące, ponieważ zachowanie na pulpicie działałoby doskonale na urządzeniach mobilnych. Ten styl pozbawiony pleców jest trudny do wykonania, ponieważ jest całkowicie zależny od kalibru pracy. Jeśli chcesz zastosować takie podejście, zadbaj o to, aby prezentowane prace były najwyższej jakości.
Jordan Siewcy
Jordan SiewcyWitryna portfolio to kolejne dobre podejście do miniaturek prac jako nawigacji. W tym przypadku obrazy są ułożone jedna na drugiej, a użytkownik przewija, aby poruszać się po stosie. Kliknięcie dowolnego elementu otwiera moduł z większą liczbą zdjęć i kilkoma szczegółami. Przewijanie w dół stosu powoduje wyświetlenie najkrótszych informacji o karierze i danych kontaktowych. Zachowanie na urządzeniach mobilnych jest identyczne, przynajmniej w zakresie, w jakim użytkownik jest tego świadomy, co warto zobaczyć. Ponieważ każdy moduł zawiera także łącza do wszystkich innych modułów treści, a także przycisk zamykania, cała zawartość jest natychmiast dostępna z dowolnego miejsca. Nawigacja jest prosta i przejrzysta, łatwa w użyciu, ale inna niż zwykle, dzięki czemu strona zapada w pamięć. Wywołuje poczucie zaangażowania użytkownika wykraczające poza zwykłe kliknięcie przycisku, naśladując czynność przeglądania stosu fizycznych wydruków portfolio. W rzeczywistości pomysłowość projektu witryny i jej dopracowane wykonanie robią wrażenie w takim samym stopniu, jak każda prezentowana na niej praca.
Otwarte Kontynenty
Otwarte Kontynenty to zbiór krótkich filmów z całego świata, a podstawą nawigacji jest wolno obracający się glob. Ikona w lewym górnym rogu przełącza widoki pomiędzy nawigacją globusową a prostą poziomą listą linków. Lista oferuje użytkownikowi prostszy proces, ale wydaje się, że brakuje jej pewności. Dostępność jest dobrym powodem, aby zapewnić uproszczoną opcję, ale różnica między nimi jest bardzo niewielka, jeśli chodzi o dostępność. Instrukcja pod globusem również świadczy o braku zaufania do konstrukcji nawigacji, a może jest to brak zaufania do inteligencji użytkownika.
[pullquote]Nawigacja nigdy nie powinna być tak niejasna, aby użytkownik nie mógł jej samodzielnie rozpracować[/pullquote]
To rozczarowujące. Nawigacja nigdy nie powinna być tak niejasna, aby użytkownik nie mógł jej samodzielnie rozpracować, a w tym przypadku tak nie jest; pomoc nie jest konieczna. Animowany globus wygląda tak, jakby był przeznaczony do interakcji. W przypadku braku tradycyjnego menu użytkownik będzie eksplorował ekran. Wersja mobilna nie wykorzystuje wirującego globusa, a jedynie – tym razem pionową – listę historii, które można przewijać i wybierać. Z jednej strony użycie globusa może wydawać się dość oczywiste, ale działa dobrze i jest ładnie wykonane. „Odkrywanie” świata stwarza poczucie połączenia; światła widoczne na lądzie i warstwa chmur nad ziemią to urocze detale, które przyciągają użytkownika. Efekt jest taki, jakbyś czuł się, jakbyś podróżował do krajów, z których pochodzą historie.
Architekci Glamuziny
Architekci Glamuziny używać całej strony głównej jako menu z trzema łączami do głównych sekcji rozmieszczonymi na ekranie. Strona główna projektów zawiera listę polecanych projektów w postaci linków tekstowych i dużych miniatur. Ponieważ cała strona to menu, nie ma potrzeby uciekania się do menu hamburgerów na telefonie komórkowym. Chociaż istnieją pewne niezbędne różnice w układzie, wrażenia mobilne są wizualnie spójne z komputerem stacjonarnym. Ogólnie rzecz biorąc, doświadczenie tutaj jest dobre, a menu jest interesujące i ładnie integruje się z ogólnym wyglądem i stylem witryny. Jest jednak kilka kwestii, które nieco przeszkadzają. Nawigacja w niektórych miejscach jest chaotyczna i przeglądając różne projekty, łatwo stracić orientację. Nie stanowi to jednak problemu, ponieważ każda strona zawiera łącza do strony sekcji nadrzędnej i strony głównej. Bardziej problematyczne jest to, że linki zewnętrzne i niektóre linki wewnętrzne (nie z menu) otwierają się w bieżącym oknie i nie ma możliwości powrotu, z wyjątkiem przycisku Wstecz w przeglądarce. W najlepszym przypadku zakłóca to przepływ treści, powodując chaotyczne wrażenia, a w najgorszym odciąga użytkownika od witryny. Użytkownik może kazać przeglądarce otworzyć łącze w nowej karcie lub oknie, ale tak naprawdę nie powinien tego robić. Mimo to jest to nadal dobra strona. Zastosowanie tła papieru w kropki i czcionki o stałej szerokości tworzy pozbawiony, szkieletowy wygląd, dzięki czemu praca naprawdę się wyróżnia. Nawigacja i menu są odważne i nowoczesne, z otwartą, a nie liniową narracją.
Odpowiedzialna nawigacja
Dotychczas prezentowane strony służyły prezentacji twórczości twórczej, co w naturalny sposób pozwala, a nawet wymaga, na bardziej twórcze podejście. A co z witrynami w stylu korporacyjnym?
Odpowiedzialna nawigacja została utworzona dla Danish Shipping, aby przedstawić działania jej członków, aby zmniejszyć wpływ branży żeglugowej na środowisko. W związku z tym zawiera wiele faktów i liczb, które choć ważne, mogą stanowić dość suchą treść. Zawartość witryny jest zorganizowana na jednej stronie podzielonej na sekcje, zawierające łącza do dalszych informacji lub analizy przypadków. Każdą sekcję można przewijać lub uzyskać do niej dostęp za pomocą menu.
[pullquote]projekt osiąga często nieuchwytny efekt bycia jednocześnie korporacyjnym i ludzkim[/pullquote]
Menu nawiązuje wizualnie do logo duńskiej żeglugi, które reprezentuje kod Morse’a dla DK (dwuliterowy kod ISO dla Danii). Animacja ładowania otwierającego staje się menu, wskazując, że witryna jest teraz gotowa do eksploracji. Dzięki zmianie koloru po najechaniu kursorem na tekst i zmianie koloru, kreski menu są zarówno funkcjonalnie przejrzyste, jak i wizualnie minimalne. Na urządzeniach mobilnych używana jest ikona menu hamburgera, ale w tym przypadku faktycznie pasuje ona do ogólnego stylu wizualnego. Ta witryna wykonuje naprawdę dobrą robotę, organizując i prezentując swoją zawartość w atrakcyjny sposób, z dodatkowym zainteresowaniem w postaci animacji. Ponieważ animacja służy przede wszystkim do usprawnienia nawigacji — definiowania nagłówków sekcji i zapewniania ruchu w menu — ma ona charakter celowy, a nie tylko dekoracyjny. Architektura została starannie opracowana, a ogólne wrażenie jest dobrze zorganizowane, biznesowe i przejrzyste. Menu dodaje element zabawy, ruchem przypominającym pływanie ryb, a animacje nagłówków sekcji przypominają fale. W rezultacie projekt osiąga często nieuchwytny efekt bycia jednocześnie korporacyjnym i ludzkim.
Sagmeistera i Walsha
Ten ostatni nie jest przykładem innowacyjnej nawigacji, ale mimo to jest dziwnie fascynujący. W przeważającej części ta witryna wykorzystuje dość kiepskie, standardowe poziome menu w lepkim nagłówku, z menu drugiego poziomu przesuwanym pod nim na stronach, gdzie jest to wymagane. Jak na razie zwyczajnie, zwłaszcza, że na telefonie komórkowym zmienia się w ikonę hamburgera-otwiera się na listę. Zabawny/nieco dziwny i niewygodny fragment znajduje się na stronie głównej. Jest tam widok na część biur Sagmeister & Walsh, jak wyglądają i działają, jak przyciski menu dodane na górze. Przynajmniej tak to wygląda, jeśli po raz pierwszy widzisz tę stronę, powiedzmy o 9:30 GMT. Spójrz na to jeszcze raz o 11:30 czasu wschodniego, a zdasz sobie sprawę, że te „przyciski” to podświetlane znaki i widzisz prawdziwych ludzi pracujących, na żywo (prawie). Kliknięcie w prawo powoduje zmianę widoku na inną część biura, z menu namalowanym na frontach biurek. To chwyt, w ogóle nie poprawia nawigacji, ale zapada w pamięć. Siedzenie przy biurku przed komputerem i obserwowanie, jak ktoś inny siedzi przed komputerem, brzmi po prostu dziwnie, ale gwarantuję, że zrobisz to, nawet przez 5 minut. Wszystkie poprzednie witryny wprowadzają pewien poziom zaangażowania użytkowników, ale jest to zupełnie inny poziom. Dosłownie obserwujesz ich pracę.
Wniosek
[pullquote]Dobra nawigacja jest niepozorna, świetna nawigacja tworzy niezapomniane wrażenia użytkownika[/pullquote]
Nawigacja jest integralną częścią UX witryny, ponieważ wybór nawigacji tworzy ramy dla doświadczenia użytkownika. Nawigacja powinna prowadzić użytkownika przez treść w sposób logiczny lub narracyjny, w zależności od przeznaczenia witryny. Wszystkie zbadane tutaj witryny wykraczają poza zwykłe „kliknij tutaj, aby wyświetlić x” i starają się zapewnić użytkownikowi przyjemne i zapadające w pamięć doświadczenie. Dobra nawigacja jest niepozorna, świetna nawigacja tworzy niezapomniane wrażenia użytkownika.
