Elementy graficzne wspierające czytelną nawigację

Autor: Michał Galubiński, dodano: 13-08-2003
Kategoria: Projektowanie WWW

Któż z nas nie docenia przemyślanej i czytelnej nawigacji podczas wędrówek po witrynach. Kto z nas projektując serwis nie zastanawia się jak ułatwić odwiedzającemu dostęp do informacji, zachęcając go w ten sposób do częstego korzystania z naszej WWW.

Zakładamy, że serwis o którym będzie tu mowa zawiera minimum kilka podstron o różnej tematyce oraz ma pełnić funkcję czytelnego nośnika informacji a nie szokować konstrukcją. Należy także pamiętać, że "porady" zawarte w tym tekście nie są jedynie obowiązującymi zasadami i oczywiście wszelkie odstępstwa są dozwolone. Zaleca się potraktować ten artykuł jako poradnik "jak robić" a nie "co zrobić".

Kilka słów teorii

1. Menu powinno znajdować się w obrębie okna przeglądarki natychmiast po otworzeniu serwisu. Osoba odwiedzająca nasz serwis w większości wypadków zainteresowana jest konkretnymi treściami (usługą, informacją czy np. kontaktem do nas), nie możemy pozwolić, aby kilka sekund, które poświęci na przeszukiwanie wzrokiem ekranu zakończyły się fiaskiem.

2. Menu powinno być czytelne i jasne, może być tekstowe, tekstowo-graficzne lub graficzne. Jednak stosując piktogramy (ikony) musimy pamiętać że ich przekaz ma być czytelny dla wszystkich, nie tylko dla nas.

3. Staramy się stosować metodę "2 klików" - dojście do poszukiwanego materiału nie powinno powodować konieczności przeglądania więcej niż dwóch stron danego serwisu.

Są to podstawy które ułatwią odwiedzającemu przeszukanie i wydobycie wszystkich przydatnych informacji znajdujących się na naszym serwisie. Stosując te założenia w praktyce zyskujemy już jeden atut, nasz internauta w wygodny sposób znalazł potrzebne materiały i wie, że w przyszłości nie będzie miał problemów ze znalezieniem następnych informacji.

Praktyka

Uporządkujmy na początek możliwości układu menu. Najlepiej będzie jeśli zaczniemy od najczęściej stosowanych:

1. Menu boczne, po lewej stronie witryny - najczęściej (słowo najczęściej powinno wzbudzać natychmiast negatywne odczucia u webdesingera czy grafika) stosowany układ. Ułożone pod sobą odnośniki (przeważnie tekstowe linki) do kolejnych działów serwisu. Na plus zasługuje to, że większość internautów przyzwyczajona do takiego rozwiązania natychmiast rozpocznie serfowanie po witrynie. Do negatywnych cech tego rozwiązania można zaliczyć to, że jest to mało oryginalne rozwiązanie, ponadto wbrew pozorom nie najwygodniejsze (ergonomia – o tym w następnym punkcie)

2. Menu boczne, po prawej stronie. Układ zdobywający ostatnio coraz większą popularność dzięki badaniom nad ergonomią - otóż naukowcy dowiedli, że najczęściej wykonywaną czynnością przy przeglądaniu zawartości witryny WWW jest przewijanie, w związku z tym przenosząc menu bliżej paska przewijania ograniczamy ruch kursora, a przez to oszczędzamy rękę oglądającego. Jest jednak wada takiego rozwiązania - początkowa dezorientacja. Do niepożądanych skutków także, podobnie jak w analogicznym układzie z menu po lewej stronie, można zaliczyć ilość zajmowanego miejsca, oraz problem z zawijaniem dłuższych punktów naszego menu.

3. Menu górne - popularna "belka nawigacyjna". Poziomo ułożone odnośniki w jednym lub kilku ciągach w górnej części przeglądanej strony. Rozwiązanie wygodne w użytkowaniu a zarazem pozwalające zyskać miejsce. Często też przybierające postać "zakładek" których czytelność jest dużo większa niż pozostałych sposobów. Zastosowanie dynamicznego rozwijania (o tym za chwile) daje chyba najwygodniejszy sposób nawigacji na stronie.

