Nie róbcie tego w domu!

Pomijam fakt, że wszystkie duże serwisy się nie walidują. To naprawdę mała wada w porównaniu z błędami funkcjonalnymi, które można na nich znaleźć. Przyjrzyjmy się sondom, na przykładzie których najwyraźniej widać, że autorzy gazety.pl, wp.pl i interii.pl powinni się udać do szkoły.

Otóż każdy średnio rozgarnięty webmaster wie, że jak się robi przyciski typu radio lub checkbox, należałoby zadbać, by użytkownik mógł kliknąć nie tylko w małe kółeczko, ale także w opis przycisku. W html’u robi się to tak: <input id=”pozycja” name=”pozycja” value=”wartosc”/> <label for=”pozycja”>opis pozycji</label>

Jak to rozwiązują największe portale? Kreatywnie lub mniej kreatywnie. Gazeta.pl i Interia mniej kreatywnie zapominają o tym, że należałoby ułatwić użytkownikom życie.

Wirtualna Polska jest bardziej kreatywna. Z opisów radio-przycisków robi linki (to jest trochę mylące), a kod w zasadzie równoważny mojemu sprzed dwóch akapitów w ich wykonaniu wygląda tak: <input type=”radio” value=”3″ name=”POLL[VoteForAnswer]”>&nbsp;<a class=”Poll_answer” href=”javascript:void null;” onclick=”javascript:document. Poll_form.elements[’POLL[VoteForAnswer]’][2].checked= true;”>Jeszcze nie wiem</a>

Tak to jest, jeśli ktoś prześpi lekcje o HTMLu i zabierze się od razu za JavaScript. Niech im Bóg przebaczy, bo ja im tego nie daruję! ;)

Znam wielu ludzi, którzy nie są szczególnie biegli w korzystaniu z internetu. Bardzo często ich podejście jest skrajnie różne od tego, co nazwalibyśmy rozsądnym zachowaniem internauty. Mimo to jest skuteczne!

Pewien człowiek biega po stronach internetowych i bardzo często klika w reklamy kontekstowe. Co więcej — doskonale rozróżnia, czy jest to reklama Google, AdKontekst czy tylko coś, co reklamę kontekstową udaje.

Zapytałem go, czemu tak robi. Odpowiedź, którą uzyskałem, cytuję z pamięci — najwierniej jak potrafię:

Nie wchodzę na strony które są pierwsze w wyszukiwarkach, bo tam są same śmieci. Nie przeglądam dalej, bo tam też nic nie ma. A w tych ‘reklamach’ zawsze wszystko jest na temat i dotyczy tych rzeczy, które lubię.

Dodajmy jeszcze, że opisywany człowiek wykorzystuje internet głównie, by znaleźć firmy sprzedające pewne produkty. Te produkty kupuje, konstruuje z nich inne rzeczy i sprzedaje dalej.

Tekst o nieco zawyżonej złożoności. (No to się społeczeństwo przekonało.)

Jakob Nielsen w serii alerboksów poświęcił trochę miejsca na informacje o pisaniu. Jego odkrycia ograniczają się jednak tylko do kilku prostych ‘wizualnych’ zasad:

• teksty powinny być krótke i na temat
• precyzyjne i bez marketingowego żargonu
• najważniejsze informacje powinny być na początku
• dużo powinno być wyróżnień i wypunktowań

Jego prace nie zawierają jednak informacji dotyczących samego pisania. Na przykład nie odpowiadają na pytanie “Jak zmierzyć, czy tekst będzie zrozumiały dla odbiorcy?”

Kilka prostych miar, z którymi ja się spotkałem i które działają zupełnie przyzwoicie to:

• Flesch-Kincaid Readability Test
• Indeks Gunninga-Foga
• Indeks SMOG

W dużym skrócie polegają one na obliczeniu kilku prostych statystycznych własności tekstu: ile tekst ma trudnych słów (zazwyczaj za słowo trudne przyjmuje się takie, które ma więcej jak 3 sylaby, w języku Polskim trzebaby to chyba zwiększyć do 4-5), ile ma zdań, ile jest słów w przeciętnym zdaniu, etc. Potem z tego konstruuje się końcową miarę.

Umiejętności polityków

Ciekawym doświadczeniem jest testowanie stron polityków pod kątem złożoności zamieszczonych tam tekstów. Mistrzostwo osiągnęła Samoobrona, zamieszczając przemówienia Andrzeja Leppera. Kroczek dalej SLD, które co prawda pisze dużo prostszym językiem (sic!) za to wypracowania są okropicznie długie.

Niedaleko stanął PiS, który w dziale nowości publikuje odezwy do narodu na półtora ekranu. Platforma jest trochę nierówna, bo czasem pisza zwięźle prosto i na temat, a czasem wrzucają zdania na trzy-czwarte akapitu.

Zaś najlepiej potrzeby internatutów rozumie Liga Polskich Rodzin! To naprawdę mnie zaskoczyło — ładnie podkreślone teksty, zazwyczaj niedługie, na temat. Zawartość merytoryczną przemilczę.

Spoza parlamentu

Z dwojga godnych uwagi partii pozaparlamentarnych lepiej wypada SdPL — zdarza im się coś podkreślić. Jednak za zdania typu

Ostrzegamy, że ograniczenie wysokości dodatkowych środków do 4 mld w 2007 r. i przeznaczenie tej kwoty w całości na podwyżki płac albo zmusi szpitale i przychodnie do ostrej redukcji pozostałych kosztów i w efekcie do ograniczenia liczby udzielanych usług i wydłużenia kolejek albo doprowadzi do ponownego lawinowego zadłużania się szpitali, a w dłuższej perspektywie do zapaści całego systemu.

powinno sie w internecie karać grzywną o równowartości abonamentu internetowego wszystkich, którzy stronę odwiedzili.

Podobnie powinno oberwać się demokratom.pl.

Partia Demokratyczna protestuje przeciwko zamierzeniom rządu zmierzającym do likwidacji ryczałtowych kosztów uzyskania przychodów, co w praktyce oznacza znaczącą podwyżkę podatków płaconych przez twórców, artystów, wolne zawody, naukowców, wynalazców, wszystkie osoby wykonujące prace zlecone.

Takich zdań w newsach umieszczać najzwyczajniej w świecie nie wypada.

Symulacja tritanopii — rzadkiej odmiany daltonizmu utrudniającej rozróżnianie niebieskiego i zielonego.

Wiemy, że linki powinny łatwe do zauważenia. Człowiek powinien wiedzieć, w co może kliknąć, a w co nie. Najprostszym sposobem na zmylenie internauty jest podkreślenie tekstu, który nie jest linkiem lub pokolorowanie jakiegoś fragmentu tekstu na niebiesko.

Rzecz, która zaczęła mnie ostatnio zastanawiać, to to, jak odbierają kolory linków osoby dotknięte daltonizmem. Najczęstszy przypadek ‘kolorystycznej ślepoty’ polega na nierozróżnianiu koloru czerwonego i zielonego. Takim ludziom nic złego w internecie się nie stanie — nie przeoczą niebieskiego linku, nawet jeśli nie będzie podkreślony.

Dużo rzadszym przypadkiem, który można spotkać, jest tritanopia polegająca m.in. na nierozróżnianiu zielonego i niebieskiego. Dowiedziałem się o tym przez przypadek, projektując pewną stronę i rutynowo sprawdzając jej wygląd Vischeckiem.

Jakoś tak się składało, że nie użyłem dotychczas na stronach internetowych zielonego tekstu — tym razem jednak taki tekst stał się nagłówkiem i pech chciał, że dla osób dotkniętych tritanopią wyglądał identycznie jak niebieskie pogrubione menu. Dowiedziałem się tego dzięki Vischeckowi.

Na stronie Vischecka było napisane, że jest to bardzo rzadki przypadek. Skoro bardzo rzadki, przyjąłem że pewnie będzie to mniej niż 0.1%, czyli w przypadku tej strony ledwie parę osób — dadzą sobie radę.

Dopiero później zacząłem się zastanawiać, ile tak naprawdę ludzi ma tritanopię. Jeśli wierzyć Microsoftowi, na tritanopię cierpi około 0.001% mężczyzn. Wikipedia twierdzi, że jest to równie popularne schorzenie u kobiet jak i u mężczyzn. Przyjmijmy więc, że w sumie 0.001% populacji na to cierpi.

W przypadku mojej strony daje to mniej niż 1 użytkownika dziennie. W przypadku Google — 300 tys. ludzi, czyli zupełnie niebanalna grupa potencjalnych odbiorców reklam. To już jest jakiś argument za zmianą!

Ćwiczenie domowe: Jeśli niebieski jest domyślnym kolorem linków, to jaki kolor powinien mieć wyróżniony tekst, nie będący linkiem, rozpoznawalny i odróżnialny od niebieskiego dla trzech najważniejszych rodzajów daltonizmu (deuteranopii, protanopii i tritanopii)?

Wszyscy wiemy, że przykazań jest 10. Ale to nie do końca prawda, bo do tych 10 przykazań dopisano jeszcze mnóstwo przykazań jedenastych. Komukolwiek nie wpadnie do łba jakieś mądrzejsze powiedzonko, od razu robi z tego jedenaste przykazanie. Moje jedenaste przykazanie na dziś brzmi nie nazywaj strony web 2.0, jeśli nie wiesz, co znaczy ten termin.

Zgodnie z nim, żadna strona nie powinna się określać mianem serwisu web 2.0, bo definicji tego terminu tak na dobrą sprawę nikt nie zna. Ciekawie się złożyło, że wszyscy wielcy przestrzegają mojego przykazania i się nie chwalą. Widział ktoś napis web 2.0 compatible na stronach amazon.com? Google? Może del.icio.us? Nie? A może na digg.com? No to jeszcze spróbujcie na flickr.com. Oj, przykro mi bardzo - nawet tam web2.0 nie ma w disclaimerze.

Nikt pewnie nie podważy webdwazerowości owych znanych i poważanych serwisów. Niestety poza tymi wielkimi zapanował pewien niezrozumiały fetysz nazwy. Otóż przykładowy serwis-nieporozumienie web2

• tło z gradientem
• wielki napis web2.0
• wersja beta
• gigantyczna reklama i krzyczenie o swoich rewelacyjnych zaletach

Tak, to było o OLO.

Przypomina mi to fajny post Building your very own web 2.0 layout. Tak, web2.0 to gradienty, social networking, ruby on rails i jeszcze mnóstwo innych bajerów. Kurcze pieczone nadziewane truflami i z chrzanem! To nie o to przecież chodzi.

Moje spojrzenie na web2.0

Jeśli dobrze rozumiem termin web2.0, to ostatnią rzeczą którą powinna posiadać strona chcąca się do tego trendu zaliczyć jest chwalenie się dwazerowością. Dlaczego? Bo to jest strona nastawiona na ludzi a nie na trendy!

Każdy z wymienionych przeze mnie serwisów nie miałby szans istnieć bez ludzi. Gdyby ludzie nie stworzyli linków w sieci, nie byłoby Google’a. Gdyby ludzie nie chodzili po amazon.com - też by miał zupełnie inny kształt. Amazonki nie mogłyby zaimplementować wszystkich superwyrafinowanych algorytmów o których pewnie w Polsce słyszało ze 100 osób i dzięki którym Amazon jest jaki jest. Wreszcie - ludzie tworzą Wikipedię.

Web2.0 wykracza daleko poza sieć. Niektórzy znają Netflix — to dość popularna w USA firma wypożyczająca filmy drogą pocztową. Wszyscy ją zaliczą do trendu web2.0, bo ma stronę z mnóstwem bajerów które pozwalają moca kolektywu i zaawansowanej statystyki łatwo wybrać filmy, które przypadną nam do gustu. Jednak dla Netflixu sieć jest tylko początkiem doświadczenia jakim jest znalezienie odpowiedniego filmu i obejrzenie go. Najważniejsza część całego zdarzenia — przesiedzenie 1.5h przed telewizorem — odbywa się już poza siecią!

Web2.0 istnieje od lat

Gdybym miał głosować na najlepszy serwis web2.0 w Polsce, nie byłby to ani wykop.pl, ani olo.pl, nie byłoby to też grono.net.

Gdzieś od 2001 roku w Polsce istnieje Biblionetka. Serwis który zarekomenduje ci książkę, która ci się spodoba. Idea jest prosta - czytasz książki i oceniasz je. Na podstawie tego i ocen innych użytkowników system poleci ci książki które mają szansę ci się spodobać. Sprawuje się dzielnie, oceny ma całkiem trafne - korzystam i rzadko jestem zawiedziony. Serwis jest w miarę wygodny, przyzwoicie użyteczny, o ile dobrze pamiętam nie ma ajaxa.

Niestety, brak gradientów i odpowiedniego zadęcia nie zrobi z niego gwiazdy nowych trendów. Umknie uwadze w gronie miernej jakości wypocin o nowoczesnym social-networkingu i przerabianiu na setki tysięcy sposobów tego, co już znane i oklepane — bookmarków, tagów, blogów — rzeczy, z którymi tyle osób już się zmagało, że naprawdę ciężko będzie odkryć w nich coś nowego.

Stąd doszedłbym do następującej konkluzji: Web 2.0 to umiejętne wykorzystanie potencjału, który leży w grupie ludzi i stworzenie z ich pomocą usługi wykorzystującej technologie sieciowe, która znacząco polepszy pewien fragment ich życia.

“Tak widzi polską architekturę Edward Dwurnik ale rzeczywistość jest jeszcze gorsza“. Przy tym, co on znajdzie nawet najgorsze przykłady na mojej stronie są naprawdę niczym!

Serdecznie polecam zajrzeć na tę strone. Mój ulubiony obiekt nazywa się ‘mistrz feng shui’.

Kawałek strony programu Adkontekst wyszukiwarki netsprint

Znacie wyrażenia regularne? To chyba największa pomoc w różnorakich edytorach tekstu i narzędziach preprocessingu, z jaką miałem okazję się spotkać. Zastanawiam się czy możnaby ich użyć do opisywania znaków towarowych. Np. Google mogłoby zarezerwować wyrażenie Ad[A-Z].*

Odkąd zaczęli zarabiać gigantyczne pieniądze na małych reklamach umieszczanych w wielu miejscach w sieci pojawiło się mnóstwo podróbek. Polskim pomysłem jest Adkontekst, wymyślony przez netsprint. Nie chcę się zastanawiać nad jakością samej usługi, ale sposób wyświetlania reklam i nazwa są co najmniej zastanawiające.

Myślę, że możnaby postarać się o większą pomysłowość. Już pomijam kwestię nazwy — ale np. same reklamy możnaby wyposażyć np. w tło z delikatnym gradientem lub w zaokrąglone krawędzie.

A tak budzą się skojarzenia z butami Pooma, NJKE oraz dresami Adadas i Didas. Znacie ten styl - cztery paski, etc.

Heh, rozrosły się komentarze do poprzedniego wpisu, pogadałem też z paroma osobami i zaczęli mnie pytać… Trochę więc będzie odpowiedzi. Niektóre cytaty zaczerpnąłem z komentarzy do rozmów o usability, a część z pytań, które zadano mi osobiście.

Czy ludzie, z którymi rozmawiałeś odróżniają programowanie od usability?

Krótko: tak. Rozmawiałem z ludźmi z naprawdę dużych firm, które mają rewelacyjne osiągnięcia w dziedzinie usability. Jeszcze nie czas, by się chwalić, ale oczekujcie wkrótce wielu ciekawych wieści wprost z środka e-świata ;)

Piękne. Zwłaszcza te pytania o kwadracie w 3D i Java vs PHP.

Mi wpadł do głowy prosty pomysł: dowolne 3 punkty w takim kwardacie tworzą trójkąt równoramienny, którego własności łatwo sprawdzić (jakies tw. Pitagorasa, czy cośtam). Jak to się sprawdzi stwierdzenie czy trzeci punkt leży gdzie trzeba jest trywialne.

“Kto jest ważniejszy — programista czy projektant interakcji?”

A to już jest świetne. Ciekawe, czy mają swoją odpowiedź typu “X jest ważniejszy” — wówczas należy pokazać ją tym drugim, ech. Bardzo motywujące.

Hmm… ja odpowiedziałem coś w stylu ‘programista mówi w C, zwykły człowiek po angielsku, spec od usability jest tłumaczem’. Nie podejmę się oceniać, kto jest ważniejszy, rozmówcy czy tłumacz.

> w takim razie dlaczego Google robi na tym tak gigantyczne pieniądze?
A na to jak odpowiedziałeś? :-)

Bo reklamy są tematycznie związane ze stroną, na której się je wyświetla. Ludzie nie kojarzą ich z czymś, co przeszkadza i utrudnia przeglądanie zawartości, jakośtam im ufają i w nie klikają.

mam nadzieje, ze nie podales gdzies w CV adresu tego bloga ;) no chyba ze aplikowales tylko do nie-polsko-jezycznych firm.

Aplikowałem głównie do firm z Fortune 500. Ale firmy, która mnie przyjęła, na razie na praktyki, na tej liście nie ma (w sumie nie wiem czemu - przeoczenie?).

Adres tego bloga podałem. Komentarze były takie: I don’t speak Polish, but seems very easy to navigate albo so what are you writing about?.

Założysz osobnego bloga?

Jestem leniem. Pewnie zostanie tylko podkategoria. Zresztą może zabronią mi pisać?

Odbyłem ostatnio parę rozmów kwalifikacyjnych o usability. Oto przegląd przez pytania, których można się spodziewać jak się na taką rozmowę zawędruje.

• Proszę opisać swoje doświadczenie z usability.
• Skąd dowiedział się pan o usability?
• Jaki jest najciekawszy bug jakiego pan spotkał?
• Jakie błędy usability znalazł pan na naszej stronie internetowej?
• Jak ocenia pan swoją znajomość Javy (tak, to była rozmowa o usability!).
• Czym się różni Java od PHP? Wady i zalety obu rozwiązań.
• Co to jest Ajax?
• Co to jest Eyetracker?
• Czy ludzie będą patrzeć na reklamy które są wyraźnie oddzielone od tekstu? (odpowiedziałem, że nie, na co dostałem pytanie pomocnicze: w takim razie dlaczego Google robi na tym tak gigantyczne pieniądze?)
• Ma pan do przerobienia aplikację biznesową, która obsługuje około 1000 osób (to wewnętrzny program w naszej firmie), nigdy nie przyglądał się jej żaden ui-designer. Jakie kroki podejmie pan, żeby tę aplikację poprawić? Tak ogólnie.
• Nasza aplikacja webowa cierpi na problemy wydajności — wyświetla dużo danych statystycznych, które pobiera z kilku serwerów. Niektóre z nich zwracają dane natychmiast, inne dopiero po około 3s. Jakie kroki można przedsięwziąć, by ułatwić pracę użytkownikom aplikacji (założenie: użytkownik ma dokładnie taką wersję przeglądarki, jaką my chcemy i z wszystkimi pluginami, które sobie wymarzymy).
• Jak można wykorzystać analizę logów serwera przy analizie użyteczności?
• Co to sa testy lo-fi? Persony? Cognitive walkthrough?
• Dlaczego usability jest ważne?
• Kto jest ważniejszy — programista czy projektant interakcji?
• Dostaje pan 4 punkty P1,P2,P3 i P4, każdy charakteryzowany przez trzy współrzędne x, y i z. Jak stwierdzić, czy tworza one kwardrat?
• Proszę wejść na stronę … (tu wiele adresów, niestety nie pamiętam, jakich). Co się panu nie podoba w interfejsie tej strony? Jak możnaby go poprawić? Co będzie wygodne a co niewygodne dla użytkowników?
• Jakie statystyki powinny zostać podpiętę pod stronę internetową, żeby pomóc ocenić jej użyteczność?
• Jakie statystyki o zachowaniu użytkowników można wyciągnąć jeśli ma się do dyspozycji AJAX i serwer z bazą danych, ale wolno do gotowego kodu HTML dodać tylko jedną linijkę kodu? (to moje ulubione pytanie).

Kazano mi także przygotować i dobrze udokumentować portfolio moich prac designerskich, przedstawić liste ocen zdobytych w trakcie studiów, przesłać resume. Miałem na to jakieś 20h.

Pytania, które ja zadałem

