Zakładki:
Inne moje "rzeczy"
Inne rzeczy
Innych "rzeczy"
Książki
Możliwości i wzorce projektowe
Po godzinach
Rządzą... Gry
Zobacz mnie na GoldenLine
ThinkLab: moja firma

MOJE KSIĄŻKI - AUTOR

Użyteczność w praktyceM. Kasperski, A. Boguska-Torbicz Projektowanie stron WWW. Użyteczność w praktyce, Helion 2008.

Moja książkaM. Kasperski, Sztuczna Inteligencja, Helion 2003.

REDAKTOR MERYTORYCZNY

UmysłD. Casacuberta, Umysł. Czym jest i jak działa, Świat Książki 2007.

100 sposobów...T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, Onepress 2006.

Istota inteligencjiJ. Hawkins, S. Blakeslee, Istota inteligencji, Onepress 2005.

RSS
środa, 04 lipca 2007

Planowałem jeden z kolejnych tematów o kolorach, percepcji wzrokowej oraz narzędziach do wykorzystania w testach przez osoby związane z projektowaniem dla weba, a tu masz babo placek, Robert Drózd mnie ubiegł :) Z drugiej strony może to i dobrze, bo akurat przyjemnie się to czyta, i cieszy, że ktoś jeszcze widzi potrzebę projektowania od strony użytkownika, a nie od strony medium (większość rozmawia o technologii, językach, itp.). Tak samo, jak cieszyła mnie prezentacja Marcina Wichrowskiego na tegorocznej edycji konferencji "Interfejs użytkownika. Kansei w praktyce", pt. Znaczenie barwy w interfejsie użytkownika.

Nie będę się tutaj wgłębiał zanadto w kwestię percepcji wzrokowej (napiszę o tym może przy innej okazji), a teraz wspomnę tylko kilka faktów potrzebnych do zrozumienia na czym polega widzenie w kolorze, plus skupię się na kilku przydatnych przy prototypowaniu interfejsów narzędziach.

 

Forum kognitywistyka.net widziane oczami z wadami wzroku.

Powyżej fragment forum strony kognitywistyka.net, widziany (idąc od góry):

  1. okiem bez wad w widzeniu braw,
  2. przez osobę z deuteranopią (tj. nierozpoznającą barwy zielonej lub mylącą ją z barwą czerwoną),
  3. osobę z protanopią (tj. nierozpoznającą barwy czerwonej, bądź mylącą ją z zieloną),
  4. osobę tritanopią (tj. nierozpoznającą barw żółtej i niebieskiej).
Jest też w końcu i całkowita ślepota na barwy - achromatopsja - gdzie osoby widzą świat w burych odcieniach szarości, ale tutaj nie będę wiele o tym pisał. (Swoją drogą polecam lekturze studium przypadku pewnego malarza, który w wyniku wypadku samochodowego stracił możnośc widzenia w kolorach - O. Sacks, Antropolog na Marsie, 1999).

W każdym oku człowieka jest około 126 milionów światłoczułych receptorów, w tym: 120 milionów pręcików i 6 milionów czopków. (Dla porównania ilość punktów na ekranie monitora komputerowego przy rozdzielczości 1024x768 wynosi zaledwie 786 tysięcy).

  • Pręciki są bardzo czułe na światło, zajmują zewnętrzne obszary siatkówki.
  • Czopki są mniej wrażliwe na światło, rozmieszczone są głównie w centrum pola widzenia (nazywanym plamką żółtą) i to właśnie dzięki nim widzimy świat kolorowo.

Czopki wypełnione są aktywnymi substancjami, które umożliwiają nam widzenie odpowiednio kolorów: czerwonego, niebieskiego i żółcieni - każdy tylko jednego - podobnie do systemu kodowania barw RGB, wykorzystywanego w urządzeniach digitalnych. Brak jednego z rodzajów substancji jest odpowiedzialny za dysfunkcję związaną z percypowaniem tego właśnie koloru - barwoślepoty, np. protanopii, powszechnie określaną mianem daltonizmu. (Więcej szczegółów nt. widzenia barwnego np. na slajdach z wykładów, które prowadziłem w Akademii Sztuk Pięknych w Gdańsku).

Wykonaną stronę WWW możemy przetestować pod względem jej czytelności w ramach oglądania przez użytkowników cierpiących na jakiś rodzaj barwoślepoty.

Accessibility Color Wheel - czyli narzędzie ułatwiające wybór - z głową - kolorów czcionki względem koloru tła. Pokazuje też jaki skutek będzie miał dany wybór dla osób z deuteranopią, protanopią, tritanopią.

Fujitsu Color Doctor - kapitalne narzędzie działające desktopowo, a wykorzystujące silnik MSIE. To właśnie dzięki niemu było możliwe wykonanie wyżej zaprezentowanych kopii stron z uwzględnieniem trzech rodzajów barwoślepoty.

Vischeck - to narzędzie online do sprawdzania zarówno całych stron internetowych, jak i poszczególnych obrazków (zdjęć) pod względem ich czytelności dla osób z barwoślepotą.

 

Inne przydatne narzędzia

Color Palette Generator - świetne narzędzie do projektowania e-brandu strony internetowej firmy, która ma już swoje logo. Grafikę logotypu pobieramy z naszego komputera i klikamy Color-Palette-ify!. Zadudni, zafurczy i... rozłoży nam grafikę na kolorystyczne elementy pierwsze: zestaw kolorów użytych w danym zdjęciu wraz z ich transkrypcją html.

Google Color Chooser - bardzo proste, ale pożyteczne narzędzie do szybkiego ustawiania koloru na palecie RGB, w ramah czego otrzymujemy gotowy kod koloru w notacji html. Narzędzie jest widgetem, więc można je sobie wkleić do siebie na stronę (lecz na bloga w blox.pl z jakiś podowó NIE można :().

Grab Website Colors - jeśli ktoś chciałby się dowiedzieć jakich kolorów użyto na danej stronie; narzędzie do grabowania kolorów z innych stron: podajemy tylko adres url danej strony www, klikamy GET i po robocie.

IDEO Web Color Visualizer - narzędzie do szybkiego podglądu koloru czcionki i jego czytelności względem koloru tła.

Unsafe Colormatch - podobne narzędzie do IDEO Web Color Visualizera, z tym że mamy podgląd także na kolory dodatkowych elementów, jak: kolor linku, linku dowiedzonego, itp.

Visual Impairment Simulator - opisał już Robert Drózd we wspomnianym wyżej wpisie na swoim blogu, więc sobie daruję.

 

Upgrade z 5 lipca

Colorblind Web Page Filter - kolejne interesujące narzędzie pokazujące dowolną stronę (wpisujemy tylko w pole formularza adres url) tak, jak ją widzą osoby z różnymi zaburzeniami widzenia kolorów.

Color Vision - zestaw palet kolorystycznych widzianych oczami osób z różnymi odmianiami ślepoty na barwy.

Ishihara test - czyli jak się dowiedzieć czy samemu nie jestem ślepy na barwy :) Kilka linków:


Upgrade z 8 lipca

Dwa programy (typu desktop) do przechwytywania kolorów:

Colour Spy - dzięki niemu można sprawdzić kolor dowolnego punktu na ekranie. Plusem jest to, że okno aplikacji zawsze znajduje się ponad innymi otwartymi oknami, dzięki czemu mamy stały dostęp do programu.

ColSel - świetny program dla wszystkich programistów. Podaje kod wybranego koloru aż w siedmiu formatach (HEX, HTML, DEC, VB, C++, Delphi, Java). Prócz tego konwertuje kolor z RGB na HEX oraz ma możliwość zobaczenia jak będą wyglądały kolor tekstu do koloru tła. Posiada również opcję zapamiętywania naszych ulubionych kolorów.

***

Jeden z kolejncyh wspisów poświęcę tematowi: jak wykorzystywać kolory w interfejsach.

20:05, marekkasperski
Link Dodaj komentarz »
poniedziałek, 02 lipca 2007

Dla tych, którzy wiedzą co to prototypowanie - w ramach projektowania interfejsów - Gliffy, ciekawy zamiennik MS Visio.

Tych, którzy nie wiedzą, również zachęcam do oglądnięcia filmu (poniżej). A jeśli chodzi o zagadnienie protypowania, niebawem pojawi się osobny wpis na ten temat (i to nie jeden :)).

Zapraszam na prezentację!

 

08:46, marekkasperski
Link Dodaj komentarz »
niedziela, 01 lipca 2007

Niezbyt wiele osób zajmuje się kwestią percepcji czasu w ramach projektowania interfejsów oraz usług webowych.

Problem percepcji czasu sam z siebie jest na tyle interesujący, że śmiało można niejedną pracę doktorską przy tej okazji napisać.

"Jak przeżywamy czas? Jak szybko możemy reagować na rozmaite bodźce? Czy nasz mózg potrzebuje zegara?" Między innymi takie pytania stawia Ernst Pöppel w swoim kognitywnym studium na temat percepcji czasu (Tenże, Granice świadomości, 1989).

Czas.

Jeśli chodzi o usability oraz psychologię użytkownika niewiele mamy opracowań tego zagadnienia. W tej mierze w zasadzie zwykło się przywoływać tylko jedną zasadę: strona nie powinna ładować się dłużej niż 10 sekund! Prawo to jest konsekwencją wyników badań, jakie w latach 60. przeprowadził jeden z pionierów HCI, Robert B. Miller.

Millerowi udało się stwierdzić co następuje:

  1. 0,1 s. to czas, który użytkownik percypuje jako natychmiastową reakcję systemu na jego akcję.
  2. 0,1-1 s. to przedział czasowy, który możemy określić jako "real-time". W ramach niego praca użytkownika z systemem jest płynna.
  3. 10 s. to maksymalna długość skupienia użytkownika na wykonywanej pracy. System uwagi pozwala użytkownikowi sprawnie pracować w przedziale czasowym do 10 s., pod warunkiem, że w ramach tego czasu system dostarcza wszelkich niezbędnych odpowiedzi.

Tyle o najważniejszych ustaleniach Milera, które i m.in. Jakob Nielsen relacjonuje - w wielkim skrócie - w swojej: Design Web Usability (tłum. Projektowanie funkcjonalnych serwisów internetowych).

W ramach tychże ustaleń - a zwłaszcza ostatniego - w czasach modemowych namnożyło się sposobów radzenia sobie z magiczną liczbą 10 (czy jak woli Andrew King: 8±2). I tak oto mieliśmy do czynienia z wysypem tricków związanych z optymalizacji... kodu, grafiki, multimediów (problem optymalizacji tych ostatnich zachował się do dziś). Powstały rozwiązania, które pozwoliły zakłamywać faktyczny czas ściągania pliku, względem czasu jego odczuwania (tzw. uczucie przepływu): w przypadku grafiki to np. algorymty progresywne, a w przypadku rozwijającej się wówczas technologii Macromedia (jeszcze wtedy) Flash, postępującego paska Loading (zresztą zapożyczonego z rozwiązań desktopowych), dziś często wykorzystywanego również w ramach technologii AJAX (przegląd wybranych). Rozwiązania te tak dobrze spełniały (spełniają!) swoją funkcję, że pozwalały osiągać zadowolenie użytkowników widzących przyrostową odpowiedź systemu, do 39 sekund!

Rozpisywać się o tym nie będę, bo i sporo inni na ten temat popełnili - od chociażby Andrew B. King (zob. Zwiększ szybkość! Optymalizacja serwisów internetowych), prowadzący również stronę dedykowaną temu tematowi.

Zdają sobie też sprawę z tego najwięksi, stąd nie dziwi fakt, że przywiązują do tego sporą wagę.

Czasy ładowania stron (sprawdzone przeze mnie przy pomocy Pingdom Tools):

Amazon.com: 2,5 s
Yahoo: 0,3 s
YouTube: 1,9 s

Gazeta.pl: 8,9 s
Grono.net: 3,3 s
Interia: 5,3 s
Onet: 4,7 s
WP: 6,1 s