4. Odnośniki usytuowane w dolnej części witryny - układ jako samodzielne menu stosowany niezwykle rzadko ze względu na to, że wzrok internauty pada tam na samym końcu. Najczęściej stosowane jako powtórzenie nawigacji z punktów 1, 2, 3 w celu ułatwienia przejścia do innych działów w chwili kiedy strona jest przewinięta w dół.

5. Inne rozwiązania - są to np. odnośniki umieszczone na środku strony, czy też pływające odnośniki, które można sobie ustawić w dowolnym miejscu. Rozwiązania ciekawe, przykuwające wzrok, choć bardzo rzadko pomocne w nawigacji.

Możemy też zastosować podział wg sposobu prezentacji odnośników. W menu możemy zaprezentować tekst, tekst z grafiką lub samą grafikę (mówimy tu o prezentacji a nie technologii - możemy więc mieć tekst w pliku graficznym, ale dalej mówimy, że jest to tekst). Najczęściej stosuje się metodę mieszaną lub czysto tekstową ze względu na trudności jakie pojawiają się przy próbach stworzenia czytelnych piktogramów dla rożnych działów. Przykładem niech będzie stosowanie ikony koperty jako odnośnika do poczty czy też znaku zapytania jako odwołania do pomocy.

Kolejnym podziałem jest technologia wykonania - myślę tu jedynie o nawigacji dynamicznej i statycznej. Jeśli ilość działów nie jest zbyt wielka pozostawienie statycznych odnośników wydaje się być bardzo dobrym rozwiązaniem. Gorzej się dzieje jeśli mamy rozbudowaną witrynę i chcemy np. zastosować się do zasady 2 klików. W takim wypadku stosuje się często menu "rozwijane". Polega to na tym że część odnośników ukryta jest do momentu interakcji (najechania kursorem czy tez np. kliknięcia) oglądającego. Dzięki temu bez ponownego ładowania strony możemy pokazać rozbudowaną strukturę strony.

Co jeszcze?

Istotna jest też systematyzacja, np. wszystkie odnośniki w serwisie muszą mieć tą samą, wyróżniającą je cechę. Może to być np. podkreślenie, pogrubienie czy też jeden unikalny kolor. Niedopuszczalne jest aby internauta jeździł kursorem po stronie w poszukiwaniu linku do kolejnej strony (chyba że jest to celowy zamysł twórcy, lecz takie strony wykluczyliśmy już na samym początku tego artykułu).

Dobrym pomysłem jest też zmiana kolorystyki linków ze standardowej. Zastosowana w przeglądarkach kolorystyka jest zupełnie nielogiczna - odnośniki nie odwiedzone przez nas są barwy niebieskiej (zimne) natomiast już przeglądane strony wyróżniają się kolorem bardzo ciepłym i przyciągającym wzrok. Spróbujcie zamienić kolorystykę - niech linki do nieodwiedzonych stron będą np. czerwone a pozostałe szare, bure, nie angażujące uwagi. Przekonacie się, że taki drobiazg ułatwi nawigację na stronie.

Powtarzanie nawigacji nie jest złe! Część osób tworzących serwisy twierdzi, że powtórzenie na jednej stronie odnośników jest błędem. Jest to myląca opinia. Ułatwienia tego typu nie są wprowadzane dla osób, które swobodnie poruszają się po witrynie (prawdopodobnie są jej częstymi użytkownikami ze względu na zawartość), ale służą zachęceniu do powrotu nowych odwiedzających. Pomóżmy im więc znaleźć to czego szukają, niech mają odnośnik w menu, wśród informacji na stronie i np. w powtórzonej liście na dole strony.

Zaznacz wyraźnie gdzie w danej chwili internauta znajduje się na witrynie. Spora grupa osób nie zna większości funkcji przeglądarek internetowych! Przycisk "wstecz" dla nich to nowość do której nie mogą się przyzwyczaić - z tego samego powodu powinno się umożliwić przejście z dowolnego miejsca witryny do poprzedniej strony oraz do strony głównej.

