System nawigacji

system nawigacjiPodstawą 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:

Wyniki Badań WebDesignPractices

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:

Menu zakładkowe - przykład

Menu zakładkowe - Microsoft Office 2007

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.

Przykład projektu menu kaskadowego

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:

Breadcrumbs w 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:

Ikona favicon

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:

Favicon w ulubionych

 

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"

Twoje imię:


Adres email:


Joomla! 1.6 na home.pl
Już jest! Pakiet języka polskiego dla Joomla! 1.6

Podobne wpisy

 

Komentarze

Umieść swój komentarz jako pierwszy!
Gość
niedziela, 17 listopad 2019

Zdjęcie captcha

Najnowsze komentarze

Gość - Studio Jak wybrać hosting dla Joomla!?
13 wrzesień 2019
Warto jeszcze dopisać punkt, żeby przy wyborze wybrać panel między DirectAdmin/cPanel. Niektóre hostingi mają swoje własne rozwiązania - czasami bardzo specyficzne, co niekoniecznie jest dobrą rzeczą
Gość - Marek Szyfrowanie symetryczne a niesymetryczne
09 czerwiec 2019
"Klucz przekazany do publicznej wiadomości, nazywany jest kluczem publicznym lub jawnym. Może on być stosowany do szyfrowania lub deszyfrowania informacji otrzymanych od osoby, która go wygenerowała. ...
Gość - Marek Tworzenie szablonów dla Joomla! Helix Ultimate
10 maj 2019
Witam, napotkałem problem pojawiający się przy zmianie kolorów tła czy czcionek oraz importowaniem ustawień. W pierwszym przypadku, po zmianie kolorów i ich zapisaniem, panel podglądu strony przeładow...
Gość - Andy SSL i Joomla! w Smarthost
03 styczeń 2019
Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
02 styczeń 2019
Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...