3 Niezbędne zasady efektywnego projektowania nawigacji
Projektowanie nawigacji w witrynie jest jak budowanie fundamentów dla Twojego domu. Niewłaściwe zaplanowanie fundacji może narazić budynek na ryzyko zawalenia, niezależnie od tego, jak ładnie wygląda. Jeśli chcesz czerpać korzyści z najlepszych sprzedaży lub konwersji z witryny, musisz poświęcić trochę czasu na zaplanowanie interakcji odbiorców z treścią i zrozumienie najbardziej intuicyjnego sposobu organizacji i reprezentowania go.
Zawsze pamiętaj, że jeśli popełnisz błąd, ryzykujesz zrażenie dużej części odbiorców.
Czym jest nawigacja?
Istnieje więcej niż jeden sposób patrzenia na nawigację. Można powiedzieć, że jest to główny element witryny, który pozwala klientom znaleźć to, czego szukają, bez zamieszania i niepotrzebnych kliknięć. Równie dobrze możesz argumentować, że jest to sposób na łagodne kierowanie klientów do najważniejszych informacji na Twojej stronie w celu wygenerowania sprzedaży lub zapytań.
Szanse są, to jedno i drugie.
Projektowanie nawigacji jest jak wiele innych rzeczy w projektowaniu: nie ma uniwersalnie uzgodnionej "właściwej drogi", aby to zrobić. Każda strona internetowa przedstawia własne wyzwania, do których można podejść na wiele sposobów. Dobrą wiadomością jest to, że istnieją sposoby myślenia i organizowania treści, które minimalizują ryzyko niepowodzenia.
Strona 70percentpure oferuje prostą nawigację, która jest zarówno pionowa, jak i pozioma.
1) Najpierw sfinalizuj swój IA
Planowanie treści dużej witryny internetowej jest podstawowym zadaniem, które należy wykonać przed zaprojektowaniem nawigacji. Poza tym, znany jako IA (Information Architecture), ten przegląd, zrozumienie i manipulowanie twoją zawartością jest tym, co stanowi podstawę użyteczności Twojej strony. Zaprojektowanie nawigacji przed - lub zamiast - prawidłowe zaprojektowanie swojej IA byłoby jak utworzenie indeksu książki przed składaniem stron. To nie jest dobry pomysł.
Naturalna zdolność widzenia całego obrazu pomaga w pracach nad IA. Co ważniejsze, musisz mieć możliwość oglądania treści z perspektywy użytkownika. Czasami oznacza to, że nie zgadzasz się z własnym sposobem kategoryzowania ich treści - więc przygotuj się na opór, jeśli tak jest.
Oto kilka rzeczy, które możesz poprosić o pomoc w przygotowaniu programu i uzasadnienie go klientowi:
- Jakie strony są potrzebne w tej witrynie?
- Czy każda strona ma cel w szerszym schemacie, a treść jest podzielona na sensowne, powiązane fragmenty?
- Jakie dodatki należy wprowadzić w celu dodania treści w przyszłości?
- Z jakimi grupami użytkowników współpracujesz? (np. logowanie / wylogowywanie, typy subskrypcji, reklamodawcy itp.)
- Jaki jest główny cel dla każdego typu użytkownika?
Udzielenie odpowiedzi na wszystkie powyższe informacje oraz zrozumienie, w jaki sposób Twoje treści odnoszą się do użytkowników, mają zasadnicze znaczenie dla dobrego projektowania nawigacji.
2) KISS: Czasami to proste
Każdy, kto kiedykolwiek korzystał ze strony internetowej, prawdopodobnie może się zgodzić: obszar nawigacyjny powinien być tak prosty, jak to tylko możliwe. Przytłaczanie użytkownika wyborem i zatłoczeniem nawigacji za pomocą tekstu jest złym pomysłem i poważnie ogranicza ogólną użyteczność Twojej witryny.
Prosta nawigacja Bloomberga przeczy złożoności informacji na ich stronach.
A jednak prostota może być zwodnicza. Zagłębiaj się głębiej i możesz odkryć, że to, co jest dość złożone, zostało sprytnie spakowane w sposób, który wydaje się prosty. To jest IA w akcji.
Weźmy na przykład stronę domową Microsoftu. Ich główna nawigacja ma tylko cztery elementy, co nie jest prawie wystarczające, biorąc pod uwagę ich asortyment. Jednak listy rozwijane są bardzo elegancko podzielone na sekcje i przedstawione w taki sposób, aby szybko i łatwo znaleźć to, czego szukasz.
Podstrony są podobne do mini-stron, zgodnie z tym samym formatem nawigacji. Menu wygląda tak samo, ale dostosowuje się, aby zaoferować więcej szczegółów, im głębiej wejdziesz na stronę.
Jest łatwy w użyciu, przewidywalny i spójny. Biorąc pod uwagę ich asortyment produktów i liczbę stron na ich stronach, nie jest to żaden wyczyn i jest oczywistym rezultatem wielu godzin iteracyjnego rozwoju. Nie tylko jest to jeden z ich produktów - co bardzo uspokaja odwiedzających - ale organizuje treść w sposób odpowiedni zarówno dla klienta, jak i samej firmy Microsoft.
3) Wybierz ostrożnie orientację
Biorąc pod uwagę, że ekran komputera jest tradycyjnie używany w formacie krajobrazu, nawigacja pozioma ma wiele sensu. Tyle czasu wydaje się bardziej zrównoważony, mniej inwazyjny i łatwy do umieszczenia z perspektywy projektu.
Oculus, twórcy zestawów VR byłby głupi, gdyby nie rozmawiali o swoich wirtualnych krajobrazach za pomocą poziomego menu. Jest nie tylko ładną metaforą, ale pozwala użytkownikowi zagłębiać się w treści, przewijając stronę w dół.
Jednak poziome menu nie dodają wartości w każdym kontekście, dlatego zobaczysz dużo pionowej nawigacji, szczególnie w e-commerce. Niesie echa kolorowych zakładek, które pomagają znaleźć produkty w katalogu fizycznym i pozwala uniknąć zaśmiecania poziomego paska zawierającego zbyt dużo tekstu i zbyt wielu opcji.
Dobra nawigacja w pionie nie jest łatwym zadaniem, szczególnie jeśli masz dużo produktów. Właśnie dlatego lubię ten od Jacka Jonesa.
Ikony obok tekstu naprawdę pomagają w czytelności. Proste kształty są zaskakująco komunikatywne i pomagają utrzymać koncentrację i porządek w nawigacji. Kliknij kategorię, a menu rozwija się, aby odsłonić podopcje, ponownie w sposób bardzo łatwy dla oka.
Bardziej nietypowe użycie pionowego menu można znaleźć na stronie Squarepusher. Tutaj nawigacja jest używana jak karta, poza główną treścią, którą użytkownik może po prostu przewinąć i kliknąć. Jest to podejście o wiele bardziej liniowe i odzwierciedla sekwencyjny charakter utworu Squarepusher.
Zasady się zmieniają
Podobnie jak w przypadku wszystkich rzeczy w Internecie, nowe techniki, technologie, urządzenia i trendy stawiają przed sobą własne wyzwania i innowacje. Responsywne projektowanie stron internetowych oznacza, że tradycyjna nawigacja pozioma jest teraz również pionową nawigacją (na mniejszych ekranach). Techniki paralaksy zobacz obszary nawigacyjne odpływają i płyną jak fala, w zależności od tego, gdzie jesteś na stronie.
Nie ma jednego sposobu na stworzenie idealnej strony serwisu. Ale iteracyjne podejście do projektowania i testowania, najlepiej z dostępem do statystyk twojej witryny i danych konwersji, prawdopodobnie przyniesie najlepsze rezultaty.
Będąc silnikiem napędzającym Twoją stronę, nawigacja powinna być przewidywalna, prosta, spójna i dobrze umiejscowiona.