A jaka stąd nauka dla webmasterów freelancerów prowadzących swoje serwisy? Zbadajcie ile ładuje się strona. Spytajcie swoich userów co o tym myślą - czy są zadowoleni z czasu pobierania. Zastanówcie się co można poprawić - skrócić stronę i przez to ją odchudzić, zakupić lepszy serwer (może problem tkwi w odpowiedzi serwera, a nie w ciężkości strony - wczoraj sam się o tym przekonałem testując łącznie kilkaset stron). I - przy dzisiejszych tendencjach sieciowych chyba najważniejsze - sprawdźcie szybkość ładowania się zewnętrznych usług - skryptów java, w tym widgetów zewnętrznych usługodawców. Potrafią czasem nieźle... zwolnić (patrz niżej).

 

Czasy ładowania skryptów.

Rysunek 2.  Wynik testu na stronie kognitywistyka.net; schemat pokazuje tylko czas ładowania zewnętrznych usług, gdzie ostateczny czas - 7,2 s. - jest całkowitym czasem ładowania się strony).* 

 

* Swoją drogą Helion powinien coś z tym zrobić czym prędzej, bo jak tak dalej będzie to na swoim programie partnerskim miast zyskiwać [klientów], może tracić [partnerów]. Proszę tylko porównać czas ściągania 1,5kb z Helionu (pozycja nr 59) z czasem - dla przykładu - ściągania 20,6kb z Google (pozycja nr 7). Disaster!

***

Z badań Millera wyłoniła się jeszcze jedna rzecz, o której we współczesnej usability już się zdaje zapomniało, nt. zbyt krótkich czasów reakcji systemu. Okazuje się, że zbyt krótki czas odpowiedzi systemu również przez użytkowników jest źle odbierany. Co zaczyna mieć znaczenie w dobie źle używanej technologii AJAX. Ale to już temat na osobny wpis.

17:03, marekkasperski
Link Komentarze (4) »
sobota, 30 czerwca 2007

Sześć lat temu udało mi się na Allegro zakupić pamiętny (bo wyróżniający się pod względem designu) model laptopa iBook Clamshell (Blueberry), który wszedł do historii ze względu na zgoła inną rzecz, natomiast że był pierwszym notebookiem wykorzystującym technologię WiFi (a to był rok 1999). Pamiętam do dziś jak z pełną ekscytacją badałem każdy element nieznanego wówczas dla mnie interfejsu.

Pewnego dnia chcąc sporządzić szybką notatkę włączyłem maszynę, poczekałem chwilę na pojawienie się ekranu logowania do systemu, wybrałem portret swojej tożsamości i wpisałem w okienko hasło, po czym... oniemiałem! Okienko wzdrygnęło (dosłownie i w przenośni) się na moje wpisane hasło i potrząsnęło znacząco na NIE. Hasło, które wpisałem nie było poprawne. Tamten dzień był dla mnie znaczący.

 

Mac OS X: logowanie.

Rysunek 1. Panel logowania do systemu Mac OS X.

 

Obsługa błędów to jeden z poważniejszych problemów w projektowaniu interfejsów, a wciąż - niestety - bagatelizowany. Co prawda coraz mniej widuję na ekranach kultowych już komunikatów: "Błąd 404 - Nie odnaleziono pliku" (ten akurat ze strony Wprost), "Błąd 404. Strona o podanym adresie nie istnieje" (a ten z GUS), czy też "Wystąpił Błąd! Brak dokumentu (nr błędu 404)" i to w formacie obrazka .gif (ze strony sejmu), ale ekrany błędów wciąż nie są wystarczająco dobrze projektowane. Na domiar złego, niektórzy z projektantów poczyniają się do obowiązku, by przy okazji tworzenia strony komunikatu z błędem, napisać cały poemat nt. ew. powodów błędu (przykład poniżej).

 

Błąd nr 404 ze strony Wprost.

Rysunek 2. Zrzut strony z błędem 404 ze strony "Wprost".

 

Z pomocą przychodzą dwie szkoły: jedna ta wywodząca się z Apple, opisana m.in. w książce A Smile in the Mind, Beryla McAlhone'a (recenzja na stronie uzytecznosc.pl) i druga, wywodząca się z grupy 37 Signals, znana szerzej pod nazwą projektowania dyfensywnego (defensive design), a opisana w Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points (polskie tłumaczenie wyszło nakładem Helion). W skrócie: obie zmierzają do tego, by 1) komunikaty o błędach uczynić bardziej ludzkimi (wyrzucamy z komunikatu całą terminologię techniczną - kogo obchodzi na który numer błędu natrafłem?), a może nawet i zabawnymi, oraz 2) wspomagać wyjście z sytuacji, np. podsuwając linki, któe pozwolą mi wyjść z opresji (do strony głównej, do systemu pomocy, FAQ, wyszukiwarki, etc.).

W Polsce dobrymi przykładami świeci serwis społecznościowy Golden Line (brawo dla konkurencji! :)), gdzie komunikaty o błędach brzmią po prostu po ludzku.

 

Komunikaty o błędach z GoldenLine.

Rysunek 3. Komunikaty błędów ze strony serwisu społecznościowego GoldenLine.

 

Przykładem zaś wdrożenia metodyki Smile Mind jest chociażby komunikat z Cars.com.

Dla mnie prawdziwym majstersztykiem w ostatnim czasie była strona CrazyEgg. Wchodząc na jej domenę, pewnego razu stwierdziłem, że zamiast znanej mi strony widnieje komunikat mówiący, że właśnie odbywa się konserwacja serwera i przez pewien czas strona będzie wyłączona. Natomiast jeśli tylko chcę mogę... pograć sobie w grę (wykonaną w technologii flash), która widniała tuż poniżej. Nim się obejrzałem okazało się, że na stronie - której przecież de facto nie było - spędziłem ok. 20 minut, grając w najlepsze w rzucanie jajkami w przechodzących ludzi. :)

Nice!

Co prawda nie interfejsowo, ani nawet nie usabilitowo, ale za to sympatycznie :)

W ramach konkursu CoolBrands dostaliśmy nagrodę (wczoraj była gala, dzisiaj nagroda wędrowała w biurze z rąk do rąk).

 

Nagroda CoolBrands.

Zdjęcie 1. Statuetka CoolBrands dla grono.net.

 

Jak napisał Albert na blogu działu IT: "Grono.net zostało uhonorowane statuetką CoolBrands jako lider WEB 2.0 i znalazło się wśród nagrodzonych gigantów Internetu takich jak Google, Allegro.pl, czy Onet.pl."

Mnie tam cieszy, że wertując wydany przy okazji album jesteśmy zaraz po Google.pl. Co prawda alfabetycznie, ale zawsze. ;)

A tak na poważnie, to cieszą ostatnio pojawiające się tu i ówdzie dobre opinie o naszej robocie:

1. "(...) sam używam grono i ostatnio je nawet polubiłem..."

2. "Po chwilowej czkawce z zmianami designu (...) zaczynam postrzegać grono coraz pozytywniej. Jak ktoś na tym forum zauważył, ich strategia z zasięgowej zmienia sią w jakościową. Zamiast testować gdzie leży granica możliwej do osiągnięcia liczby użytkowników w polskim internecie, zaczynają aktywizować i ujakosciowiać już posiadaną potężną grupe użytkowników.

Teraz jeszcze otwierają się z API (aczkolwiek nie sprawdzałem na ile dobrze napisanym i przydatnym). Już na nich psów nie wieszam, tylko się z zainteresowaniem przyglądam. (...)"

[za: net_talk@googlegroups.com, 5 czerwca 2007]

Sympatycznie.

22:55, marekkasperski
Link Dodaj komentarz »

Wczoraj skończyłem dwudniowe testy, które robiłem razem z Andrew Swartzem z grupy Usability Serco na zlecenie Orange UK.

Andrew to doświadczony inżynier, z 10-letnim stażem w Apple, gdzie uczestniczył m.in. przy projekcie Apple Newton (to taki PDA wypuszczony na rynek o kilka lat za wcześnie). Nota bene po dziś dzień zwykło się o nim pisać w stylu: "The Newton Messagepad was an early (and unsuccessful) recursor of the now common personal digital assistant (PDA)." To akurat za Computers. An Illustrated History Christiana Wurstera.

Rozmawialiśmy o pracy dla Apple, o jego niezapomnianym spotkaniu z Stevem Jobsem (to temat na zupełnie osobny wpis), książce na temat prototypowania, którą teraz piszę, usługach mobilnych i ich rozwoju w europie zachodniej (nasze testy były częścią większego benchmarkingu, uwzględniającego rozwój usług mobilnych w sumie w czterech krajach europejskich); jedliśmy naleśniki i pokazywaliśmy sobie zdjęcia swoich domowych kotów (tak to już jest z kociarzami). Ale nade wszystko pracowaliśmy.

 

Już po pracy (Kamila - moja żona, Andrew i ja).

Zdjęcie 1. Od lewej: moja żona Kamila, Andrew i ja.

 

Tak jak praca z Andrew to czysta przyjemność, to praca z polskimi stronami rodzimych operatorów GSM to czysty... disaster - to najczęstsze słowo padające w ciągu 16 godzin naszych testów.

Zadanie n: ściągnij grę karcianą Pasjans.
Przebieg testów: zaraz, zaraz, gdzie są gry? Ok, mam. Gdzie są gry karciane? Nie ma takiej kategorii! Jasne, przecież gry w kategorii Filmowe na pewno są dużo bardziej popularne (sic!). Może spróbujmy skorzystać z wyszukiwarki? Ok, coś znalazła. W jakiej kategorii? Nie wiadomo! Ok, ściągnijmy ją (7 zl). Mamy. Zaraz, zaraz, ale ta gra jest w języku angielskim... Czemu nikt wcześniej o tym mnie nie powiadomił? Disaster. Sprawdźmy jakie jeszcze są tu gry - spróbujmy znaleźć kategorię, gdzie jest więcej niż jedna gra. Po odwiedzeniu kilku - o jest! Szkoda, że piętro wyżej architekt informacji nie napisał ile obiektów znajduje się w tej kategorii. No cóż... disaster.

Zadanie n+1: zobacz co grają dzisiaj w kinach i spróbuj zamówić na wybrany seans bilety.
Przebieg testów: świetnie, mamy filmy. Alfabetycznie - zaczyna się od tytułu na A i ciągnie przez kolejne strony końca nie widać... a szukamy "Rodzinka Robbinsonów". Listowanie po 10 wyników. Klik w "Następna", klik w..., klik, klik, ... (Jakby nie można zrobić listowania alfabetycznego.) Ok. Mamy. Wchodzę na film, chcę oglądnąć jego trailer. Jaki trailer? Jedyne co tu mamy to kilkanaście linków zatytułowanych: "Zdjęcie i stosowny numerek". Zobaczmy w jakich kinach grają i o której. Kina są (z nazwy tylko) wraz z godzinami rozpoczęcia seansu. Ale Andrew przyjechał z UK, ja dopiero co 4 m-c w Wa-wie... Które z tych kin jest najbliżej nas? Disaster. Może byśmy zadzwonili do nich, spytali na jakiej są ulicy, czy są jeszcze bilety? Disaster. Ani adresu, ani telefonu.

Zadanie n+n: ...
Przebieg testów: disaster, disaster, disaster.

Porównanie stanu dostępności do usług i treści mobilnych wypadło dla PL katastrofalnie. Strony operatorów nie przemyślane pod względem zawartości, pozbawione nawet podstawowej logiki w architekturze informacji (dział Muzyka mieszczący w sobie kolejny Muzyka to standard), przestarzałe, nic nie mówiącej nazewnictwo w ramach kategorii (Ubaw - co to za kategoria i to w głównym menu?) o reszcie nawet nie wspominam.

Jedno jest pewne, jest jeszcze dużo do zrobienia... co akurat mnie cieszy :)

22:53, marekkasperski
Link Komentarze (4) »

"Wykwalifikowani inżynierowie producenci kuchenek mikrofalowych, projektując przyciski, zasięgają zazwyczaj rady specjalistów z dziedziny zachowań ludzkich. Chcą, by te przyciski były dobrze widoczne i by manipulowanie nimi nie sprawiało trudności. Eksperci od czynnika ludzkiego przystosowują przyciski do oczu i palców użytkowników, ale nie do ich umysłów."

[A. Cooper, Wariaci rządzą domem wariatów, s. 44.]

Pora coś z tym zrobić...

22:48, marekkasperski
Link Dodaj komentarz »
1 ... 26