Światło, gradient: wklęsłe vs wypukłe

Oceń tę pracę

Jak już wspomniałem przy okazji postu nt. kolorów, oko ludzkie posiada fotoreceptory odpowiedzialne za widzenie kolorów (czopki) oraz osobne za widzenie jasności/ciemności (pręciki).

Cieniowanie mózg ludzki często wykorzystuje jako podstawę do stwierdzenia, że dany obiekt jest trójwymiarowy. To właśnie dzięki cieniom płaskie powierzchnie percepujemy jako 3D.

Dla projektanta interfejsów dodatkowo ważną informacją jest odkrycie natury tego, jak to się dzieje, że pewne obiekty mózg klasyfikuje jako wypukłe, inne zaś jako wklęsłe. Dlaczego jest to takie istotne? Choćby ze względu na czytelność przycisków GUI oraz w nawigacji menu stron internetowych, zwłaszcza teraz, w dobie modnych gradientów [w stylu web 2.0]. Jest to także pomocne przy projektowaniu interfejsów, które pozostają graficznie w zgodzie z naszą wiedzą prekognitywną (o tym niżej).

Co to jest wiedza prekognitywna oraz jakie ma znaczenie dla naszego systemu poznawczego w ramach percepcji głębi?

„Cienie są identyfikowane na wczesnym etapie procesu widzenia po to, by można było szybko stworzyć pierwsze wrażenie kształtu obiektu. (…)

Patrząc na koło, można zobaczyć jeden z dwóch kształtów w zależności od tego, czy sądzimy, że dany kształt jest oświetlany z góry czy z dołu. Jeśli źródło światła znajduje się na górze, można wnioskować, że to wypukłość, ponieważ kształt ten jest czarny pod spodem, tam, gdzie znajdują się cienie. Natomiast jeśli źródło światła znajduje się na dole, tylko wgłębienie może dawać taki rodzaj cienia. Dwa różne kształty: wypukłość lub wgłębienie mogą tworzyć taki sam cień w zależności od położenia źródła światła”. (Patrz rysunek 2.A.)

Jeśli chodzi o pochodzenie źródła światła w toku ewolucji mózg nasz zbudował sobie mechanizm, ułatwiający mu szybkie przetwarzanie informacji na temat widzianego obrazu.

„Zaskakujące jest to, że ludzie widząc koła z białą górą, widzą je jako wypukłości; mózg nie chcąc pozostawiać nas w niepewności, dokonuje wyboru: światło dochodzi z góry.

Założenie, że światło znajduje się na górze, jest zupełnie słuszne: jeśli jest jasno, to zwykle dlatego, że nad naszymi głowami świeci słońce.”

Dodatkowo, mechanizm ten jest tak głęboko w nas zakodowany, że czasem może dojść do sytuacji dziwacznych: przechyl głowę o 180 stopni i spójrz ponownie na koła z rysunku 2A.

„Wypukłości staną się wgłębieniami, a wgłębienia wypukłościami. Mózg – zamiast zakładać, że źródło światła znajduje się wysoko na niebie – przyjmuje, że dochodzi ono z górnej części naszego pola widzenia.

Zamiast marnować czas na zastanawianie się, czy głowa jest położona normalnie, czy też do góry nogami, a następnie na wnioskowanie, gdzie powinno znajdować się słońce, mózg zdecydował się na „wystarczająco dobre” rozwiązanie.”

Jakie jest znaczenie tego mechanizmu dla pracy projektanta? Rozwiązanie, którym posiłkuje się nasz mózg oznacza, że „położenie źródła światła może zostać na stałe zakodowane w procesie percepcji kształtów, co pozwala na bardzo szybkie przetwarzanie obrazu”. Szybkość ta umożliwia wywnioskowanie o kształcie danego elementu – np. stanu buttonu – na bardzo wczesnym etapie przetwarzania obrazu. Tak wczesnym, że sprzyja maksymie Steva Kruga: „Nie każ mi myśleć”, redukując koszta poniesione przez podmiot w procesie poznawania.

Menu Amazon.com posiada sporo górnego światła, dzięki czemu wydaje się być lekkie i pozostaje w zgodzie ze spodziewanym zachowaniem obiektu trójwymiarowego widzianego w słoneczny dzień – a więc nastraja użytkownika pozytywnie.

***

Wykorzystane w tekście cytaty pochodzą z: T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, 2006.

image_pdf

Percepcja czasu: action indicator

Oceń tę pracę

Siedzę właśnie nad częścią książki poświęconą elementom interfejsu, więc dzisiaj trochę o tym. A konkretnie o wskaźnikach postępu (progress bars).

Przez stosowanie nowych rozwiązań programistycznych, zwłaszcza AJAXa, interfejsy webowe coraz częściej przypominają te, które znamy korzystając z programów zainstalowanych na naszych komputerach. Ma to swoje zalety: w przypadku dobrze zaprojektowanych i dobrze oprogramowanych interfejsów, doświadczenie użytkowników może zostać pozytywnie przeniesione z środowiska desktop do Internetu. Ma też swoje minusy: minus zasadniczy to ten, że często interfejsy te tworzone są przez osoby z małym doświadczeniem, nie znające i przez to nie stosujące prawa i reguły rządzące światem projektowania interakcji.

Jedna z takich reguł związana jest z percepcją czasu – pisałem już na ten temat, ale dzisiaj będzie ciut inaczej.

Generalnie w naszym życiu codziennym, pozakomputerowym, każda akcja związana z otoczeniem, wywołuje natychmiastową reakcję. W świecie komputerów nie jest już tak różowo – nie rzadko dochodzi do kliku-, kilkunastosekundowych przestojów systemu, związanych z pracą dysku, pamięci RAM, procesora. To samo można powiedzieć o przestojach w ramach korzystania z sieci – gdzie głównie spowodowane jest to czasem pobierania danej strony WWW, ale także korzystaniem z usług webowych – np. poczty e-mail. Z drugiej strony chcemy mieć odpowiedź od systemu czy rozpoczął daną akcję, którą wywołaliśmy, czy nie jest czasem zepsuty. Dodatkowo potrzebujemy informacji ile dana czynność będzie trwała, jeśli jej wykonanie w trybie natychmiastowym (tj. w przeciągu 1 sekundy) z jakiegoś powodu jest niemożliwe. Dotyczy to tak samo operacji w systemie operacyjnym, jak i korzystania ze stron WWW. W końcu, długie czasy odpowiedzi systemu nie są spostrzegane dobrze przez operatora; użytkownicy szybko się zniechęcają to ślimaczących się systemów, ale osobnicze odczuwanie mijania czasu można oszukać, chociażby przez dodanie ruchu w polu widzenia.

Interfejsy w wersji desktop

Progress bar – klasyczny wskaźnik postępu, najczęściej o kształcie paska poziomego, w ramach którego środkowa, wypełniająca go część przesuwa się z lewej strony do prawej, pokazując w ramach upływu czasu postęp wykonywanej akcji: kopiowania danych, opróżniania kosza, nakładania tekstury na model 3D w programie graficznym, etc.

Występują dwa rodzaje progress baru:

  • determinate progress indicator – mamy z nim do czynienia wówczas gdy, posługując się przykładem z kopiowania pliku, system zna rozmiar pliku i jest w stanie oszacować, biorąc pod uwagę szybkość transferu danych, ile będzie trwało kopiowanie,
  • indeterminate progress indicator – stosowany wtedy, gdy system nie jest w stanie oszacować potrzebnego czasu do zakończenia danej operacji.

Ważne jest by progress bar pokazywał postęp w ramach upływającego czasu: A) albo w formule czysto graficznej – np. przesuwający się pas kolorystyczny z lewej do prawej, B) albo w formie tekstowej – np. w przypadku ładującej się strony w technologii flash, przy pokazaniu całkowitej objętości danych, które muszą zostać ściągnięte by wyświetliła się strona, odliczanie upływającego czasu, np. odliczając ilość pobranych danych, C) albo łącząc obydwie formy: A + B.

