Dobre menu na stronie internetowej

pletwyPrzechodząc od razu do rzeczy – dobre menu na stronie internetowej to takie, które zawiera najważniejsze elementy, a nie przytłacza ich ilością. Naczelna, wręcz święta zasada głosi:
Menu jest drogowskazem, a nie mapą!

Warto pamiętać, że ludzi bardzo zniechęca przytłoczenie informacją, której obecnie i tak jest nadmiar. Przełóż to na swoją stronę -> jeśli internauta jest przytłoczony / zniechęcony to odbija się to na user experience, czyli taka osoba odnosi złe wrażenie podczas odwiedzin strony, a które to złe wrażenie przekłada się także w stosunku do osób czy firmy stojącej za stroną.

Prócz tego takie mocno rozbudowane menu utrudnia podejmowanie wyborów, a internauta który błądzi po stronie może znowu popaść w zniechęcenie. Błądzi, bo przecież wybiera niewłaściwe podstrony. Interesującym porównaniem jest nawiązanie do pani Magdy Gessler, która zawsze upraszcza menu. Jednym z głównych powodów jej działania jest fakt, że zbyt wielkie menu utrudnia klientom wybranie potrawy do zamówienia.

Można spojrzeć na stronę internetową z punktu widzenia internauty i spróbować sobie wyobrazić jak wybiera kolejne podstrony. Choć nie zawsze udaje się to w pełni obiektywnie, ponieważ każdy z nas posiada swoje przyzwyczajenia. Dlatego warto podpytać różnych osób o sposób nawigacji na naszej stronie – czy mogą szybko trafić do treści, których oczekują.

Co zrobić jeśli posiadamy wiele ważnych podstron w naszym serwisie internetowym? Należy je grupować dając do nich dostęp krokowy. Poniżej przykład z istniejącej strony www.meduza.org.pl

meduza-kursyWłaściciel posiada wiele kursów, które są pogrupowane. Wiele z tych kursów jest ważnych, jednakże w menu zostały wyciągnięte tylko główne grupy kursów w formie rozwijanego menu. Natomiast dla dodatkowego ułatwienia nawigacji, po wejściu do kursu z wybranej grupy pojawia się z lewej strony pomocnicze menu, które zawiera odsyłacze do wszystkich kursów z danej grupy. Obok obrazek ilustrujący to pomocnicze menu widoczne na stronie kursu.

Drugi kluczowy aspekt dobrego menu także związany jest z prostotą – należy upraszczać nazwy pozycji zawartych w menu.
Ponownie skorzystam ze strony Meduzy, aby podać dobry przykład. Zamiast „Kursy nurkowania rekreacyjne” w menu użyliśmy określenia „Rekreacyjne”, a dopiero po wejściu na stronę pojawia się pełna nazwa. Zauważ, że pozycja menu pomimo uproszczenia nadal jasno wskazuje co internauta znajdzie na wskazanej podstronie.

Trzeci element dobrego menu na stronach internetowych to… no kto zgadnie? Oczywiście ponownie upraszczanie! Upraszczanie po trzykroć :-)
Tym razem chodzi o uproszczenie menu w wersji na telefony komórkowe. Gdy samo menu jak i rozwijanych pozycji jest dużo, warto wyłączyć wyświetlanie rozwijanych pozycji. Internauta przeglądający stronę na telefonie po kliknięciu w menu przechodzi na podstronę, a tam znajduje klarowne przyciski wyboru dalszych pozycji. Oczywiście ma to zastosowanie w przypadku rozbudowanego menu.

meduza-menuTakże i tu mogę przytoczyć przykład Meduzy. Możesz to sprawdzić nawet na komputerze z dużym ekranem – mocno zmniejsz okno przeglądarki aby uzyskać wersję jaką internauta zobaczy na telefonie komórkowym, obok zrzut ekranu.
Następnie kliknij w „Kursy nurkowania”. Nie zobaczysz rozwiniętego menu tylko stronę z płytkami, które także obrazowo poprzez zdjęcia sugerują wybrany rodzaj kursów.

Na końcu warto rozważyć przyklejenie menu do górnej krawędzi przeglądarki w czasie przesuwania ekranu. I znowu wykorzystam Meduzę, wejdź na stronę główną, przewiń ją do stopki i spójrz na górną krawędź, znajdziesz tam przyklejone menu. Ono zawsze jest pod ręką, to bardzo wygodne rozwiązanie.

Jeśli posiadasz stronę internetową spójrz na nią proszę przez pryzmat tego co opisałem. Może znajdziesz coś, co warto usprawnić. Usprawnić w tym wypadku oznacza uprościć.

Zdjęcie tytułowe tego wpisu nie nawiązuje do idei menu, tylko do strony, którą wykorzystałem aby zademonstrować dobre praktyki tworzenia menu. A na zdjęciu oczywiście nóżki autora tego wpisu :-)

27 lipca 2016, Tomasz Bartosiewicz,

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *