Metody stosowania nawigacji zakładkowej

piątek, 03 10 2008 | Kategoria: Dobre praktyki

Zakładki to bardzo przydatny mechanizm nawigacyjny. Mądrze wykorzystane mogą znacznie zwiększyć użyteczność serwisu. Wykorzystywane nieprawidłowo i niechlujnie – mogą jedynie pogłębić brak zrozumienia strony wśród użytkowników.

Najczęściej używanym przykładem działania zakładek jest Amazon:

Fragment archiwalnej wersji serwisu Amazon.com ukazujący zakładki nawigacyjne

Powyższy zrzut ekranu pokazu wersję strony z roku 2000. Wzorując się na powyższym przykładzie możemy wymienić kilka elementów składających się na ten sposób budowy zakładek. Sprawiają one, że zakładki wyglądają intuicyjnie i działają efektywnie:

  • Użytkownik zawsze widzi w której zakładce aktualnie się znajduje.
  • Aktywna zakładka wyraźnie odróżnia się od pozostałych.
  • Zakładki nieaktywne sprawiają wrażenie “schowanych” czy też może “dezaktywowanych”.
  • Aktywna zakładka sprawia wrażenie wysuniętej do przodu dzięki wyraźnemu połączeniu z elementem poniżej.

Zakładkami możemy się posługiwać w różnych miejscach strony. Na przykład Agito.pl używa ich na stronie produktu, aby uporządkować często niemałą liczbę informacji:

Ilustracja przedstawiająca zakładki na stronie produktu w sklepie Agito.pl

Zakładki można dodatkowo wzbogacić, tak jak zrobiono to w sklepie Opony.pl dodając do tekstu obrazki:

Ilustracja przedstawiająca zakładki z dodatkowymi obrazkami w sklepie Opony.pl

Nawigacja zakładkowa ma oczywiście ograniczenia. Gdy liczba elementów rośnie, może zaistnieć potrzeba zastosowania innych mechanizmów. Dobry przykład to znów Amazon, który na tyle szeroko powiększył swoją ofertę, że musiał zrezygnować z zakładek. W pewnym momencie znajdowały się one – jeśli dobrze pamiętam – aż w trzech rzędach. To miało już mało wspólnego z pierwotną ideą, dlatego też zmiany w sklepie były potrzebne. Według mnie nie były one do końca udane, a niektóre sklepy niepotrzebnie je naśladują, ale to już inna historia :)

Podsumowując trzeba podkreślić, że zakładki mogą znacznie uprościć nawigacje, ale także ją skomplikować (na co przykłady także postaram się niedługo przedstawić). Warto ich używać z głową. Zamiast wymyślać koło od nowa warto spojrzeć na tych, którzy już z sukcesem zastosowali zakładki.

Tagi: , , , , ,

Podobne artykuły:

Komentarze (4)

{o}, 4 10 2008, 13:54

Jakob Nielsen upiera się od lat, że jedynym słusznym zastosowaniem zakładek jest taka sytuacja, jak właśnie w agito – pokazywanie tego samego w różnych aspektach, zaś zastosowanie jak w amazon “jest złe”.

Bartłomiej Dymecki, 4 10 2008, 15:31

Tak, Nielsen pisze o tym chociażby tutaj http://www.useit.com/alertbox/tabs.html Jednak raczej się z nim nie zgadzam. Nie widzę uzasadnienia dla wniosku, że jest to jedyne dobre zastosowanie zakładek.

Wojciech Bogacz, 6 10 2008, 13:06

Osobiście gdybym budował grafikę dla sklepów od początku, to chyba faktycznie zakładaki okazałyby się dobrym rozwiązaniem – głównych kategorii jest poniżej 10, więc nie byłoby problemu.

Wygląda to też estetycznie i chyba zaraz zaadoptuję to do jednej niewielkiej strony, którą właśnie tworzę. Wprawdzie nie będą to zakładki, ale chodzi o to, żeby wyróżnić na której podstronie aktualnie się znajdujemy.

Tworzenie makiet przy użyciu Pencila | Dymecki.pl, 17 10 2008, 18:55

[...] kształtów pozwalających na szybkie symulowanie nawigacji zakładkowej czy [...]

Dodaj komentarz