Asynchronous progress indicator – wskaźnik postępu pracujący w tle, najczęściej przypominający kształtem jakiś kręciołek, np. po stronie przeglądarki WWW, gdy w ramach kilku otworzonych zakładkach ładują się strony WWW.

Ten rodzaj wskaźnika może się rónież pojawiać w postaci spinning wait cursor. W interfejsach Apple zasada jest taka, iż jeśli system wykonuje jakąś czynność dłużej niż 2 sekundy, to po upływie dwu sekund pojawia się kursor wait, dając znać użytkownikowi, że akcja jest wykonywana, ale musi chwilę poczekać na efekt końcowy.

Internet

W ramach sieci wskaźniki postępu znajdują zastosowanie w ramach korzystania z jednej z dwu technologii:

  • Flash,
  • AJAX.

I tu nie będę się rozpisywał, gdyż zasady korzystania są takie same jak w ramach aplikacji desktopowych:

  • klasyczny wskaźnik postępu powinien być stosowany tam, gdzie pobierana jest większa ilość danych i przewidziany przez to jest dłuższy czas przestoju. Dodatkowo, dobrze jak informacje towarzyszące wskaźnikowi ukazują postęp w pobieraniu danych – albo w formie przesuwającego się paska, odzwierciedlającego postęp w ramach upływu czasu, albo odliczając ilość ściągniętych danych w stosunku do całkowitej ich liczby.
  • asynchroniczny wskaźnik powinien mieć zastosowanie wszędzie tam, gdzie czas odpowiedzi systemu przekracza granicę dwu sekund.

***

Warto zajrzeć do Apple Human Interface Guidelines, a tam m.in.:

  • o progress indicators,
  • o kursorach w systemie Apple Mac OS X, w tym progress indicator oraz spinning wait cursor.
image_pdf

AutoSuggest od Apple: poprawić to, co doskonałe

Oceń tę pracę

Autouzupełniacz (AutoSuggest) jest kapitalnym ficzerem sam w sobie – ten, kto wpadł na jego pomysł powinien otrzymać interfejsowego Oskara. Widziałem go w akcji już na wielu stronach i za każdym razem zadziwiał mnie swoim „sprytem” (tak, tak, personifikowanie interfejsów to normalna sprawa).

Świetnie się sprawdza chociażby w ramach funkcjonowania gramsajtów w gram.pl, przeszukując na bieżąco wg zadanego klucza bazy ulubionych: filmów, gier, zespołów muzycznych (nota bene, w tym serwisie społecznościowym jest wiele świetnych pomysłów, tylko chyba coś z ogólną koncepcją gramsajtów nie chwyciło). Sprawdza się też w wyszukiwarce serwisu AjaxRain, przeszukując zbiór udostępnianych tam skryptów. Ale to, co zrobiło Apple, to mistrzostwo świata!

***

O ile dobrze pamiętam, jakieś dwa m-ce temu ruszyła nowa odsłona firmowej strony Apple, nawiązująca stylistyką do najnowszej wersji Mac OS-a X – Leoparda.

Jak zwykle u Apple bywa stylistyka wyśmienita, przemyślana kolorystyka, dograny układ wyświetlanych elementów na danej stronie – nagłówki, widoczne linki kierujące do WIĘCEJ informacji, dobrze wykorzystany kolor pomarańczowy na elementach NEW, etc. Starannie przeniesione rozwiązania interfejsowe z systemu Mac OS X do interfejsu webowego. Przykładem mogą być focusy na polach wyszukiwarki (rysunek poniżej). (Ustalenia a propos focusów w: Apple Human Interface Guidelines). Choć z drugiej strony stosowane bardzo niekonsekwentnie – na jednych polach wyszukiwarki focusy są, na innych ich brak.

