Początkowo nic nie zapowiadało, że jedną z przyczyn wyborczego sukcesu Baracka Obamy w walce o fotel prezydenta USA w 2008 roku będzie skuteczna kampania internetowa. Liczba odsłon pierwszej strony wyborczej Obamy nie spełniała oczekiwań. Jak wyglądała ta strona? Na ekranie powitalnym umieszczono zdjęcie uśmiechniętego kandydata Demokratów na mocno błękitnym tle. Obok niego znajdował się czerwony odnośnik: „zapisz się”. I to właściwie wszystko.
Zmiany nastąpiły, gdy do zespołu analityków zajmujących się obsługą strony dołączył Dan Siroker. Siroker, wcześniej menedżer w Google’u, zarządził podział strony głównej na kilka mniejszych segmentów. W każdym z nich umieszczono dodatkowe zdjęcia. Obok znalazły się trzy odnośniki: „zapisz się”, „dowiedz się więcej” i „dołącz do nas”. Statystyka kliknięć natychmiast poszybowała.
Niemal do końca kampanii Siroker obserwował statystyki kliknięć i badał reakcje odwiedzających na układ i kolorystykę strony. Równocześnie na bieżąco ją modyfikował. Okazało się, że największą popularnością cieszyło się biało-czarne zdjęcie Obamy z rodziną, a goście najchętniej klikali na hasło: „dowiedz się więcej”. Wciąż ulepszana witryna internetowa przyniosła rekordowe 75 mln dolarów wpłat na kampanię.
Siroker ustalił, że zwolennicy Obamy wolą biało-czarne zdjęcia, metodą prób i błędów. Dziś jej zastosowanie już nie wystarcza, a dobra witryna nie może powstać bez udziału psychologów i socjologów. Podpowiadają oni programistom, jakimi emocjami kierują się internauci, przeglądając strony w sieci, i jakie elementy wyglądu witryny decydują o jej popularności wśród kapryśnych użytkowników.
Darwin i grymasy
Prof. Dacher Keltner z University of California w Berkeley na co dzień zajmuje się badaniami emocji i społecznych zachowań. Czasami jednak dostaje zadania specjalne – takie jak zaprojektowanie nowego zestawu internetowych emotikon, o co ostatnio poprosili go inżynierowie Facebooka. Nowe emotikony – czyli mikroobrazki przedstawiające uśmiechnięte buźki lub grymasy – mają wiernie oddawać ludzkie emocje. Według badań specjalistów od serwisów społecznościowych brak wyrazistej grafiki, informującej precyzyjnie o uczuciach piszącego, prowadzi często do nieporozumień między użytkownikami.
Pomysły profesora Keltnera ma zamienić w gotowy zestaw ikon Matt Jones, grafik ze sławnego studia Pixar. Obaj panowie opierają się na pracy Karola Darwina, dotyczącej ekspresji emocji u zwierząt i ludzi. Mają nadzieję, że dzięki niej uda im się odtworzyć nawet te trudniejsze do wyrażenia w formie graficznej emocje – jak rozczarowanie czy współczucie.
Mgr inż. Marcin Wichrowski, specjalista od multimediów, e-learningu i rozszerzonej rzeczywistości w Polsko-Japońskiej Wyższej Szkole Technik Komputerowych, potwierdza, że aby zaprojektować dobrą stronę www, trzeba łączyć specjalistyczną wiedzę programisty i projektanta stron z doświadczeniami psychologa. – Już w czasie II wojny światowej sprawdzano, jak żołnierze będą się posługiwali zaawansowanymi technologiami – przypomina Wichrowski. – Ta pierwotna analiza psychologiczna stała się podstawą interdyscyplinarnej nauki, zajmującej się oddziaływaniem między człowiekiem a systemami komputerowymi przez interfejs użytkownika (human-computer interaction) – opowiada.
Internet w budowie
Dwie dekady temu łączenie psychologii z projektowaniem stron w sieci byłoby prawdopodobnie traktowane ze zdziwieniem. Strony www z początku lat 90. przekazywały jedynie krótką, zazwyczaj tekstową informację. Miały szare tło, niebieskie odnośniki, prosty, czarny tekst. O dostarczaniu rozrywki czy choćby przyjemnych wrażeń estetycznych nie było mowy.
Kilka lat później pojawiły się atakujące użytkownika kolorowe tła, męczący oczy, niewyraźny tekst oraz animowane obrazki znane jako GIF-y. Te ostatnie używane były bardzo często i zwykle bez uzasadnienia. Na stronach widzieliśmy mrugające strzałki czy kręcące się trupie czaszki. Kiedy w 1996 roku projektanci strony McDonald’s spróbowali użyć firmowych kolorów amerykańskiej korporacji, gościa witryny atakowało jasnoczerwone tło, a na nim rażące żółte logo i napisy. Z kolei na firmowej stronie LEGO użytkownik widział trudny do przeczytania kolorowy napis w towarzystwie rozrzuconych na ekranie animowanych postaci z klocków. Charakterystycznym obrazkiem z tego okresu był wyświetlany na stronie głównej robotnik kopiący dół, a pod nim napis: „under construction”. I taki właśnie był wtedy internet – w budowie.
Dzisiejsi projektanci witryn myślą nie tylko o estetyce – muszą wiedzieć, jak projektowane przez nich rozwiązania wpływają na emocje i postępowanie użytkownika. Reguluje to cały zestaw skomplikowanych zasad. Np. odpowiednia barwa we właściwym miejscu potrafi zdziałać cuda. Wyobraźmy sobie identyczne strony różniące się kolorem przycisku, którego naciśnięcie pozwala na wypróbowanie produktu firmy. Jak wykazali autorzy programu służącego do analiz rynku HubSpot, czerwony wariant będzie naciskany ponad 20 proc. częściej niż zielony.
– Kolory mają dla nas konkretne znaczenie symboliczne – wyjaśnia prof. Wiesław Gdowicz, kierownik Zakładu Badań Wizualnych i Interakcji Akademii Sztuk Pięknych w Katowicach. Dlatego designerzy projektując stronę fabryki, firmy budowlanej czy korporacji finansowej hojnie używają czarnej barwy, bo kojarzy się z precyzją, siłą i profesjonalizmem.
Natomiast w internetowym sklepie z ubraniami czy na stronie sprzedającej muzykę rozrywkową warto wykorzystać kolor czerwony, który użytkownicy łączą z ekscytacją, niebezpieczeństwem, seksem i prędkością. Trzeba jednak uważać, bo np. czerwień obok zieleni odwołuje do zupełnie odmiennej tematyki – Świąt Bożego Narodzenia.
Emocjonalnie reagujemy nie tylko na barwy, ale również na krój liter. Dlatego zakładając witrynę kancelarii prawnej, wybierzmy bogatą w ogonki i zawijasy czcionkę szeryfową, która symbolizuje intelekt i konserwatyzm. Z kolei na potrzeby strony agencji reklamowej lepiej użyć prostego i łatwiejszego w odbiorze kroju bezszeryfowego. Strona dla dzieci skorzysta na literach o czytelnym, ale miejscami też zabawnym kroju.
Przy kreacji witryny istotne są niuanse. Na znakomitej większości stron spotkamy np. prosty zabieg, jakim jest podświetlanie lub inna delikatna zmiana wyglądu linku, wskazywanego kursorem. Programiści stosują go, bo lubimy, kiedy strony udzielają nam informacji zwrotnej. Wiemy wtedy, że reagują na nasze działania.
Łatwiej też akceptujemy elementy, których znaczenie jest nam już znane z realnego świata. Stąd np. w menu do przewijania zdjęć niemal zawsze znajdziemy strzałki, które spotykamy na co dzień na ulicach.
Za czym wodzimy oczami
Niemałą rolę w projektowaniu stron odgrywa znajomość naszych nawyków. – Lepiej będzie umieścić logo witryny z lewej strony, a okno logowania z prawej, ponieważ większość stron stosuje taki układ i użytkownicy są do niego przyzwyczajeni – wyjaśnia prof. Gdowicz.
Co jeszcze lubimy? Może duży wybór? Otóż nie. Projektanci sklepów internetowych wiedzą, że chętniej wydamy pieniądze, gdy dostaniemy do wyboru 6 rodzajów towaru zamiast 20 czy 30. Będziemy też bardziej usatysfakcjonowani. Okazuje się, że co za dużo to niezdrowo – zbyt szeroki wybór sprawia, że się gubimy. Zjawisko to opisała prof. Sheena Iyengar z Columbia Business School, znana z badań nad psychologią wyboru.
Przypatrzmy się z kolei innej sytuacji: odwiedzamy serwis informacyjny i jedyne, co możemy zrobić, to czytać wiadomości, oglądać filmy, zdjęcia itp. Krótko mówiąc – poziom interaktywności wynosi zero. Jak łatwo się domyślić, nie zabawimy na takiej stronie długo.
Paradoksalnie jednak, witryna z możliwością maksymalnej kontroli zawartości, na której możemy przesuwać i ustawiać poszczególne części, decydować o tym, jakiego rodzaju informacje mają się przed nami pojawiać, zmieniać kolory, a do tego pisać komentarze i własnego bloga, również nas nie przyciągnie. Przed rokiem zespół naukowców z Penn State University wykazał, że najbardziej odpowiada nam złoty środek – najchętniej odwiedzamy witryny o umiarkowanej możliwości wprowadzania własnych zmian. Przy okazji badacze wykazali, że poziom interaktywności w jednej części internetowego serwisu może zachęcić do korzystania z zupełnie innego działu. Na testowanych przez uczonych stronach możliwość dodawania lub usuwania cyfrowych gadżetów, takich jak np. prognoza pogody, sprawiała, że w innych miejscach użytkownicy częściej zostawiali komentarze. Wcześniejsze badania tego samego zespołu pokazały natomiast, że choćby niewielkie poprawienie interaktywności strony zwiększało zaufanie do prowadzących je np. polityków i firm.
Przy projektowaniu stron znaczenie ma wszystko, nawet to, co laik uzna za szczegół. Jeśli ktoś prowadzi stronę z doniesieniami prasowymi, powinien postawić na duże tytuły. W badaniu z użyciem systemu Eyetrack, który śledzi ruchy gałek ocznych internauty, okazało się, że duże, wyraźne tytuły bardziej przykuwają naszą uwagę niż nawet zdjęcia.
Świat jak witryna
Projektanci stron stają już przed kolejnymi wyzwaniami. Internet przyszłości ma płynnie łączyć wirtualne z realnym – już dziś jeśli zapytamy telefon „Jaka będzie jutro pogoda?” albo „Jak trafić do najbliższego urzędu pocztowego”, otrzymamy niemal ludzką odpowiedź. Udzielą nam jej osobiści asystenci Google Now i Siri firmy Apple. Dzięki zaś systemom tzw. rozszerzonej rzeczywistości, znanej jako AR (Aug-
mented Reality), patrząc na restaurację przez kamerę smartfona możemy zobaczyć pobrane z sieci informacje o menu albo o jej wnętrzu. Z kolei kierując aparat na kino czy teatr zobaczymy szczegółowy repertuar, a przed starym zamkiem – średniowiecznego rycerza, który w dodatku z nami porozmawia.
– Dzisiejsza sytuacja rozszerzonej rzeczywistości przypomina trochę tę sprzed kilkunastu lat, kiedy witryny dopiero się rozwijały. Znajdujemy się na początku drogi – mówi Marcin Wichrowski.
I właśnie stawiamy na niej już kolejny duży krok. Wiosną tego roku Google rozpoczęło testy cyfrowych okularów o nazwie Glass. Nieduży wyświetlacz przed prawym okularem nakłada cyfrowy obraz na rzeczywisty widok. Zwiedzając Paryż, możemy zobaczyć mapę miasta albo prognozę pogody. To oczywiście jeszcze nie jest pełne AR – wyświetlane obiekty nie dopełniają kształtów prawdziwego świata.
Umożliwiające to okulary już jednak powstają. Założona przez naukowców z Columbia University firma Meta opracowuje dla nich odpowiednie oprogramowanie. Na stworzonym przez nią filmie demonstracyjnym możemy zobaczyć, jak użytkownik obsługuje „leżącą” na stole wirtualną klawiaturę albo – poruszając ręką w powietrzu – przesuwa stronę www, która widoczna jest dokładnie w oknie apartamentu.
– Jedną z cech rozszerzonej rzeczywistości jest jej działanie w trzech wymiarach, co wymaga nowego podejścia do projektowania – zaznacza prof. Gdowicz. Wizjonerzy nowych technologii, między innymi znany fizyk teoretyk Michio Kaku, zapewniają, że już wkrótce internet nas dosłownie otoczy, a my poczujemy się, jakbyśmy znaleźli się wewnątrz cyfrowego świata. Stanie się tak również dzięki designowi.
Warto wiedzieć:
Poniżej pasa?
Naukowe odkrycia dostarczają niekiedy pomysłów na wręcz nieprzepisowe chwyty. Chcąc zareklamować jakiś produkt w sieci albo zachęcić kogoś do rejestracji, warto umieścić reklamę czy formularz obok zdjęcia, na którym znajduje się ktoś patrzący właśnie w kierunku naszego „haczyka”. Badacze z uniwersytetu w Padwie odkryli, że ludzie podążają za wzrokiem innych, nawet jeśli patrzącą osobę widzą tylko na fotografii. Niewielu z nas zdaje sobie z tego sprawę, dlatego trik jest tak skuteczny.
Oczy i palce
W najbliższej przyszłości popularność mogą zyskać systemy rozpoznawania gestów. Niedawno opracowana, podłączana do biurkowych komputerów przystawka o nazwie Leap śledzi ruchy dłoni i pojedynczych palców. Projektanci stron zostaną więc postawieni przed nowym wyzwaniem opracowania przyjaznego, sterowanego gestykulacją interfejsu. Nad systemami rozumiejącymi gesty pracują również konstruktorzy cyfrowych okularów, które otoczą użytkownika wirtualnym, połączonym z siecią światem.
Dokumenty i media, łączcie się
Pomysł hiperłączy, czyli linków, które prowadzą nas z jednej strony do innej, ma długą historię. Już w 1965 roku zaangażowany w rozwój technologii informatycznych amerykański filozof i socjolog Theodor Holm Nelson opisał pojęcia hipertekstu i hipermediów. Za pierwszy dokument działający w tej technice uważa się wideo-mapę z 1977 roku, stworzoną przez uczonych z legendarnego MIT-u, umożliwiającą wirtualną wycieczkę po Aspen.