Blog

Webdesign dla… ludzkich mózgów

Webdesign, podobnie jak każda forma projektowania, opiera się na pewnym trywialnym założeniu: wszyscy jesteśmy ludźmi i mamy mózgi, które działają w podobny sposób. Być może nie identyczny, ale podobny.
Jeżeli nie zgadzasz się z tą tezą, padasz być może ofiarą jednego z tzw. błędów poznawczych – złudzeniu ponadprzeciętności. Nie martw się, podobnie jak inne błędy poznawcze, ten rodzaj niewłaściwego oceniania rzeczywistości jest wspólny dla nas wszystkich… Bo wszyscy mamy podobne mózgi.

Dzięki temu możemy na podstawie badań i obserwacji dojść do pewnych wniosków, które w świecie webdesignu są niezbędne. Na przykład czemu z jednych stron internetowych korzystamy chętnie i z łatwością, podczas gdy obsługa innych doprowadza nas do szału lub łez. Co więcej, możemy także założyć, że mimo licznych gustów (o których, jak wiadomo, nie dyskutuje się, i które, jak wiadomo, są zmienne), istnieją pewne ogólne zasady leżące u podstaw naszego doświadczania estetycznego. Niektóre strony www większość z nas uzna po prostu za ładne, podczas gdy inne wywołają na naszych twarzach wyraz obrzydzenia.

Z tego powodu warto zagłębić się na chwilę w świat psychologii, który pozwoli nam zrozumieć, co dzieje się w naszych głowach, kiedy patrzymy na kształty, kolory i litery na naszych monitorach.

Zainteresujmy się dwoma konkretnymi zjawiskami, jakie rozwinęły się w ludzkich mózgach w wyniku ewolucji. Pierwszym z nich jest wyczulenie na kontrast – zwracamy uwagę na te obiekty, które wyróżniają się spośród pozostałych. Dzięki temu webdesigner otrzymuje zestaw niezwykle użytecznych narzędzi: kolory, tekstury, kształty, zwroty i rozmiary:

TOOLS

Z drugiej strony, podświadomie nieustannie klasyfikujemy grupy obiektów, doszukując się pewnych powtarzalnych wzorów. Nasze mózgi uwielbiają powtarzalne wzory! Projektując stronę internetową wykorzystujemy ten fakt, dodając to naszego arsenału równowagę, podobieństwo, odległość i powtarzalność.

Spróbujmy poddać naszą percepcję kilku eksperymentom. Popatrzmy na poniższą grupę obiektów – wszystkie wyglądają dokładnie tak samo, a ich układ ocenilibyśmy jako bardzo uporządkowany i regularny.

ROWNE

Teraz namieszamy odrobinę w tym układzie. Oczywiście moglibyśmy wyróżnić którykolwiek z obiektów, zmieniając po prostu jego rozmiar, kształt lub kolor (tak robimy na przykład z ważnymi przyciskami na stronie – chcemy, aby to tam kierował swoją uwagę użytkownik):

kontrast1

Moglibyśmy także pozmieniać odległości, aby podzielić elementy na grupy – dokładnie w taki sposób traktujemy treści na stronie www – paragrafy tekstu, nagłówki, podpowiedzi, przypisy, przyciski, ilustracje – te wszystkie elementy muszą zachowywać opowiednie odległości, abyśmy na pierwszy rzut oka wiedzieli, które elementy stanowią jedną, złożoną całość, a których nie powinniśmy ze sobą grupować.

odleglosc
Tak w praktyce działa “prawo bliskości”.

Spróbujmy jednak czegoś trochę subtelniejszego. Wprowadzimy do układu dwa odmienne porządki.
Zauważmy, że chociaż elementy mają zbliżony rozmiar i równe odległości, układy wywołują inne wrażenie. Ten po lewej stronie wydaje nam się być uporządkowany poziomo, po prawej zaś pionowo:

podobienstwo

Oto prawo podobieństwa w praktyce.

Dobre strony internetowe posiadają wyczuwalny wizualny rytm – dlatego ich layouty wydają nam się przejrzyste, wygodne w użytkowaniu i ładne. Odpowiadają naszej intuicji, albo innymi słowy: ułatwiają naszym mózgom przyswojenie informacji.

Warto podkreślić, że mózgi, przy całej swojej niesamowitości, są również leniwe. Możemy mówić o zjawiskach “typowego punktu widzenia” oraz zasadzie “minimum percepcji”.
Oba terminy sugerują mniej więcej to samo – nasz odbiór rzeczywistości opiera się na schematach, które mamy zakodowane w głowach. Dlatego patrząc na skomplikowany, dziwny kształt:

ksztalt
zobaczymy w nim prędzej znane nam bryły, niż pokusimy się o dociekliwe poszukiwanie ich prawdziwej natury:

ksztalt2

Dlatego też patrząc na dwie przestrzenne bryły:

typowypunkt
po lewej natychmiast dostrzeżemy sześcian, natomiast po prawej… “coś dziwnego”, choć również jest to sześcian.

To oczywiście tylko kilka podstawowych przykładów ilustrujących, jak wykorzystać nasze ludzkie możliwości i ograniczenia w celu skutecznego docierania do użytkowników. Zachęcamy do dalszych poszukiwań. Przydatne linki znajdziecie w Wiki Maszynownia.