UI Design: Marek Kasperski

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.

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

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:

• zrób sobie test
• i jeszcze jeden.

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.