W czasie premiery nowej wersji strony Apple zniechęciły mnie do niej rozwiązania związane z menu rozwijanymi, rozlokowanymi w kolumnach po prawej i lewej stronie. Wodziłem kursorem po ekranie, a tu… frry, frry – i nim się zorientowałem w czym rzecz całe menu miałem na dole. Nawet nie kliknąłem; tylko najechałem kursorem… Nakierowałem kursor na którąś z zakładek… frry, frry – dwie inne pognały już do góry. Poza tym te odległości – jak ktoś sobie wyobraża, że użytkownicy będą wodzili po całym ekranie wzdłuż i w szerz tylko po to, by rozsuwać menu? Baaardzo średnie rozwiązanie.

Dałem sobie spokój z tą stroną… aż do wczoraj.

Do jednego z prototypów, który to właśnie wykonuję dla jednego z moich klientów, potrzebowałem ikonki ze zgrupowanymi osobami. Takiej małej szarej ikonki. I to w trybie „na już”, stąd nie miałem czasu by coś samemu przygotować. Pamiętałem, że taką ikonkę widziałem kiedyś na stronie Apple. Podążyłem za tą myślą.

Pobieżne przeglądnięcie kilkunastu z podstron nie przyniosło pożądanego rozeltutatu – ikonki nigdzie nie było. Przyszła zatem pora na zaprzęgnięcie do roboty szukajki.

Wklepuję AV (od avatar), a tu, tuż pod wyszukiwarką, w ramach menu kaskadowego rozwija się… – i tu powracam do punktu wyjścia tego wpisu – AutoSuggest. Ale jaki? Z ikoną reprezentującą daną informację (najczęściej produkt), z tytułem, krótkim opisem, z podziałem na kategorie, do której dana informacja należy względem całej architektury strony. Absolutnie Piękna Rzecz! Przemyślana. Informacja podana dla użytkownika w najbardziej czytelny sposób jaki można sobie wyobrazić w tego typu rozwiązaniach i w dodatku na tak małej przestrzeni. Za to ktoś powinien dostać… no, przynajmniej podwyżkę 🙂

I w ten sposób znów stałem się użytkownikiem Apple Łeb Sajtu. I klikam, i myszkuję – to tu, to tam, co jeszcze zrobili lepiej. Choć „frry, frry” wciąż nie poprawiają.

image_pdf

Barwy: zestawienia kolorystyczne

Oceń tę pracę

Przeglądając statystyki odwiedzin bloga, w tym w szczególności zapytania do Google, które prowadzą potem na stronę, zauważyłem, że często pojawia się hasło schematów kolorystycznych do wykorzystania na stronach WWW.

O kolorach już było kilkakrotnie (o widzeniu kolorów i projektowaniu uwzględniającym accessibility, wykorzystaniu w ramach tworzenia e-brandu, o znaczeniu psychofizjologicznym) – stąd zapewne przekierowania z Google – ale o schematach nie. Stąd – wychodząc na przeciw potrzebom 🙂 – dzisiaj właśnie schematy kolorystyczne. Skąd u mnie tak duży nacisk na kwestie kolorystyczne w ramach projektowania interfejsów? Powodów jest kilka. Choćby takie dwa:

  • około 96 % informacji nt. świata zyskujemy w ramach percepcji wzrokowej (to m.in. dlatego tak istotne są dzisiaj badania z wykorzystaniem techniki eyetracking). Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności – resztę roboty wykonuje juz mózg. To wyspecjalizowanie – nadwrażliwość na kolory – powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek.
  • McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory.
***

Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe.

W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad:

  • zasada komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw,
  • zasada triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt,
  • weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta,
  • i innych.

Korzystając ze strony Adobe Kuler można przekonać się na własne oczy jak to działa.

Zestawy kolorów monochromatycznych uzyskać bardzo łatwo – np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, + 60%, +80% białego oraz, z drugiej strony, +20%, +40%, + 60%, +80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.

Zestawy barw pastelowych uzyskujemy z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.

