Zakładki (zwane też tabami lub kartami) to dość newralgiczny element stron internetowych. Każdy interpretuje go po swojemu. Często są nam wciskane, choć tak naprawdę kontekst nakazuje użycie czegoś zupełnie innego. Przede wszystkim jednak zakładki wkurzają mnie dlatego, że nigdy do końca nie wiem, jak się zachowają.
javascript: void();
Widziałem w swoim życiu wiele kombinacji. Raz treść ładowana była AJAXem bez żadnego komunikatu, drugi raz pojawiał się pasek postępu. Czasem zakładki otwierały się natychmiast, choć byłem pewien, że sobie poczekam (wszakże na stronie, z której przyszedłem, wszystko odbywało się przez zapytania asynchroniczne). Często też jestem świadkiem sytuacji, że zostaję przekierowany na inną stronę, mimo że zakładka sprawiała wrażenie dynamicznej. O niedostępnych tabach nie wspomnę – mało kto zwraca uwagę, że w przypadku wyłączonego JavaScriptu bądź uruchomienia zakładki w nowym oknie powinienem zostać przeniesiony do strony, która pokaże mi mniej więcej to, o czym była mowa w etykiecie karty. Niestety, nadal pokutuje (nie)słynne javascript:void – przykład pierwszy z brzegu – gry-online.pl:
A to Polska właśnie
Najlepiej przykład wkurzających zakładek prezentują polskie, czołowe portale. Zacznijmy od Onetu (używając tzw. skórki eleganckiej).
Po pierwsze, link więcej powoduje przeładowanie strony, mimo że wygląda on jak pozostałe zakładki. Po drugie, kontrast między zakładką a treścią jest tak mały, że można ulec dezorientacji. Tym bardziej, że treść jest dość długa i znacznie wykracza poza widzialny obszar monitora (1280×800). Nie wspomnę też o tym, że zakładki ładowane są AJAXem, używając bardzo mało przejrzystego komunikatu:
Na szczęście bez problemów mogłem otworzyć daną zakładkę w nowym oknie przeglądarki.
Na Onecie jesteśmy zaskakiwani niejeden raz. Trochę niżej widnieje zupełnie inny, horyzontalny dodajmy, system zakładkowy.
Oprócz braku konsekwencji, wyróżnienie aktywnego elementu jest dość mało sugestywne (o ile kolor pomarańczowy załatwia sprawę dość skutecznie, tak jasne obramowanie i wszędobylski biały niwelują pozytywne uczucie).
Na Wirtualnej Polsce nie lepiej. Powtórzony błąd z linkiem więcej. W dodatku bliskość dwóch systemów zakładek obok siebie sprawia wrażenie niezłego miszmaszu. Nie lubię powoływać się, jak już pisałem, na gadające głowy, ale jest to podręcznikowy przykład na tezy Jacoba Nielsena (które zresztą przetłumaczyłem poniżej). Na WP spróbowano też pobić rekord świata w upchnięciu jak największej treści na jak najmniejszym obszarze. Udało się to nieźle.
Poza tym, znowu zostałem zmylony brakiem AJAXa – tym razem interesująca mnie prognoza pogody została załadowana natychmiast. Zdziwiłem się także tym, że pod tabem reprezentującym pogodę nie ma oferty żarówek – tutejsza ikonka za nic nie przypomina słońca, o co, jak mniemam po głębszym zastanowieniu, zapewne chodziło autorom.
Nie lepsze są zakładki wyszukiwarek – tym razem aktywny element został wyróżniony pogrubieniem, co w połączeniu z klaustrofobiczną wręcz ilością miejsca tworzy duży chaos.
Z dziennikarskiego obowiązku wszedłem też na Interię i Gazetę.pl. W pierwszym przypadku było prawie idealnie – zachowana konsekwencja w używaniu zakładek, spójna kolorystyka i layout oraz natychmiastowe ładowanie bez AJAXa. Razić może jedynie dość niski kontrast między aktywnymi i nieaktywnymi zakładkami.
Na Gazecie jak to na Gazecie – o ile kontrast pomiędzy głównymi zakładkami jest stosunkowo mały, tak sytuację ratują duże odstępy pomiędzy nimi.
Dalej jest już mniej przejrzyście i dostępnie (najlepiej to widac w kontekście całego portalu, a nie konkretnego wycinka obrazu):
Paradoksalnie, najbardziej dostępnymi zakładkami na stronie są te:
Choć urodą i przestrzenią nie grzeszą.
Podsumowując – zakładki są skuteczne w realizacji założeń (upchanie treści w danym obszarze, czego wręcz developerzy nadużywają), jednak dobrze wykonanych tabów ze świecą szukać. Z reguły są one wręcz rozmyte z innymi elementami strony, nieprzewidywalne, mają mały kontrast, a zamieszczonej w nich treści jest o wiele za dużo.
Trzynaście przykazań
Swego czasu Jacob Nielsen popełnił 13 wskazówek co do budowania zakładek. Pozwolę sobie je przytoczyć:
- Używaj zakładek do rozróżnienia widoków tyczących się tego samego kontekstu (nie do nawigacji pomiędzy zupełnie innymi obszarami).
- Zakładki powinny logicznie dzielić treść tak, aby użytkownik z łatwością mógł się domyślić, co znajdzie pod każdą z nich.
- Zazwyczaj użytkownicy nie chcą widzieć jednocześnie treści z wielu zakładek. Jeśli ktoś chce porównać dane, przełącza się pomiędzy kartami, zapamiętując treść jednej z nich, by potem dopasować ją do danych z aktywnej zakładki.
- Zakładki nie powinny być od siebie tematycznie oderwane.
- Podświetlanie aktywnej zakładki poprzez jej rozjaśnienie jest ok, jeśli zakładek jest poniżej czterech (dla tylko dwóch tabów ciężko jest natomiast wtedy stwierdzić, która jest aktywna). Dodatkowo, możesz wyróżnić aktywną kartę poprzez zmianę jej wielkości, pogrubienie, ikonkę. Możesz ją również zaprojektować tak, by sprawiała wrażenie mieszczącej przed innymi zakładkami.
- Niewybrane zakładki powinny być czytelne i dobrze widoczne, przypominając użytkownikowi, że ma do wyboru także inne opcje. Jeśli nieaktywne karty są za bardzo “zlane” z tłem, pozostaje ryzyko, że użytkownik nigdy ich nie dojrzy, tym samym pozbawiając sie odkrycia dodatkowych opcji na Twojej stronie.
- Aktywna zakładka powinna być ściśle połączona z panelem jej contentu, sprawiając wrażenie przyklejonej. Podkreśla to, który box jest pokazywany i wskazuje użytkownikowi, która zakładka jest aktywna.
Co więcej, ten sam kolor tła dla boxu i zakładki do niego prowadzącej wzmacnia także relację między nimi i wymusza używanie różnych kolorów tła dla nieaktywnych i aktywnych zakładek.
- Etykiety (labelki) powinny być krótkie i jasne. Ich długość powinna przeważnie wynosić od jednego do dwóch wyrazów. Krótkie nagłówki są bardziej widoczne i wpadają po prostu w oko. Jeśli potrzebujesz dłuższych jest to znak, że system zakładek to nie do końca to, czego potrzebujesz.
- Każde słowo etykiety powinno zaczynać się od dużej litery np. Biało-Czerwony Orzeł (choć biorąc pod uwagę specyfikę języka polskiego nie jest to do końca trafne założenie- przyp. ferrante). Unikaj kapitałek, które są mniej czytelne.
- Umieszczaj zakładki tylko w jednym rzędzie. Wielorzędowe zakładki wymagają “skakania” po elementach interfejsu, wprowadzając użytkownika w dezorientację. Jeśli masz aż tyle zakładek, że nie mieszczą się one w jednym rzędzie, pomyśl nad uproszczeniem designu.
- Zakładki powinny być nad boxem, nigdy pod lub z boku, ponieważ użytkownik może je przeoczyć.
- Powinno być oczywiste, jaki obszar strony jest objęty systemem zakładek.
- Pomiędzy kliknięciem w zakładkę a pojawieniem się stosownej treści nie powinno być dłuższych odstępów niż jedna sekunda (idealny czas to poniżej < 0,1s). W przeciwnym razie użytkownik nie czuje naturalnej zależności między jego ruchami myszką, a zmianą wyglądu poszczególnych tabów i paneli z treścią.
Jak widać, Jacoba Nielsena opłaca się czytać. Co więcej, ponoć większość go czyta (sic!). Szkoda jednak, że nikt przy tym nie myśli. Sam mam na swoim blogu zakładki i zaręczam Wam, to była zła decyzja. Na szczęście już wkrótce nadarzy się okazja, by to zmienić.
Komentarze
widzę, że nie jestem jedynym, który znajduje mankamenty w polskich portalach …
Nielsen swoją drogą a art directorzy, udziałowcy, dyrektorzy, PMy, prezesi itp. swoją.
Ci co czytają Nielsena zazwyczaj chcą dobrze, a wychodzi jak zawsze.
Generalnie sa 3 podejscia do zakladek:
1) caly content zakladek jest juz w markupie – i uzywamy JS to dynamicznego przelaczania – w takim przypadku bardzo latwo zapewnic dostepnosc z wylaczonym JSem
2) mozna tez caly markup zakladek stworzyc JSem i zaciagac do nich tresc AJAXowo – wtedy uzytkownik z wylaczonym JSem w ogole nie zobaczy zakladek
3) najlepsza opcja – AJAXowe zakladki, ktore wymagaja wspolpracy z back-endem (jakims CMSem) – wtedy gdy uzytkownik ma wylaczony JS strona jest przeladowywana i CMS dynamicznie pokazuje odpowiednia zakladke w zaleznosci np od parametru w URLu (takie rozwiazanie stosuje na swojej stronie np. mBank)
Tyle się wałkowało o zasadniczej (sic!) różnicy między kartą i zakładką, a ludzie nadal nie rozróżniają tak oczywistych pojęć.
To jest jezyk polski misiu, a jak wiemy z podstawowki jezyk to zywy twor. Dlatego tez dodalem we wstepie, ze zakladki sa zwane niekiedy kartami i potem tej nomenklatury czasem uzywalem.
Pozdrawiam
@ferrante
Tylko że jest chyba odwrotnie bo karty są nazywane zakładkami.
BTW nie wiem skąd to się wzięło przecież wszystkie przeglądarki stosują to tłumaczenie (tab=karty, bookmark=zakładki), zresztą jakby się zastanowić to opisywane tu rozwiązania nijak nie kojarzą mi się z zakładkami (książkowymi). Może jakby się uprzeć to z wyglądu przypomina, ale nie ze sposobu funkcjonowania.
Wiesz, dla zwyklego uzytkownika to jest bez znaczenia – jesli cos funkcjonuje podobnie, a rozni sie detalami niezauwazalnymi dla szarego Kowalskiego, to czy beda to karty czy zakladki, jeden pies. Imo zbytnio przywiazujemy sie do anglojezycznych terminow niekiedy.
@ferrante: Przecież chodzi o polski termin. Popełniłeś błąd już w pierwszym zdaniu i konsekwentnie tkwiłeś w błędzie, wielokrotnie go powtarzając.
W dodatku uparcie podtrzymujesz swój błąd, argumentując go jakimiś misiami… Pomijając już to, że na temat różnicy między „zakładką” a „kartą” można by napisać epopeję narodową (a nie widzę w tym sensu), to zapoznaj się chociaż z terminologią stosowaną w twojej przeglądarce internetowej.
Dla zwykłego użytkownika wiele rzeczy jest bez znaczenia. Tylko że to właśnie nie ma żadnego znaczenia, i tym bardziej nie jest usprawiedliwieniem.
Dobrze rozumiem clue sprawy, nadal twierdze, ze to przesadzony pedantyzm i czepianie sie szczegolow. 99% userow nazwie to zakładką i naprawde nie mam zamiaru im tlumaczyc, dlaczego to nie jest zakladka w sensie stricte. Rozumiem, co chcesz mi przekazac, jednak jesli chcesz pisac epopeje na temat roznic moge napisac rowniez epopeje na temat podobienstw i bedziemy w punkcie wyjscia.
Sorry, że nawiążę jeszcze do terminologii, ale nie sądzę, aby “karciani moralizatorzy” mieli tutaj monopol na rację.
1. przeglądarkowa “karta” (tab) != “zakładki” (też taby) wspomniane w notce
Wydaje mi się, że polscy lokalizatorzy przeglądarek przetłumaczyli “tab” właśnie na “karta”, ponieważ chcieli bardziej skupić uwagę użytkownika na tym co jest pod “zakładką”, a w kontekście wcześniejszego zarezerwowania słowa “zakładka” dla ulubionych linków, musieli się na coś zdecydować. Na pewno jednak nie stawiałbym znaku równości pomiędzy elementami wspomnianymi w notce (których killer ficzerem są taby na górze, a że te taby odkrywają “karty” – jest już tutaj mniej istotne) a tym co polskie przeglądarki nazywają “kartą” (czyli “nową przeglądarka” w przeglądarce, do której możemy się odnieść za pomocą taba). Akurat “karta” w kontekście przeglądarki całkiem pasuje, w przypadku podmiotu notki – już, IMHO, nie.
2. I słusznie!, ww. elementy są przeniesieniem interfejsu papierowego folderu (nie książki), który na górze ma “taby”. Nie jest to przeniesienie interfejsu zakładki (która nie ma sprecyzowanego wyglądu) z książki, tylko właśnie konkretnie wyglądających odnośników znajdujących się na górze zbioru “kart”.
3. W języku polskim zapewne nie ma dobrego odpowiednika “taba”, dlatego rozciągnięto znacznie “zakładki” również na markery z papierowych folderów, które przenoszą do “kart”. Jest to na tyle naturalne, że większość użytkowników odruchowo nazwie to “zakładką”.
4. Nie jestem też pewien czy “zakładka” to dobre określenie na ulubione linki. W książce nie oznaczamy ciekawych stron gwiazdkami. Internetowy link jest chyba jednak zbyt dużą abstrakcją dla spójnego tworu jakim jest książki. W rzeczywistym świecie nie da się zastosować poręcznych odnośników zebranych w jednym miejscu, które prowadziły by błyskawicznie do stron książek rozsianych po całym świecie. Jednakże to i tak nie ma znaczenia dla głównej tezy moje wypowiedzi, gdy przemyślimy sobie pozostałe wspomniane punkty.
Nie do końca rozumiem co Ci się, ferrante, nie podoba w Twoich kartach. Są czytelne, aktywny element jest oczywisty, nie sprawiają wrażenia, że content miałby przełączyć się za pomocą JSa, bo są dla całej dużej strony (raczej przyzwyczajeni jesteśmy, że AJAX upychany jest w mniejsze widoki).
Tako samo nie rozumiem obiekcji co do niektórych przykładów, które podałeś. Moim zdaniem wszystkie te przykłady są do zaakceptowania (najgorzej chyba sympatia wypada i to o grach).
A ogólnie co do przełączania AJAXem (jeśli już musimy i warunki na to pozwalają – mam tu na myśli tę wielkość contentu), to zgadzam się z kminkiem w sprawie trzeciego punktu. Ja zawsze tak robię, żeby linki miały działający adres w href i np. za pomocą takiego kodu obsługuję przełączanie:
$(".tabs a").click(function () {$(".tabs .content").load(
$(this).attr('href') + ' .tabs .content'
);
});
Można też bez tego selektora w load, ale wtedy tak jak pisał kminek – trzeba to obsłużyć w CMSie.
EDIT:
>Tako samo nie rozumiem obiekcji co do niektórych przykładów, które podałeś. Moim zdaniem wszystkie te przykłady są do zaakceptowania (najgorzej chyba sympatia wypada i to o grach).
Miałem na myśli wygląd tych rozwiązań, nie działanie, jakby co :).