Prezentuj dane czytelnie i jasno, może dobrym pomysłem jest wykorzystanie sprawdzonych pomysłów. Przykładem niech będzie sposób przedstawienia hierarchii działów i poddziałów w formie drzewa katalogów. Dla grupy odbiorców posiadających komputery PC z zainstalowanym systemem Windows, taka forma jest oczywista i wyjątkowo czytelna.

Ocena 2.66/5 (53.24%) (589 głosów)

Komentarze:


  • Dodał: wbmst data: 2009-09-07
    nic odkrywczego
  • pomocne
    Dodał: Ihm data: 2009-09-09
    Nic odkrywczego to fakt, ale pomocne jak ktoś chce sobie przypomnieć. Co gdzie i jak. :)
  • pomocne
    Dodał: ja cuś data: 2009-09-12
    witam. własnie przygotowuję gruntowną modernizację swojego firmowego serwisu. Jeśli możecie podajcie adres idealnej strony firmowej . Chętnie popatrzę
  • raczej podsumowanie
    Dodał: abc data: 2009-09-24
    podsumowanie rzeczy oczywistych
  • cóż
    Dodał: Gość data: 2009-10-13
    Menu boczne, po lewej stronie witryny - najczęściej (słowo najczęściej powinno wzbudzać natychmiast negatywne odczucia u webdesingera czy grafika)... Po to stosuje się jakieś tworzące się kanony żeby łatwiej internałtom było nawigować n astronie. Jka sie robi odjechanna stronę odjechanego grafika to sie robi chocki klocki ale jak robie stronę firmową klienta któremu zależy na jak największej konwersji to robię menu takie jakie ludzie najczęściej spotykają w internecie, ba łatwiej im wtedy nawigować na stronie... a takie strony to 90% mojej roboty... przepraszam 99%. Tak więc istnieje tylko jeden układ. Menu górne (ogólne) i menu po lewej stronie (rozwinięcie wyboru dokonanego po kliknięciu pozycji menu górnego).
    To co ważne a nie zostało powiedziane to menu nie powinno być (jeśli nie jest to niezbędne) rozwijane a szczególnie nie powinno być rozwijane w bok. Na stronę trzeba patrzeć od strony użytkowania nie dewelopera. Moja mama nigdy nie grała w gry komputerowe i nie radzi sobie z rozwijanymi menu więc wielu ludzi w jej wieku sobie też z tym nie poradzi - więc nie wolno ich stosować.
  • kółko
    Dodał: Marian data: 2009-11-16
    Dziś każda prawie mysz komputerowa ma kółko do przewijania i prawie wcale nie trzeba używać bocznego paska więc argument za menu prawym odpada. Osobiście bardzo nie lubię belki poziomej, a już szczególnie gdy jest kilkupoziomowa i sama się przestawia podsuwając mi swą zawartość. Wtedy łatwo traci się orientację który poziom się przeglądało. Menu z lewej strony jest intuicyjne. Najlepsze w/g mnie jest rozwijane w dół, ale pod warunkiem, że kolejne poziomy są zaznaczone innym kolorem lub odcieniem, by łatwo było widać gdzie się obecnie znajdujemy. Menu z jednej czy z drugiej strony rozwijane w bok, a także belka rozwijalna w dół zasłaniają, (co prawda tylko na moment rozwijania,) ale zawsze - główne okno strony, co je w moim odczuciu dyskwalifikuje zupełnie.
  • kombinacje
    Dodał: maya data: 2010-10-07
    A co myślicie na temat menu kombinowanego- poziome na górze i po wejściu na podstronę pojawia się boczne z lewej?
  • przyzwyczajenia
    Dodał: Gość data: 2011-08-30
    Odruchowo klient/obserwator zaczyna przeglądanie witryny od lewej strony do prawej, zgodnie z ruchem gałek ocznych przy czytaniu, czytamy od lewej do prawej strony teksty, stąd ta standaryzacja


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.