Pomiń łącza nawigacjiStrona główna > Kurs Usability > Budowa strony WWW > Projektowanie nawigacji

Projektowanie nawigacji - tomik99 2009-07-24 16:32:39

Omówię tutaj narzędzia służące nawigacji (menu, wyszukiwanie). Niezależnie zostaną omówione tematy związane z projektowaniem struktury serwisu (czyli co ma się w menu znaleźć). Połączenie struktury serwisu z narzędziami nawigacyjnymi pozwala użytkownikom poruszać się po serwisie WWW.

Pamiętaj, że celem użytkowników Twojego serwisu nie jest nawigowanie (przytaczając słowa Andrzeja Sienkiewicza). Ich celem jest wykonanie zadań, po które przyszli do serwisu. Nikt nie będzie słał listów z wyrazami szacunku za doskonale stworzony system nawigacji. Dobry system nawigacji to taki, o którym nikt z użytkowników nie musi myśleć.

Stała nawigacja

Stała nawigacja to zbiór elementów nawigacyjnych pojawiających się na wszystkich stronach serwisu. Są to najczęściej:

  • identyfikator strony,
  • łącze do strony startowej,
  • wyszukiwarka,
  • menu narzędziowe,
  • menu główne.

Stała nawigacja może być zmieniona bądź nieobecna na stronie głównej oraz na stronach skierowanych na wykonanie kluczowych akcji. Stałej nawigacji nie ma niekiedy na stronach składania zamówienia w sklepach internetowych (raczej w USA i raczej w okolicach kroku płatności) oraz na stronach kampanii reklamowych (landing page — omówię je dalej).

Menu narzędziowe

Zawiera od 3 do 7 elementów, które uznajemy za szczególnie przydatne. Zazwyczaj są to:

  • strona główna,
  • kontakt,
  • mapa serwisu.

Często występują tutaj także łącza takie jak:

  • Archiwum.
  • Wyloguj się.
  • Obsługa klienta.
  • Forum dyskusyjne.
  • Pliki do pobrania.
  • FAQ.
  • Pomoc.
  • Jak zacząć?
  • Dla mediów.
  • Polityka prywatności.
  • Rejestracja.
  • Wyszukiwarka.
  • Koszyk.
  • Zapisz się.
  • Adresy placówek.
  • Twoje konto.

Punkty startowe

Punkty startowe są elementami strony głównej, które prowadzą w głąb struktury serwisu. Dzięki temu użytkownikom łatwiej odnaleźć najczęściej poszukiwane elementy serwisu. Punkty startowe pokazują też, co na stronie można znaleźć i zrobić. Dzięki temu pozwalają na szybkie zapoznanie się z najważniejszymi elementami całego serwisu (rysunki 3.2 i 3.3).

Rysunek 3.2. Punkty startowe w serwisie www.ingbank.pl ułatwiają dostęp do opisu najważniejszych produktów banku. Źródło: www.ingbank.pl

Rysunek 3.3. W serwisie www.mbank.pl z 2006 roku punkty startowe nawet nazywają się Start. Źródło: www.mbank.pl

Punkty startowe szybko stały się obowiązkowym elementem większości serwisów WWW. Warto pamiętać o tym, że działają dobrze wtedy, gdy ich ilość jest rozsądna.

Jesteś tutaj

Element „jesteś tutaj” (rysunek 3.4) działa podobnie jak adekwatne oznaczenie na mapach rozstawionych przed szlakami turystycznymi czy na kampusach. Zdarza się, że oznaczenia tego brakuje na mapie, wtedy jej zrozumienie staje się dużo trudniejsze. Podobnie jest z nawigacją na WWW. Rysunek 3.5 i rysunek 3.6 przedstawiają problemy, na które należy zwrócić uwagę przy projektowaniu.

Rysunek 3.4. Bardzo dobrze wyróżniony element menu

Rysunek 3.5. Jest nieźle, ale lepiej byłoby wyróżnić tylko ostatni element. Źródło: http://orlen.pl