Jak wszyscy wiemy, warto czasem zadać firmie parę ciekawych pytań, by im pokazać, że rzeczywiście chce się u nich pracować. Oto lista tych, ktore mi przyszły do głowy.

• Czy używacie testów typu wizard-of-Oz?
• Do momentu, w którym zacznę u was pracować minie jeszcze parę chwil — czego powinienem się nauczyć do tego czasu?
• Czy w przypadku AJAXu korzystacie z gotowej biblioteki, macie napisaną własną czy też korzystacie z czegoś zupełnie nowego przy każdym projekcie?
• Czego mogę się nauczyć pracując z wami?
• Czy w przydzielonych mi projektach będą deadline’y? (to może nie jest oczywiste, ale duże firmy nie zawsze mają deadline’y)
• Co pan najbardziej lubi w swojej pracy?

Zgłosiłem też firmie litanię poważnych bugów na ich stronie.

Dziwny przypadek pewnej dużej firmy

Jak już pisałem, miałem kilka rozmów kwalifikacyjnych. Resume wysłałem do kilkunastu firm w USA (wszystkie z listy Fortune 500). Najfajniejszy przypadek, który mi się zdażył wyglądał tak.

Jest 10 rano, śpię sobie w najlepsze i nagle telefon:
– Dzień dobry, czy mam przyjemność z panem Marcinem?
– Taaak? A o co chodzi — odpowiedziałem ziewając, nie do końca kontaktując o co biega. Wczesna godzina, a tu ktoś dzwoni i zaczyna rozmowę po angielsku — to się codziennie nie zdarza.
– Wysyłał nam pan swoje resume, przejrzeliśmy je i chcielibyśmy zaproponować panu stanowisko programisty.
– Dobrze, a co miałbym robić?
– No, pisałby pan program na nasz nowy supertelefon. To telefon trzeciej generacji, z UMTS, 64MB ramu, Javą, wideokonferencjami.
– Dziękuję, nie jestem zainteresowany.
– Słucham?
– Nie jestem zainteresowany. O ile dobrze pamiętam aplikowałem na stanowisko analityka użyteczności. W jakim stopniu jest to związane z usability?
– No… raczej w nikłym. Ale jeśli się pan sprawdzi będzie pan miał szanse na szybki awans.
– W takim razie dziękuję. Mam już lepszą propozycję od konkurencji. Tam miałbym być samodzielnym programistą w dużym projekcie badawczym. Brzmi ciekawiej.
Po chwili obustronnego milczenia…
– Tak, to my też dziękujemy. Do widzenia.

Minęło dwadzieścia minut. Może mniej. Właśnie wkładałem drugą skarpetkę i słuchałem porannych wiadomości w radiu, gdy znowu zadzwonił telefon.

– Dzień dobry. Parę chwil temu rozmawiał z panem mój kolega, prawdopodobnie zaszła jakaś pomyłka. Musiał pomylić numery telefonów. Chcielibyśmy panu zaproponować stanowisko testera.
– Testera użyteczności?
– E… tak. Sprawdzałby pan, czy nasz kod jest użyteczny. (ang. You would be testing the usability of our codebase.)
– To znaczy?
– To znaczy, że pisałby pan przypadki testowe i korzystając z JUNIT… zna pan JUNIT, prawda?…
– Tak, znam. — nie znam, ale zawiesił głos, jakby oczekiwał takiej odpowiedzi.
– …więc pisałby pan przypadki testowe z JUNIT i sprawdzał, czy nasz kod jest użyteczny, tzn. czy przechodziłby wszystkie testy.
– Myślę, że zaszło jakieś nieporozumienie. Starałem się o stanowisko analityka użyteczności, tzn. człowieka, który bierze gotowy sprzęt lub oprogramowanie i testuje je na użytkownikach. Tzn. sprawdza czy użytkownikom jest wygodnie z niego korzystać a następnie sugeruje zmiany w zachowaniu programu.
– Aha… nie, to w takim razie rzeczywiście musiało zajść jakieś nieporozumienie. W każdym razie dziękuję za poświęcony czas i przepraszam, że pana obudziliśmy. Do widzenia.
– Do widzenia.