UX Design nawigacji na stronie www – jak zrobić to poprawnie?

Nawigacja na stronie www – czym jest?

Nawigacja na stronie to jeden z najważniejszych elementów odpowiadających za użyteczność strony internetowej. Nieważne, czy mamy do czynienia ze sklepem internetowym lub inną witryną. Dlatego praktycznie każdy audyt UX obejmuje badanie i analizę pod kątem poruszania się użytkownika w serwisie.

Dobry projekt nawigacji na stronie internetowej – dlaczego jest tak ważny?

Dobrze zaprojektowana nawigacja będzie pomagała nie tylko użytkownikom, ale również biznesowi. Klient przemierzający z łatwością drogę do koszyka, dokona zakupu. Potencjalny zamawiający, szukający wykonawcy prac, który łatwo dotrze do poszukiwanych informacji w serwisie, także chętniej nawiąże współpracę biznesową.

Źle zaprojektowana nawigacja strony internetowej może zniechęcać użytkowników

Badania wykazują, że około 25% użytkowników porzuca koszyk w sklepie internetowym, ponieważ proces checkoutu był za długi i skomplikowany. Źle zaprojektowany proces zakupowy przekłada się zatem pośrednio na wysokość sprzedaży.

Nawigacja na stronie wpływa na konwersję użytkowników

Nawigacja pomaga użytkownikom w dotarciu do pożądanego celu. Jeśli ta droga nie będzie dla nich wystarczająco łatwa, to mogą mieć problemy lub po prostu zrezygnować np. ze złożenia zamówienia w sklepie internetowym. Należy pamiętać, że dzięki sprawnej nawigacji możemy zwiększyć konwersję.

Na co zwrócić uwagę przy projektowaniu nawigacji?

Przy projektowaniu nawigacji należy przede wszystkim zwrócić uwagę na:

• charakter strony (nawigacja będzie inna w sklepie internetowym i na landing page),
• cele biznesowe (może jakieś elementy powinny być bardziej widoczne, np. promocje),
• potrzeby użytkowników (szybki dostęp do jakiegoś elementu),
• utarte schematy (zazwyczaj nie warto przenosić ikony koszyka w inne miejsce niż prawy górny róg, ponieważ użytkownicy tam się go spodziewają).

Elementy nawigacji strony internetowej

Na stronie internetowej można wyróżnić zazwyczaj wiele elementów nawigacji. Pełnią one odmienne funkcje, jednak wspólnie się uzupełniają i umożliwiają wygodne poruszanie się po stronie.

Breadcrumbs – okruszki jako element nawigacji serwisu www

Okruszki to stały element szczególnie większych i bardziej skomplikowanych serwisów. Często zagłębiając się w architekturze strony, możemy się pogubić. Okruszki przypominają nam jednak, jaką ścieżkę przeszliśmy i umożliwiają powrót na powiązaną hierarchicznie stronę serwisu.

Menu z kategoriami i podkategoriami

Głównym kręgosłupem nawigacji jest menu strony. Znajdziemy tam wszystkie podstrony, na które zawsze możemy się wygodnie przenieść, ponieważ menu pozostaje na ekranie jako stały element. Kluczem do dobrego menu są dobrze nazwane i posortowane kategorie.

Logo

Logo najczęściej oprócz funkcji identyfikującej i estetycznej pełni również funkcję nawigacyjną. Służy także do szybkiego powrotu na stronę główną witryny. Jest to na tyle utarty schemat, że większość stron posługuje się tym zabiegiem.

Stopka (footer)

Stopka strony www zawiera często odnośniki do podstron takich jak np. regulamin sklepu internetowego, kariera, czy kontakt. Ponieważ, mimo, że zawierają one ważne informacje, najczęściej nie wchodzą w skład głównego procesu nawigacyjnego umieszcza się je z reguły na dole strony.

pobierz pdf

Jaka powinna być dobra nawigacja strony www?

Dobra nawigacja jest intuicyjna. Użytkownik wie, co gdzie się znajduje i potrafi korzystać z nawigacji od razu po wejściu na stronę. Nie musi się jej uczyć. Dobra nawigacja powinna również zawsze informować użytkownika o tym, gdzie aktualnie się znajduje.

Intuicyjna i czytelna nawigacja strony www

Aby stworzyć czytelną i intuicyjną nawigację, musimy przede wszystkim wiedzieć, jaka będzie zawartość strony. Dopiero wtedy możemy przystąpić do tworzenia struktury, która odpowie na potrzeby użytkowników.

UX nawigacji strony internetowej – wersja desktop i mobile

W zależności od rozdzielczości i typu urządzenia docelowego używa się różnych rodzajów nawigacji. Należy zawsze wziąć pod uwagę możliwości, ale również ograniczenia, które narzuca nam dany typ urządzenia.

Popularne rozwiązania

Pośród rozwiązań, które do tej pory powstały możemy wyróżnić parę, które należą do tych bardziej lubianych i popularnych. Częstość ich występowania sprawia, że ich przeznaczenie jest jasne dla klientów, a użycie intuicyjne.

Hamburger menu

Do najbardziej popularnych rozwiązań mobilnych zalicza się tzw. menu hambgurgerowe. Jego nazwa wywodzi się z kształtu ikony, która kryje pod sobą menu. Jest ona złożona z trzech poziomych kresek, które jednoznacznie kojarzą się z wyglądem hamburgera.

Ta metoda ma swoje zastosowanie na urządzeniach mobilnych z uwagi na ograniczone miejsce na ekranie. Dzięki hamburger menu możemy ukryć zawartość menu w bocznym wysuwanym panelu.

Poziome menu

Poziome menu stosuje się zazwyczaj w desktopowych wersjach serwisów. Dzięki obszerności ekranu mamy możliwość umieszczenia pozycji menu poziomo obok siebie. Zaletą tego rozwiązania jest przede wszystkim szybki dostęp do poszczególnych podstron.

Odpowiednikiem tego rodzaju menu w warunkach mobilnych jest dolny pasek nawigacyjny, składający się z paru ikon ułożonych obok siebie, z których każda odpowiada za uruchomienie innej zakładki w aplikacji mobilnej.

CTA

Dzięki Call To Action możemy przenieść się z jednej strony na drugą. Zazwyczaj tego zabiegu używa się na stronie głównej, która gromadzi tylko część informacji o usłudze lub produkcie. Aby przeczytać na dany temat więcej, użytkownik ma możliwość przeniesienia się na konkretną podstronę za pomocą przycisku.

Pamiętaj o testowaniu rozwiązań

Tak jak każdy inny proces na stronie, architektura strony również może być poddana testom użyteczności. Może się okazać na przykład, że podkategorie menu zostały niewłaściwie przypisane do kategorii głównych i użytkownicy mają problem z odszukaniem konkretnych informacji. Można wtedy zastosować technikę badawczą sortowania kart, aby poprawnie pogrupować informacje na stronie. Więcej o testach użyteczności dowiesz się w naszym artykule „Testy UX – jak sprawdzić użyteczność projektu”.

Podsumowanie

Nawigacja odgrywa bardzo ważną rolę w tworzeniu doświadczeń użytkownika. Dokładnie przemyślana nawigacja stworzona z myślą o potrzebach użytkownika może przyczynić się do wzrostu konwersji oraz sprzedaży.