Menu(ang. Header)
Menu znajduje się w górnej części strony. Zawiera logo, główną nawigację i funkcje pomocnicze. Jest to element wspólny i niezmienny dla różnych podstron w obrębie jednego serwisu internetowego czy aplikacji.
Wyróżniamy menu: I stopnia, II stopnia, III stopnia, IV stopnia i menu boczne.
Na każdej stronie musi wystąpić przynajmniej menu I stopnia. Pozostałe rodzaje menu występują w zależności od stopnia rozbudowania architektury informacji. Do podstron znajdujących się w strukturze poniżej menu IV stopnia można dojść jedynie poza główną nawigacją, tj. z poziomu podstron znajdujących się wyżej w hierarchii.
Menu na urządzeniach mobilnych
Na urządzeniach mobilnych linki menu schowane są pod ikonką "hamburgera". Menu w wersji mobilnej umożliwia nawigację na stronie w tym samym stopniu co menu w wersji desktopowej: zawiera wszystkie linki menu desktopowego.
Menu I stopnia
Menu I stopnia jest widoczne od razu na stronie. Menu nie podąża za użytkownikiem podczas przewijania strony w dół. Pojawia się jednak ponownie podczas przewijania strony w górę i pozostaje przyklejone do górnej krawędzi okna przeglądarki. Przy ponownym przewinięciu strony w dół, menu znika. Takie zachowanie pozwala na prezentowanie menu w momencie, w którym użytkownik szuka powrotu na górę strony. Przyklejone menu występuje zawsze w wariancie przeznaczonym do jasnego tła.
Struktura
Logotyp
Przekierowuje na stronę główną.
Zakładki menu I stopnia
Są to nazwy najważniejszych działów, tj. pogrupowanych tematycznie podstron. Kliknięcie na zakładkę otwiera menu II stopnia. Nazwy zakładek powinny być jak najbardziej zwięzłe. Rekomendowany limit zakładek to 6.
Menu pomocnicze opcjonalne
Zawiera dodatkowe funkcje. Przykładowo, może to być zmiana języka, otwarcie menu Grupy ORLEN czy link do strony kontaktowej. Rekomendowany limit linków to 4.
Ikona wyszukiwarki opcjonalna
Przycisk-ikona, którego kliknięcie otwiera okno wyszukiwarki. Obok ikony wyszukiwania mogą być tutaj umieszczone inne klikalne ikony pełniące globalne funkcje (np. ikona koszyka dla portalu e-commerce). Rekomendowany limit ikon to 3.
Separator
Oddziela menu I stopnia od pozostałych części strony.
Wszystkie elementy menu I stopnia z wyjątkiem separatora są klikalne.
Warianty
Gdy menu I stopnia występuje nad okładką, należy zastosować jego wariant przeznaczony do ciemnego tła. Ta wersja menu dopuszczalna jest tylko na podstawowej stronie korporacyjnej ORLEN.pl.
Dodatkowo, jeśli została kliknięta ikona wyszukiwarki, menu I stopnia przechodzi w tryb wyszukiwania. Wówczas strona znajdująca się pod spodem zostaje przyciemniona i rozwija się wyszukiwarka.
Zasady stosowania
Zmieniona kolejność elementów
Zbyt dużo zakładek
Nie należy umieszczać więcej niż 6 zakładek w menu I stopnia
Zbyt długie nazwy zakładek
Zbyt dużo linków pomocniczych
Rekomendowany limit linków pomocniczych to 4.
Więcej niż 3 klikalne ikony
Promowanie treści w menu I stopnia
Nie należy wykorzystywać menu I stopnia do prezentowania okresowych promocji wybranych treści.
Menu II stopnia
Jest to menu widoczne po kliknięciu jednego z linków głównej nawigacji. Strona znajdująca się pod otwartym menu jest przyciemniona.
Struktura
Nazwa i opis działu
Nazwa działu z krótką zapowiedzią zawartości z przyciskiem odsyłającym na stronę główną działu. Rekomendowana długość nazwy to 1 linijka, a opisu – 2-5 linijek na wszystkich rozdzielczościach.
Linki menu II stopnia
Są to odnośniki do głównych podstron działu. Kliknięcie w linki z ze strzałką otwiera menu III stopnia. Linki bez ikony otwierają bezpośrednio daną podstronę. Linki powinny być jak najbardziej zwięzłe. Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach. Rekomendowana liczba linków to 5-10.
Zajawki opcjonalne
Przestrzeń po prawej stronie jest wykorzystywana do promowania wybranych treści z danego działu lub przedstawiania najbardziej istotnych informacji (np. w formie wykresu czy tabeli). Możliwe jest dodanie maksymalnie dwóch zajawek. W przypadku umieszczenia jednej zajawki, powinna ona znajdować się przy prawej krawędzi gridu, zaś przestrzeń między linkami a zajawką powinna pozostać pusta.
Zasady stosowania
Zbyt długa nazwa i opis działu
Rekomendowana długość nazwy to 1 linijka, a opisu – 2-5 linijki na wszystkich rozdzielczościach.
Zbyt długie linki
Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach.
Zbyt mało lub zbyt dużo linków
Rekomendowana liczba linków to 5-10.
Jedyna zajawka nie znajduje się po prawej stronie
Menu III stopnia
Jest to menu widoczne po kliknięciu jednego z linków menu II stopnia. Strona znajdująca się pod otwartym menu jest przyciemniona.
Struktura
Linki menu III stopnia
Są to odnośniki do podstron działu. Kliknięcie w linki z ze strzałką otwiera menu IV stopnia. Linki bez ikony otwierają bezpośrednio daną podstronę. Linki powinny być jak najbardziej zwięzłe. Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach. Rekomendowana liczba linków to 5-10.
Zasady stosowania
Zbyt długie linki.
Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach.
Zbyt mało lub zbyt dużo linków
Rekomendowana liczba linków to 5-10.
Zajęte miejsce po prawej stronie
Menu IV stopnia
Jest to menu widoczne po kliknięciu jednego z linków menu III stopnia. Strona znajdująca się pod otwartym menu jest przyciemniona.
Struktura
Linki menu IV stopnia
Kliknięcie w link otwiera wybraną podstronę. Linki powinny być jak najbardziej zwięzłe. Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach. Rekomendowana liczba linków to 5-10.
Zasady stosowania
Zbyt długie linki
Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach.
Zbyt mało lub zbyt dużo linków
Rekomendowana liczba linków to 5-10.
Menu boczne
Jest to menu pojawiające się po kliknięciu linku “Grupa ORLEN”. Zawiera linki kierujące do stron poszczególnych spółek.
Struktura
Nagłówek
Obecnie treść nagłówka jest stała.
Linki menu bocznego
Są to odnośniki do stron poszczególnych spółek.
Przycisk-ikona opcjonalne
Kliknięcie jej zamyka menu boczne.
Zasady stosowania
Zbyt długie linki
Rekomendowana długość to 1 linijka tekstu na wszystkich rozdzielczościach.
Zbyt mało lub zbyt dużo linków
Rekomendowana liczba linków to 10-30.