Jeśli chodzi o schematy kontrastowe, to wystarczy połączyć ze sobą barwy dopełniające się.

***

33 schematy kolorystyczne [do wykorzystania na strony WWW]*

#6B2E50 | #B24D89 | #D293B7 | #E1B7CF | #F0DBE7 | #D8E1B7

#FB6BB3 | #FF99CC | #FFB3D9 | #FFCDE6 | #FFE7F3

#663355 | #663366 | #CC66CC | #887788 | #BBAABB | #EEBBEE | #EEBBDD | #EEDDEE

#340034 | #750074 | #DD71BD | #F7D4E6 | #F7E4EE | #FEFFFF

#DCC8C7 | #BF9FAA | #B295CD | #773A5B | #C39B9C | #87707A

#DEBAD2 | #B875A5 | #703860 | #98867B | #FFBB47

#666666 | #330033 | #663366 | #996699 | #FFCC66

#929690 | #B4CD99 | #648040 | #90AE60 | #E1E2A3 | #E8E8E4 | #E19857

#948068 | #C0BB93 | #90A07B | #7E8C8D | #666962

#5C2810 | #CAB36F | #AFB06C | #DED791 | #C2A182

#888C71 | #44381E | #C3D5C7 | #565038 | #DCDDB1

#98B564 | #C7DDA0 | #C6CDB9 | #DDDDDD

#335533 | #668844 | #99BB66 | #DDEEBB | #888877

#497019 | #99C089 | #B3B590 | #E6F5BC | #D8E6AB | #A3AC59 | #FAE56E

#3C5787 | #477265 | #528C44 | #5CA622 | #67C100

#567500 | #759933 | #8DC42B | #B1CA25 | #CEF415 | #E6F33F

#89974A | #C3D73A | #BBC971 | #E1E9AD | #EBF2BE | #EBE06D | #C54836

#6FA9E1 | #679BE4 | #9CD821 | #EA7F2D

#C1DA84 | #8BB5B7 | #AAC9CB | #CADDDE | #7A7A7A | #C8C8C8 | #B6B6B6

#595B66 | #404251 | #D1D7FA | #555A74 | #2C2D38

#D2D0E8 | #F0EFF4 | #A9AFD1 | #525C91

#000000 | #313C42 | #6B797B | #EFC310 | #FFFFFF

#DEDACA | #C0B99A | #8D8870 | #5E5945 | #7799AA | #5B8092 | #335566 | #223344

#6A7276 | #B4BEC2 | #828A8C | #EAB646 | #FAD68A | #EEECE8

#F3E690 | #B2BDFF | #928F90 | #BBA095 | #FEFAE9

#D5BF90 | #8F968F | #FFCD50 | #8597A5 | #FEFED9 | #76763A

#C7A485 | #E2D2BD | #FFEFE3 | #FFCAB9

#4D435B | #683653 | #EED4E1 | #7A848D | #E2E7ED | #AFC3CE

#313531 | #CED8C6 | #59777D | #4A3139 | #B6AC8E | #848370 | #E7BFCB

#798488 | #92987C | #A59680 | #A58080 | #827988

#83815A | #CDC282 | #D1C5AF | #DEC0BE | #D87A94 | #57393B

#F7DFC7 | #E3AEA8 | #5C433F | #F9D0A2 | #DA826C | #F6AC6D

#CA091E | #F91A1D | #D80B29 | #FF5812 | #FFA723

* Schematy wybrane z bogatej galerii znajdującej się na stronie ColorSchemer.

image_pdf

Pamięć kształtów

5/5 - (1 vote)

Było już o pamięci, a przy okazji wpisu nt. percepcji barw obiecałem, że napiszę słów kilka w związku z tym, co wiadomo na temat możliwości poszerzenia kanału pamięci użytkownika interfejsów. Dzisiaj jednak nie tyle o kolorach, co o kształtach – i o tym jak ich używać, by zwiększyć prawdopodobieństwo zapamiętania elementów, na których nam – jako projektantom – zależy.

