Jak ułatwić nawigację na złożonych serwisach www?

Jak ułatwić nawigację na złożonych serwisach www?

Czy kiedykolwiek czułeś się zagubiony przeglądając rozbudowaną stronę internetową? Masz wrażenie, że po kliknięciu w kolejny link lądujemy w zupełnie innej części serwisu, a odnalezienie pożądanej informacji graniczy z cudem? Jeśli tak, dołączasz do grona użytkowników, którzy mierzą się z wyzwaniami związanymi ze złożoną nawigacją.

Nowoczesne strony internetowe stają się coraz bardziej rozbudowane. W pewnym momencie użytkownik może poczuć się zagubiony ze względu na dużą ilość treści. Natomiast sama strona zaczyna być trudna w wykorzystaniu. Pojawia się potrzeba stworzenia wygodnej, łatwej w budowaniu i utrzymywaniu nawigacji. Rozwiązaniem, które sprawdza się w tym przypadku, jest mega menu.

Czym jest mega menu?

Mega menu to rodzaj nawigacji składającej się z kilku poziomów, umieszczanej na stronach internetowych. Pierwszy poziom przypomina standardową listę odnośników, jednak po najechaniu kursorem na jeden z elementów rozwijają się dodatkowe opcje. Te opcje to nie tylko lista odnośników w drugim poziomie nawigacji, ale często trzeci czy nawet czwarty poziom. Niekiedy są tam też widoczne zdjęcia, a nawet wideo. Tak zbudowane menu jest bardzo atrakcyjne wizualnie dla użytkownika i pozwala mu łatwo odnaleźć się w rozbudowanych serwisach internetowych.

Jak działa mega menu na przykładzie strony na Drooplerze? W CMS Drupal tworzenie mega menu jest dość trudnym zadaniem. Właśnie dlatego powstały moduły, które pozwalają ułatwić budowanie zaawansowanej nawigacji. Jednym z nich jest Mega Menu. Pozwoli on nie tylko oszczędzić niezliczoną ilość czasu na tworzenie i dostosowywanie złożonej nawigacji na stronie internetowej, ale jednocześnie sprawi, że Twoja witryna zrobi niesamowite wrażenie na użytkownikach.

Jak zbudować mega menu w Drupalu?

Sposób działania modułu Mega Menu wygląda następująco: na bazie domyślnych menu Drupala zostają utworzone konfigurowalne mega menu, do których możemy dorzucać podmenu lub nawet całe bloki za pomocą przyjaznego interfejsu konfiguracji. Dodatkową opcją jest możliwość dodania kilku kolumn w menu podrzędnym, ustawienie stylów i animacji.

Ustawienia menu głównego możemy znaleźć w menu administracyjnym Drupala w Structure. Następnie w Drupal 8 Mega Menu odszukujemy element Main navigation i przechodzimy z menu elementu do Edit links. Po przejściu do strony edycji ukazuje nam się robocza struktura menu głównego, którą możemy dowolnie edytować na zasadzie przeciągnij i upuść. Natomiast aby dodać kolejne poziomy menu, należy element, który jest podrzędny, przesunąć w prawo, żeby powstało wcięcie.

Aby dodać blok do menu, musimy na początek dodać nowy blok z treścią. Przechodzimy do Structure – Block Layout – Add custom block i wybieramy content block. System przenosi nas do formularza, gdzie dodajemy nowy blok, wypełniając tytuł i interesującą nas treść. W tym przypadku będzie to tytuł i kilka linków. Następnie dodamy kolejny blok z treścią i zdjęciem.

Po dodaniu dwóch bloków trzeba je dodać do regionu na stronie i jednocześnie wyłączyć wyświetlanie tych bloków w regionie. W Block Layout sekcji header klikamy Place block, a następnie z okna pop-up wybieramy blok, który chcemy dodać, i klikamy Place block. W kolejnym kroku odznaczamy opcję show title i zapisujemy.

Gdy bloki są dodane do regionu, należy je wyłączyć. Aby to zrobić, klikamy Disable w menu akcji danego bloku. Po zakończeniu tego kroku możemy rozpocząć dodawanie bloków do menu. W tym celu przechodzimy do Structure Drupal 8 Mega Menu, a następnie klikamy config przy main navigation. Zostajemy przeniesieni do edycji menu. W naszym przypadku bloki będziemy dodawać do elementu products. Po kliknięciu products z prawej strony ukazuje się panel konfiguracyjny. Zaznaczamy w nim Submenu jako aktywne.

