Co wkurza mnie w zakładkach?

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:

gol-tabs

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).

onet-tabs

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:

onet-tabs2

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.

onet-tabs2

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.

wp-zakladki

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.

interia-tabs

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.

gazeta-tabs

Dalej jest już mniej przejrzyście i dostępnie (najlepiej to widac w kontekście całego portalu, a nie konkretnego wycinka obrazu):

gazeta-tabs2

Paradoksalnie, najbardziej dostępnymi zakładkami na stronie są te:

gazeta-tabs3

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ć:

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

1

widzę, że nie jestem jedynym, który znajduje mankamenty w polskich portalach …

2

Nielsen swoją drogą a art directorzy, udziałowcy, dyrektorzy, PMy, prezesi itp. swoją.
Ci co czytają Nielsena zazwyczaj chcą dobrze, a wychodzi jak zawsze.

3

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)

4

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ęć.

5

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

6

@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.

PACH
7

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.

8

@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.

9

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.

10

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.

zresztą jakby się zastanowić to opisywane tu rozwiązania nijak nie kojarzą mi się z zakładkami (książkowymi)

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.

11

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.

12

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 :).

13

Zresztą mamy XXI wiek i to użytkownik z założenia powinien decydować, czy dodać zakładkę, a którą usunąć [tak jak w przeglądarce]. Wtedy unikniemy czegoś takiego jak 20 zakładek pod logiem „+ więcej >>>” – toż takie moje zdanie na temat – sorry, że odgrzebuje.

Matikx
14

Bardzo dobry artykuł, zapiszę go sobię. Jak za jakiś czas będzie mi potrzbny to go łatwiej znajdę.

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>