***

Zapamiętywanie barwnych figur

  1. Generalnie to barwy pamięta się lepiej, niż kształty.
  2. Jeśli chodzi o figury, to tym lepiej są zapamiętywane: im bardziej prosta jest ich budowa i w im większym stopniu podobne są do jakichś przedmiotów, tzn. w im większym stopniu wiążą się z minionym doświadczeniem (zasada swoistości).
  3. W obrębie samych figur najdłużej i najwierniej zapamiętywane są te ich części, które swoją regularnością wyodrębniają się na tle pozostałych bardziej nieregulanych, albo swoją nieregularnością – na tle bardziej regularnych (zasada kontrastu).

Przypominanie

  1. Zarówno figury jako całości, jak i poszczególne ich części zapamiętuje się jako regularniejsze niż są w rzeczywistości (zasada upraszczania).
  2. Figury są upodabniane do przedmiotów znanych z doświadczenia, co prowadzi niekiedy do znacznych zniekształceń (zasada dopasowania).
  3. Składniki figur, będące znanymi figurami geometrycznymi, są często odtwarzane wg znanego wzorca, tj. w swym tzw. klasycznym położeniu, np. że podstawa trójkąta jest równoległa do osi poziomej.

Zapamiętywanie zamierzone a samorzutne

  1. Zapamiętywanie zamierzone figur barwnych o dużym stopniu nieokreśloności przedmiotowej jest około 14% skuteczniejsze od zapamiętywania samorzutnego.
  2. Zapamiętywanie zarówno zamierzone, jak i samorzutne figur jako całości i ich części składowych wzrasta, im prostsza i im przejrzystsza jest budowa figury oraz im łatwiej wyodrębnić ją spośród innych figur.
  3. Zapamiętywanie zarówno zamierzone, jak i samorzutne wzrasta, im bardziej podobna jest figura lub jej część do przedmiotów znanych danej osobie z wcześniejszego doświadczenia.
  4. Jeżeli figura lub jej część składowa przypomina jakiś znany przedmiot, jest zapamiętywana nie tylko w powiązaniu z tym przedmiotem, ale często poprzez ten przedmiot, co w przypadku większych różnic może spowodować zniekształcenie sensu pierwotnego wzorca na rzecz jego odbicia, przez które został zapamiętany.
  5. W przypadku figur bardziej złożonych zapamiętywanie rozpoczyna się albo od uchwycenia ogólnego kształtu figury, albo od wyodrębnienia którejś z jej części składowych, która została uznana za charakterystyczną.

***

Pamięć barw jest silniejsza niż pamięć kształtów, ale kształty mogą być zapamiętywane efektywniej, jeśli są proste, regularne lub przypominają znane przedmioty. Zasada kontrastu wskazuje, że kształty z wyraźnym kontrastem (np. regularność w nieregularnych figurach lub nieregularność w regularnych) są lepiej zapamiętywane. Tego rodzaju kontrast przyciąga uwagę i wspomaga proces zapamiętywania.

Podczas przypominania kształty są często postrzegane jako bardziej regularne, niż są w rzeczywistości. Dodatkowo, przypisanie kształtom cech znanych obiektów prowadzi do zniekształceń w odbiorze, ponieważ postrzegamy je przez pryzmat tych przedmiotów, a nie w ich oryginalnej formie. W przypadku zapamiętywania zamierzonego, zwłaszcza w odniesieniu do figur o dużej nieokreśloności, skuteczność jest wyższa niż w przypadku samorzutnego zapamiętywania. Kluczową rolę w tym procesie odgrywa prostota figury i jej podobieństwo do znanych przedmiotów.

***

Na podstawie m.in. wyników badań opisanych w: W. Szewczuk, Psychologia zapamiętywania, PWN, 1997.

Lektura uzupełniająca: M. Jagodzińska, Obraz w procesach poznania i uczenia się, WSiP, 1991.

image_pdf