Teraz pod products pojawia się obszar roboczy, gdzie dodamy za chwilę nasze bloki. Klikając na ten element pod products, pojawia się kolejny panel konfiguracyjny, lecz tym razem dotyczy naszego obszaru roboczego. W tym panelu za pomocą przycisków plus i minus ustawiamy ilość kolumn naszego mega menu. W polu Grid ustalamy szerokość kolumny, natomiast pole Blocks służy do tego, aby wybrać wcześniej dodane bloki. Po ustawieniu odpowiednich opcji klikamy Save, i nasze menu powinno wyglądać podobnie jak na poniższym obrazku.

Mega menu jest dobrą opcją do przedstawienia użytkownikowi zaawansowanej struktury strony lub aplikacji internetowej. Za pomocą dystrybucji Droopler i modułu Mega Menu możemy w łatwy sposób budować zaawansowane strony z wygodną dla użytkownika nawigacją, która pozwala w czytelny sposób pokazać strukturę złożonej strony internetowej.

Czy mega menu to rozwiązanie dla każdego serwisu www?

Choć mega menu jest bardzo przydatne w przypadku złożonych serwisów, nie zawsze musi być ono najlepszym rozwiązaniem. Jeśli strona internetowa jest stosunkowo prosta i nie posiada wielu poziomów nawigacyjnych, warto rozważyć klasyczną, jednowarstwową nawigację. Nadmierna rozbudowa menu może wręcz przytłaczać użytkownika i utrudniać mu poruszanie się po witrynie.

Przykładem dobrze zaprojektowanej, lecz stosunkowo prostej nawigacji może być strona Garmin. Główne kategorie są czytelnie przedstawione w górnej części ekranu, a po najechaniu na nie użytkownik ma dostęp do szczegółowych informacji. Nie ma tu zbędnego zagmatwania, a cała struktura serwisu jest intuicyjna i przyjazna.

Z drugiej strony strona rządowa poświęcona dostępności cyfrowej jest już przykładem serwisu, który z powodzeniem wykorzystuje mega menu. Rozbudowana struktura informacji wymagała zastosowania zaawansowanej nawigacji, aby użytkownicy mogli łatwo odnaleźć interesujące ich treści.

Pamiętaj, że niezależnie od wybranego rozwiązania, najważniejsze jest, aby nawigacja była intuicyjna, czytelna i dostosowana do potrzeb Twoich użytkowników. Dobre menu to takie, które pozwala im szybko i sprawnie przemieszczać się po Twojej witrynie, niezależnie od jej stopnia złożoności.

Jak jeszcze możesz ułatwić nawigację na swojej stronie?

Oprócz mega menu, istnieje wiele innych sposobów, które mogą pomóc Twoim użytkownikom w poruszaniu się po Twojej stronie internetowej. Oto kilka z nich:

1. Breadcrumbs (ścieżka nawigacyjna) – to element, który pokazuje, gdzie w strukturze witryny znajduje się aktualnie przeglądana podstrona. Dzięki temu użytkownik łatwo może wrócić do wyższych poziomów w hierarchii.

2. Wyszukiwarka – umożliwia szybkie znalezienie pożądanych informacji, bez konieczności przeszukiwania całej strony.

3. Inteligentne linkowanie – ważne jest, aby linki były jasno sformułowane i opisywały dokładnie, dokąd prowadzą. Unikaj ogólnych sformułowań typu “kliknij tutaj”.

4. Responsywny design – strona, która dobrze skaluje się na różnych urządzeniach, ułatwia nawigację niezależnie od tego, czy użytkownik korzysta z komputera, tabletu czy smartfona.

5. Czytelna struktura treści – podziel informacje na logiczne sekcje i podsekcje, stosuj przejrzyste nagłówki. Pomoże to użytkownikom szybko zorientować się, gdzie mogą znaleźć interesujące ich treści.

6. Mapа strony – to dodatkowa nawigacja, która przedstawia hierarchiczną strukturę całego serwisu w jednym miejscu. Ułatwia to użytkownikom ogólne zorientowanie się w zawartości witryny.

Pamiętaj, że nawigacja to nie tylko kwestia estetyki, ale przede wszystkim funkcjonalności. Inwestując w dobrze zaprojektowane menu i inne rozwiązania ułatwiające poruszanie się po Twojej witrynie, dajesz użytkownikom narzędzia, dzięki którym mogą efektywnie i z przyjemnością korzystać z Twoich treści. To z kolei przekłada się na wyższą satysfakcję, lojalność i ostatecznie – sukces Twojej strony internetowej.