To jak, widzimy się na Front-Trends 2010?

Nie jeździsz na konferencje – tracisz!

Przede wszystkim, zastałem w stolicy Wielkopolski mnóstwo nieprzypadowych gości. Byli tam managerowie, programiści, designerzy, blogerzy, internetowi celebryci, Czytelnicy tego bloga, uczestnicy moich szkoleń i masa innych specjalistów, którzy na co dzień tworzą nasz polski internet. Motywowały zasłyszane przeze mnie kuluarowe rozmowy, zainspirowane zapewne obejrzanymi wcześniej wystąpieniami. Wiesz, zamiast trzech buttonów dajemy jeden, a to to w ogóle porażka, nie wiem czemu tak zrobiliśmy… – spierał się siedzący za mną zespół developerów. Tym ludziom po prostu zależało, a strzelam, że takich dyskusji było tego dnia więcej.

Powiedzmy sobie głośno, jeśli jeszcze tego nie wiesz – nie bywasz na konferencjach – przegrywasz. Przegrywasz wiedzę, kontakty biznesowe, potencjalnie wartościowych, nowych znajomych. A w ogólnym rozrachunku – pieniądze, które mógłbyś zdobyć dzięki powyższym. Na sali kręciły się osoby, związane z takimi markami jak Microsoft, Opera, Nokia, Roche, czy Allegro. Pytanie “szukasz pracy?” zdecydowanie nie było tematem tabu.

Przeglądarka Twoim domem

Następna dekada to czas nowoczesnego, zgodnego ze standardami front-endu. JavaScript jest już dostępny na większości zaawansowanych urządzeń mobilnych, świat podbija niesamowity HTML5 (i krążące wokół niego nowinki), a Flash umiera. W dużych korporacjach “J2ME” zaczyna być ustawiany w parze z takimi słowami jak skansen czy muzeum, a zaawansowane, webowe aplikacje sprawiają wrażenie software’u desktopowego – są szybkie, lekkie, wygodne i działają w przeglądarce. Jest rzeczą niezwykle ważną, abyśmy nie przegapili pewnego skoku jakościowo – technologicznego, który niedługo się dokona. Tym bardziej cieszy fakt, że na horyzoncie pojawiły się wydarzenia, dzięki którym możemy poczuć się jak np. Brytyjczycy, którzy mają u siebie co roku kilkanaście (o ile nie więcej) takich konferencji.

SparkUp – jestem na tak

Nie chciałbym oceniać poszczególnych elementów konferencji SparkUp. Jak na każdej, były rzeczy, które należałoby poprawić, jak i te, za które należą się oklaski. Ogólne wrażenie było bardzo dobre. Nie będzie więc tutaj szyderczej i bratobójczej krytyki, którą z pewnością wielu blogerów by podniosło. Zresztą, najlepiej konferencję ocenią/ocenili jej uczestnicy na Blipie czy Twitterze. Jest to wręcz idealny kanał komunikacji dla takich eventów, czego kiedyś nie doceniałem.

Miałem też okazję porozmawiać dłuższą chwilę z jednym z organizatorów – Piotrem Czekałą. Wielkie gratulacje za chęci i sprawienie, że konferencja się odbyła! Miejcie świadomość, że SparkUp organizują sympatyczni ludzie z głową na karku. Przy okazji dowiedzieliśmy się kilku ciekawych rzeczy, co z pewnością przemyślimy w kontekście Front Trends.

Front Trends

No właśnie, Front Trends. Pojawiło się ostatnio mnóstwo pytań, co do konferencji, która odbędzie się w Warszawie 21 i 22 października. Wiedzcie, że pracujemy bardzo ciężko nad pełną wersją strony internetowej, a także nad cenami i ścieżkami tematycznymi. Nie chcę składać żadnych obietnic czasowych, ponieważ mamy zamiar zaoferować Wam jak najlepszą konferencję i dbamy o dopracowanie każdego szczegółu. Zbliża się najwyższy moment na podanie wszystkich, wiążących informacji, więc proszę o odrobinę cierpliwości!

Konferencji czas

Muszę przyznać, że jestem wielkim optymistą, jeśli chodzi o przyszłość konferencyjną w Polsce. Po tym, co usłyszałem i zobaczyłem we wtorek, jestem pewien, że Polska pragnie takich wydarzeń. I będzie je miała, bo taki potencjał nie może zostać zmarnowany.

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