System nawigacji

Podstawą poruszania się po stronach WWW są hiperłącza, dzięki którym można połączyć ze sobą poszczególne osobne elementy serwisu WWW w jedną całość. Prawidłowo zaprojektowana nawigacja pozwala internaucie odnaleźć poszukiwane treści, informuje go gdzie się aktualnie znajduje, gdzie może się dostać oraz jak powrócić do miejsca, w którym już był.

Nie ma chyba jednoznacznej odpowiedzi na pytanie, gdzie powinno znajdować się menu główne witryny. Część webmasterów, co jakiś czas eksperymentuje z różnymi pozycjami. Niektórzy próbują odpowiedzieć na to pytanie prowadząc badania oraz publikując swoje wyniki. Jak wynika z badań przeprowadzonych w 2002 r. na potrzeby witryny WebDesignPractices.com, 89% spośród 75 czołowych serwisów z branży e-comerce, umieszcza menu główne w górnym pasku.

Tabela poniżej pokazuje wyniki przeprowadzone przez WebDesignPractices.com:

Z uwagi na fakt, że badania te zostały przeprowadzone dawno, należy je obecnie traktować, jako ciekawostkę. Obecnie nie ma jednolitego trendu, choć wydaje się, że menu poziome nadal jest najczęściej klikane i występuje chyba w przeważającej ilości stron WWW. Od jakiegoś czasu trwa „spór” o to, po której stronie umieścić menu pionowe. Wiele osób przedstawia argumenty przemawiające za tym, aby menu znajdowało się po prawej stronie.

Według mnie, to gdzie zostanie umieszczone menu pionowe, zależy w dużej części od przedstawianych treści. Strona firmowa, np. salonu samochodowego może mieć menu z prawej strony, ponieważ twórcom może zależeć na tym, aby w jak największej liczbie przypadków ta treść była widoczna. Dzieje się tak wtedy, gdy rozmiar ekranu, lub rozdzielczość jest niewielka. Wówczas menu umieszczone po prawej stronie nie jest widoczne, natomiast treść jest widoczna przez cały czas. Wydaje mi się jednak, że jeżeli internauta wchodząc na stronę ma dokonać jakiegoś wyboru, to menu umieszczone po lewej stronie wydaje się być bardziej odpowiednim rozwiązaniem.

Menu pionowe dosyć dobrze spisuje się, w przypadku, kiedy stosowane są długie nazwy linków, w miarę potrzeb można je bez większych kłopotów rozbudowywać oraz można za jego pomocą pomieścić wiele poziomów nawigacji. Wadą tego typu rozwiązania jest fakt, że przy dosyć dużej ilości kategorii i podkategorii, nie zawsze jest widoczne, ponieważ może leżeć poza obszarem widocznym na ekranie i może wymagać przewinięcia strony za pomocą pionowego paska przewijania przeglądarki.

Menu poziome może być prezentowane w różny sposób. Bardzo często wykorzystywane są w takim przypadku tzw. zakładki, których forma okazała się na tyle sprawdzona (czytelna i łatwa w obsłudze dla użytkownika), że zaczęła być stosowana także w aplikacjach desktopowych, takich jak np. programy w pakiecie Microsoft Office 2007 i 2010. Na rysunku poniżej przedstawiam przykład zastosowania menu zakładkowego na przykładzie serwisu MarsHill.cc oraz niżej menu w Microsoft Office:

Tego typu menu jest zauważalne przez użytkowników, nie zajmuje zbyt wiele miejsca, dzięki czemu istnieje możliwość umieszczenia większej ilości treści. Niestety rozwiązanie to posiada również swoje ograniczenia. Nie ma sensu jego stosowania, kiedy liczba kategorii (zakładek) jest zbyt duża. Nazwy linków w ramach tego menu powinny być krótkie.

Na rysunku poniżej przedstawiam przykład tzw. menu kaskadowego, które jest używane przez niektórych projektantów. Pozwala ono na umieszczenie w ramach menu nawigacyjnego zarówno kategorii podstawowych jak i ich elementów. Tego typu menu ma również wielu przeciwników, którzy uważają, że jest ono niewygodne, ponieważ nie zawsze jest wiadomo jak należy go użyć. Czasami trzeba kliknąć, by menu się rozsunęło i pokazało podkategorie, a czasami wystarczy pokazać kursorem myszy kategorię główną. Czasami zdarza się, że poruszając myszką, kursor myszy zeskoczy z menu, co w rezultacie powoduje jego zamknięcie. Szczególonie niewygdne jest ono podczas korzystania z urządzeń mobilnych, takich jak smartfony, PDA, tablety itp.

Jak już wcześniej wspomniałem, prawidłowo zaprojektowana nawigacja powinna informować internautę gdzie się aktualnie znajduje. Obecnie większość witryn stosuje technologię zwaną „breadcrumbs” (okruszki chleba). Nazwa oraz idea tej technologii została zaczerpnięta ze znanej baśni Andersena o Jasiu i Małgosi. Kiedy bohaterowie tej baśni zostali wyprowadzeni w las, rzucali okruchy chleba, aby oznaczyć drogę, którą przybyli. Podobne zastosowanie cechuje breadcrumbs wykorzystywane na stronach WWW. Najczęściej mechanizm ten stosowany jest w górnym obszarze strony w postaci poziomego paska odzwierciedlającego ścieżkę, po której poruszał się internauta odwiedzający serwis.

Warto zauważyć również, że podobnie jak w przypadku poziomego menu zakładkowego, tak i w tym przypadku rozwiązanie to zostało przeniesione do aplikacji desktopowych. Przykładem może być w tym przypadku system Microsoft Windows. Od wersji Windows Vista, pasek adresu wyposażony został w breadcrumbs. Na rysunku poniżej przedstawiony został pasek breadcrumbs programu Eksplorator Windows w systemie Windows 7:

Pewnym elementem, który pozwala internaucie upewnić się, że znajduje się na właściwej witrynie jest tzw. favicon, czyli ikona ulubionych (czasami nazywana ikoną witryny), która pojawia się zwykle w polu adresowym z lewej strony adresu witryny oraz po lewej stronie na liście zakładek przeglądarki internetowej obok tytułu strony:

Jest to niewielka grafika o rozmiarach 16x16 lub 32x32 pikseli. Również po dodaniu witryny do Ulubionych, przy jej nazwie pojawiać się będzie favicon:

Uważasz, że artykuł był ciekawy i chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Wpisz swoje imię oraz adres e-mail a następnie kliknij "ZAPISZ MNIE"