Efektywna i czytelna nawigacja na stronach. Narracyjny drop down, a może coś innego?
Odkryj moc narracji w 'drop down menu' i stwórz stronę, po której chętnie się porusza.
Dobra nawigacja to fundament każdej, uwielbianej strony internetowej. Decyduje nie tylko o tym, czy starannie przygotowane informacje zostaną odnalezione, ale także wpływa na wartość współczynnika odrzuceń (bouncing rate) oraz czas jaki użytkownicy spędzają na stronie. W większości przypadków, sprawdzają się proste, intuicyjne i konwencjonalne rozwiązania. W tym artykule podpowiadamy które rozwiązania sprawdzają się dobrze i prezentujemy kilka wyjątkowych przykładów, które oczarowały świat.
Stwórz nawigację na stronie, która mówi sama za siebie.
Zadaniem menu nawigacyjnego strony, jest prowadzenie odwiedzających przez rożne części strony w taki sposób, aby nie potrzebowali oni dodatkowej pomocy.
Projektanci często próbują dość jasno wytłumaczyć jakie opcje są dostępne i czego odwiedzający powinien się spodziewać po poszczególnych sekcjach strony, jeśli kliknie na odpowiednie odnośniki. Wydaje się proste, jednak w praktyce wcale takie nie jest. Jak więc zaprojektować efektywną i czytelną nawigację na stronach?
Krótkie wprowadzenie do tworzenia czytelnej zawartości.
Aby ułatwić zrozumienie nowej zawartości, nawigacja jest podzielona na bloki. W jednych projektach dają one lepsze rezultaty w innych osłabiają nawigowanie. Najlepsze rezultaty uzyskują Ci projektanci, którzy odrobili zadanie domowe i opracowali wcześniej schemat architektury informacyjnej.
Jednak w praktyce, zawsze będziemy wiedzieć tyle ile przetestowaliśmy. I nie ma tu wyjątków od reguły. To co sprawdziło się w sklepie sieci Amazon, nie przyniosło odpowiednich rezultatów w sklepie internetowym reebok i odwrotnie. Ot, cały paradoks projektowania.
Poznaj nawigację drop-down. Najsłynniejszą na świecie.
Idea, prosta jak przycisk start w Windows. Najeżdżasz kursorem na kategorię w menu, aby zobaczyć co kryje się w podkategoriach. Tak w jednym zdaniu można by opisać najpopularniejszą formę nawigacji na świecie “Drop-Down”. Która sprawdza się doskonale, zarówno na stronach Intela, IBM, jak i w Białym Domu czy u Owocnych.
Chodź wielu twórców stron WWW, a zwłaszcza miłośników użyteczności uważa, że rozwijane menu jest złą praktyką, ponieważ bywa niezrozumiałe i dysfunkcyjne, to trudno o lepszą ideę, która pomogła by uporządkować ogromne zasoby informacji.
Jak zaprojektować nawigację drop-down, na stronie?
Jeśli dobrze to zorganizujemy, rozwijane menu może stać się najlepszym z możliwych narzędziem do nawigacji. Pełnym fascynujących historii i atrakcyjnych smaczków. Dowiedz się o czym należy pamiętać projektując dobre menu drop down.
A, jak atrakcyjne ikony
Aby nawigację uczynić bardziej efektywną, projektanci korzystają z atrakcyjnych ikon. W takich przypadkach warto upewnić się, że ikona jest łatwo rozpoznawalna, jasno przekazuje wiadomość, odsyła do właściwego linku i ma odpowiedni rozmiar. Złe, przesycone treścią ikony, obniżają klikalność. Za przykład niech służy nowy, uproszczony czyli ulepszony zestaw ikon Google.
B, jak bardzo uproszczone
Intel, umieścił w nowym menu ponad 150 pozycji i zamknął wszystko w jednym guziku. Aby nawigację wśród tysięcy materiałów uczynić bardziej efektywną, projektanci z Intela postawili na pierwszoplanową wyszukiwarkę rodem z Google. Oto przykład uproszczenia, które zasługuje na medal. Prościej się po prostu nie da.
C, jak ciekawa historia
Storytelling, czyli narracja już na poziomie nawigacji w menu. To jedno z najbardziej atrakcyjnych rozwiązań, które warto wziąć pod uwagę. Już samo menu zaczyna “sprzedawać” podstawowe informacje o produkcie i rekomendacje wiarygodnych partnerów. Nawet jeśli użytkownik zapozna się tylko z samym menu, to i tak będzie wiedział sporo o całej firmie i jej produktach.
3 zasady, o których warto pamiętać podczas projektowania.
-
Unikaj rozwijania w więcej niż dwóch poziomach.
Jest to chyba najgorsza krzywda, jaką możesz zrobić rozwijanemu menu. Nawet jeśli masz wiele informacji do przekazania, nie musisz pokazać wszystkiego w menu. Rozwijanie wielopoziomowe, nigdy się nie sprawdza.
-
Opóźnij wyłączanie się hovera.
Często gdy użytkownik przesunie wskaźnik myszy lekko poza rozwinięte menu, całość znika natychmiast. Opóźnij trochę ten efekt. Dzięki czemu użytkownicy nie będą sfrustrowani wyłączającym się menu, gdy zdarzy im się “wyjechać” kursorem poza ramy. Wystarczą dwie sekundy opóźnienia, w wyłączaniu, aby zlikwidować ten przykry efekt.
-
Dodaj hover do menu opcji,
zoptymalizuj szybkość i usuń podpowiedzi.Włączenie hovera powoduje, że użytkownik będzie wiedział dokładnie, który przycisk nawigacyjny w menu ma zaznaczony, co z pewnością mu pomoże. Rozwijanie się menu ma być miłe dla oka, ale przede wszystkim powinno być błyskawiczne. Pamiętaj, aby ewentualne podpowiedzi do odnośników, umieszczonych w rozwiniętym panelu nie przesłaniały pozostałych odnośników.
5 nawigacji, które wykraczają poza wszelkie standardy.
Benthebodyguard.com - To już nie nawigacja, a prawdziwy spacer po mieście.
Jeśli jeszcze nie poznałeś najsłynniejszego ochroniarza w Sieci, warto to nadrobić.
NickAd.com - Nawigacja jest totalnie niezręczna, ale robi totalnie dobre wrażenie.
Otwiera się w miejscu w którym klikniesz muszą, wydając soczysty dzwięk. Mniam...
Bankwest.com.au - Ciekawe rozwiązanie jak na Bank.
Całość rozwija się w mniej lub bardziej kreatywnyych formach, od lewej do prawej.
TnTrailSandbyWays.com - Tennessee z nawigacją, której nie wstydził by się NYC.
W sumie cała ta strona stanowi jedną wielką nawigację. Warto zajrzeć też do dropów.
ipolecat.com - Doskonała strona naszych przyjaciów z Ukrainy.
Doskonały pomysł i jeszcze lepsza realizacja. Zapraszamy.
Będzie mi miło, otrzymać Twoje wsparcie.
Dzięki
▼
Świeżo upieczona pani magister z piątką od samego prof. Miodka. Pomimo sukcesu, dalej rozwija kompetencje, kończąc logopedię. Recenzuje książki dla Empiku pod nadzorem Kazimiery Szczuki. Owocnych już dawno wspiera słownymi majstersztykami, a to przecież dopiero początek jej kariery.
Podobne tematy
Owocna dyskusja
Bądź pierwszym, który rozwinie ten temat.
Na górę
Nie poprzestawaj na tym; pomyśl o interakcjach. O tym, jak sprawić, by były zabawne. Tak jak każdej rozmowie można dodać humoru, można także sprawić, by bardziej zabawne były chmurki wyświetlane po najechaniu na link, przyciski, poszczególne kroki w procesie i inne rzeczy, które napotyka użytkownik. W procesie uczenia się wykorzystujemy humor do ułatwiania przyswajania nowej wiedzy i jej zapamiętywania.
Mądrego miło posłuchać
Szanowny ekspercie.
Podziel się wiedzą i odbierz zapłatę.
Sprawdź to - kliknij tutaj.
Lubisz nasze treści i to co robimy?
Możesz publikować je u siebie, sprawdź
także jak jeszcze możesz nas wesprzeć.
marketingu. Właściciel
Ogilvy&Mather.
UDZIEL WSPARCIA
Kliknij tutaj!
Zawsze cieszą nas komentarze i przykłady, które odnoszą się ściśle do komentowanych treści, bądź też zawierają dodatkowe, wzbogacające pierwotny materiał informacje. Staramy się blokować wpisy zawierające obelżywy język lub mające charakter spamu, oraz na bieżąco moderować poziom dyskusji, aby odpowiadał on standardom, które wyznaczamy.
1. Pozostawmy to miejsce wolne od reklam.
2. Dyskutujemy o ideach, bez zarzutów osobistych.
3. Nie publikujemy multimediów.