Rysunek 3.6. Mocno wyróżniony pierwszy poziom, ale zupełny brak wyróżnienia drugiego poziomu. Źródło: http://merlin.pl

Problemy z rozwijanym menu

Dla oszczędzenia miejsca często stosuje się menu rozwijane. Generuje to jednak sporo problemów i z tego powodu zalecam bardzo ostrożne używanie rozwijanych menu.

W menu rozwijanym przede wszystkim nie można obejrzeć zawartości całego menu przed wykonaniem akcji (wskazanie, kliknięcie). Zazwyczaj takie menu są trudne do przeglądania, zwłaszcza jeśli mają kilka poziomów (rysunek 3.7). Mniej zaawansowani użytkownicy często klikają elementy omyłkowo.

Rysunek 3.7. Autorzy tej witryny nawet wyszukiwarkę umieścili w rozwijanym menu. Źródło: http://software.xfx.net

Często występują też problemy techniczne związane z dostępnością takiego menu oraz choćby tym, że wyszukiwarka w przeglądarce (Ctrl+F) często nie przeszukuje treści zwiniętego menu.

Menu rozwijane doskonale sprawdzają się w listach, np. z wyborem kraju (rysunek 3.8 kontra rysunek 3.9).

Rysunek 3.8. Menu rozwijane pozwala na wygodny wybór kraju. Źródło: http://hp.com.pl

Rysunek 3.9. HP zmieniło niedawno przedstawiony wcześniej element wyboru języka na dość skomplikowane rozwijane menu. Obecne rozwiązanie jest dużo bardziej skomplikowane. W szczególności wymaga od internauty przeliterowania w myślach alfabetu, aby odnaleźć sekcję, w której znajduje się jego kraj. Źródło: http://hp.com

Niegdyś w sklepie internetowym na www.hp.pl zastosowano element nawigacyjny nieco podobny — ale znacznie gorszy od rozwijanego menu (rysunki 3.10 i 3.11). Aby obejrzeć całe menu promocji, należy nawigować strzałeczkami. Prawdopodobnie duża część użytkowników nawet nie zauważy, że strona oferuje nie 6 grup promocji (widocznych po załadowaniu serwisu), ale aż 13. Ponad połowa zawartości stron nie zostanie dobrze poznana z powodu źle skonstruowanego menu.

Rysunek 3.10. Strzałka przewijająca menu z promocjami jest słabo widoczna, a cały mechanizm jest bardzo nieintuicyjny. Źródło: http://sklep.hp.com.pl

Rysunek 3.11. Po kliknięciu strzałki menu Promocje pokazuje swoje następne składniki. Źródło: http://sklep.hp.com.pl

Ścieżka nawigacyjna

Wiele jest nazw na ten niepozorny element nazywany chyba jednak najczęściej ścieżką okruszków (rysunek 3.12). Element ten pokazuje aktualną pozycję i pozwala na cofanie się w strukturze serwisu. Ma pozytywny wpływ na zrozumienie struktury przez użytkownika.

Rysunek 3.12. Ścieżki nawigacyjne w bzwbk.pl oraz na About.com. Źródło: http://bzwbk.pl, http://about.com

Wydaje się, że najlepszym separatorem kolejnych poziomów jest znak „>”. Inne znaki („I”, „-”) wywołują u internautów skojarzenia z równoległymi opcjami menu. Aby jednoznacznie określić funkcję ścieżki okruszków, można użyć słowa „jesteś tutaj” na początku ścieżki.

Tagi

  • Nie dodano jeszcze żadnych tagów

  • Wyszukiwarka


    Tomasz Karwatka

    Tomasz Karwatka

    Optymalizacja sklepu

    Informacje o nowościach

    Nowe publikacje, case study i raporty.



    Partnerzy:

    • Ideacto
    • helion.pl
    • 7point
    • cary
    • biznes 2.0