Użyteczna ewolucja

Tradycyjne kwestionariusze to rzecz zwyczajna i rutynowa, jednak często widać witryny, gdzie ten problem nie jest opanowany. Więc kilka podstawowych rad poniżej. Nie pisze tu o nowych sposobach budowania kwestionariuszy – w większości wypadków wystarczą stare. O nowych napisze w innym poście.
Kwestionariusze występują to tu, to tam na wielu stronach. Często, w miejscach kluczowych dla naszego biznesu – jak w procesie zakupu, zapisywania się czy budowania profilu.
Rzecz jest prosta, mało seksi i właściwie nie warto robić tego źle, gdyż z błahych niedoróbek wychodzi problem dla użytkowników i poważne konsekwencje ich utraty – dla nas.

Jeden krok na stronę

Warto podzielić proces na pojedyncze, zrozumiałe i powiązane z rzeczywistym światem etapy. Na przykład Dane kontaktowe – służące do kontaktu firmy z użytkownikiem. Dalej Adres dostawy – czyli dane ściśle związane z jedną, węzłową czynnością użytkownika. Kolejne – Dane płatności… etc. etc.

Wizard działa

Każdą czynność umieszczamy na jednej stronie wizarda. Użytkownicy nie mają problemu z chodzeniem do przodu i do tyłu w wizardzie – nawet, jeśli ma wiele stron.
Wypełnione już pola muszą być pamiętane w całym wizardzie  – użytkownikowi nie mogą znikać już wpisane dane, gdy przemieszcza się w wizardzie.

Okruszki

Ścieżka czynności czyli „okruszki” z bajki o Jasiu i Małgosi napisanej przez braci Grimm. Przydają się w wizardzie pod warunkiem, że są krótkie – maksymalnie 5 kroków i opisują całe logiczne bloki czynności. W innym przypadku straszą długością procesu i szczegółami wymagań.
Etapy okruszków nie muszą odpowiadać pojedynczym stronom wizarda. Wręcz przeciwnie – ważne jest zaznaczenie logicznych czynności a nie poszczególnych stron kwestionariusza.

Dominujący przycisk

Na stronie gdzie występują przyciski (szczególnie kwestionariuszowej, ale nie tylko) należy wyraźnie wyróżnić przycisk główny. Przycisk ten realizuje główną funkcję strony. Powinien być jeden. Powinien mieć na sobie fokus, tak by wciśnięcie Enter wciskało go.
Pozostałe przyciski powinny być znacznie gorzej widoczne. W praktyce zwykle projektuję przycisk kolorowy jako główny (niebieski szczególnie jest dobry bo się kojarzy z linkami), a pozostałe przyciski szare lub białe.

Długie i krótkie pola

Długość pól tekstowych i drop downów powinna być dostosowana do spodziewanych danych. Na przykład pole na adres e-mail powinno być długie, pole na kod pocztowy – krótkie, a pole na numer mieszkania – bardzo krótkie.
W wielu projektach kwestionariuszy widzimy pola o równej szerokości – zaprojektowane tak z lenistwa lub ze względów estetycznych. Użytkownik taką estetykę ma w nosie, a przy równych polach może pomylić się i wpisać dane w pole wyżej, lub niżej.

Opisy pól

Opisy pól powinny być jak najbliżej pola – chodzi o to, by użytkownik nie pomylił się i nie uznał, że inne pole przynależy do danego opisu. Dlatego najlepiej opis umieszczać bezpośrednio nad polem. Gdy umieszczamy jest z lewej strony – należy justować je do prawej – tak by przylegały do pola, a nie tkwiły daleko po lewej (szczególnie, gdy mamy długie i bardzo krótkie opisy.

Dodatkowe opisy

Bardzo często warto dodać dodatkowe opisy z wyjaśnieniem możliwych wątpliwości. Wtedy można umieszczać je pod lub po prawej stronie pola. Te napisy powinny być szare – o znacznie mniejszym kontraście niż główne opisy.

Błędy

W zasadzie nie powinienem używać tego określenia – użytkownik nie popełnia błędów. To my się z nim nie dogadujemy. No, czasami popełnia pomyłki .
Komunikat powinien zawierać tylko opis oczekiwanej akcji, nigdy wytykanie czy opisywanie błędu.
Źle: Błąd. Brak adresu e-mail.
Dobrze: Wpisz adres e-mail.
Czerwony komunikat powinien pojawić się pod polem do uzupełnienia. Pole powinno być podświetlone na żółto. Są to kolory alarmowe i zwracające uwagę.
Dodatkowo, na górze kwestionariusza powinien pojawić się komunikat ogólny – użytkownicy czasami nie rozumieją, dlaczego kwestionariusz przeładował się i nic się nie stało (nie zauważają pojedynczego podświetlonego pola).

Sprawdzanie formatu pól

Sprawdzanie zawartości pól sprawia najwięcej kłopotów użytkownikom. Zwykle dlatego, że sprawdzanie to jest zbędne, lub nieintuicyjne. Bardzo często wymagany jest specyficzny format danych, mimo, że użytkownicy mogą wpisywać je na różne sposoby. Opis formatu obok pola zwykle nie jest czytany, a jeśli, to często kłopot, a nie podpowiedź.
Na przykład:
Źle: 23-12-2010 – data musi być zapisana z kreseczkami.
Dobrze: 23-12-2010, 23.12.2010 – użytkownicy nie rozróżniają przerywników i gdy wyskoczy błąd „złej daty”, nie będą wiedzieli dlaczego jest zła – przecież wpisali właściwą. Pomysł, że data może być zła w sensie formatu, a nie merytoryki jest typowym błędem w projektowaniu kwestionariuszy. W przypadku daty lepiej dać wyskakujący kalendarzyk.
Inne przykłady tolerancji sprawdzania pól:
Kod pocztowy: 00-445, 00445;
Numer rachunku bankowego: 12 1234 2345 4567 6789 8976; 1212342345456767898976; 1212342-345456767898976; 1212342 345456767898976.

Sprawdzanie zawartości pól

Sprawdzanie ma zwykle na celu zmniejszenie liczby błędów lub też fałszywych zapisów w naszych bazach. To słaba motywacja – jak ktoś chce podać fałszywe dane lub śmiecie, tylko po to by sprawdzić nasz serwis, to poda fałszywe nawet jak będziemy sprawadzać zawartość.
Za to nękamy i odstraszamy tych co chcą spróbować. To potencjalni klienci. Jak im się spodoba, to zmienią albo założą prawdziwe konto.
Kiedy sprawdzać?
Gdy to ułatwia użytkownikowi wpisywanie danych poprawnych, których na pewno nie chce wpisać źle: numer konta bankowego, hasło (powtórzenie), adres e-mail (czasami powtórzenie).
Nie należy sprawdzać kodu pocztowego, liczby cyfr w telefonie i innych danych, które ktoś może mieć nietypowe (tracimy klienta).

Na przykład pole adresowe podzielone na oddzielne bloki „ulica”, „numer domu” i „mieszkanie” mogą sprawiać kłopoty, jak ktoś mieszka pod dziwnym adresem lub za granicą, gdzie inaczej opisuje się adresy. Zastanówmy, się czy rzeczywiście potrzebujemy takiego rozbicia danych.

Skrót: Estetyczny i wysmakowany projekt graficzny nie pomaga w sukcesie masowych witryn, szczególnie społecznościowych. A nawet może szkodzić. Wyrafinowana grafika oznacza przeznaczenie witryny dla elitarnego odbiorcy – przez to sugeruje zwykłemu – by spadał. Masowy serwis powinien być:

• Banalny, taki jak inne – nie zaskakuje i pozwala łatwo się znaleźć w jego świecie
• Nijaki – pasuje każdemu – nie musisz utożsamiać się z jakąś subkulturą
• Nie za ładny – użytkownik go odwiedza, by robić swoje, a nie oglądać serwis. Wysmakowany oznacza elitarny.
• Milusi (cute) – powinien być miły w dotyku, sympatyczny – poduszeczki i wzruszające ikonki z ludzikami.

Historia Microsoft i Apple: Starzy wrogowie w walce o dusze i portfele właścicieli komputerów osobistych. Końcowy wynik konfliktu jest znany. Windows wygrało z ogromną przewagą. System operacyjny Apple występuje na kilku procentach PC. Dziś ten konflikt wciąż rozpala różne fora o charakterze „religijnym”, choć tak naprawdę dziś jest konfliktem starych technologii. Google, platformy mobilne a przede wszystkim usługowa sieć są gorącym tematem.

Apple zawsze przykładał wielką uwagę do estetycznych projektów urządzeń i wyglądu systemu operacyjnego. Wygląd urządzeń Apple jest elitarny. Większość z nich jest biała, który jest specyficznym kolorem w naszej kulturze. Jest symbolem czystości, elitarności i życia duchowego. Bardzo w stylu Apple. Projekty graficzne ikonek, przycisków i ramek są wysmakowane i minimalistyczne. Podobnie niektóre typowe funkcje interfejsu zakładają rozgarnięcie i inteligencję użytkownika. Taka strategia dla urządzeń pragmatycznych, nudnych i tak bardzo nie osobistych jak PC była samobójcza. Firma z prawie monopolisty rynku w czasach Apple II wylądowała na marginesie.

Ale w urządzeniach małych jest inaczej. Te dotykamy. A w dotyku liczy się perfekcja. No i interfejsy iPoda a szczególnie iPhona są wyjątkowo bezmyślne (dla obsługującego). To i są ładne poduszeczki. Sukces wielki. Ale nawet tu zetknąłem się w Anglii w czasie badań z opiniami części użytkowników, że iPhone jest to urządzenie szpanerskie i obciachowe dla zwykłego człowieka.

Microsoft zaś zajmował się spełnianiem doczesnych i zwyczajnych potrzeb – system ma być tani, używany na każdym sprzęcie tak, że użytkownik mógł wykorzystać wybór odpowiedniego jakościowo komputera do obniżenia kosztu jego zakupu. Grafika posługuje się barwą niebieską – czyli kolorem najbardziej neutralnym, nijakim i pasującym do wszystkiego. Ikonki, ramki motywy graficzne w tłach są elementarnie ładne, banalne i pozbawione jakiejkolwiek oryginalności. System jest rozwijany nie według genialnych intuicji kilku geniuszy, a poprzez ciągłe dostosowanie produktu do możliwości popularnego sprzętu, potrzeb klientów chcących wydać rozsądne pieniądze na komputer. Bardzo ważne było w tym oszczędzanie dotychczasowych wydatków klientów – kompatybilność wsteczna.

W Internecie: Apple v. Microsoft to wyrazisty przykład konfliktu elitarności z ludowością. Więc największe serwisy w Internecie są robione jak Microsoft: Google, Fox News, CNN, Onet, YouTube, Amazon, Facebook… Wszystkie są brzydkie, pragmatyczne, otwarte i zorientowane na użytkownika.

Skrót: Sukces witryny zależy od spełnienia 5 zadań podanych w kolejności wagi. Spełnienie pierwszego zadania, sprawia dopiero, że użytkownik interesuje się kolejnym poziomem.

1. Zrealizuj potrzebą przyjścia (daj, to co chce użytkownik, po co w ogóle przyszedł)
2. Zrealizuj ukryte emocje (a użytkownik się przywiąże i będzie wracał)
3. Z tego samego świata (j.w. czuje się u siebie)
4. Spraw by to sprawnie działało (użyteczność, etc)
5. Przyjemne i estetyczne (grafika, identyfikacja marki, ładność ogólna

W 2003 roku opublikowałem poprzednią wersję tego artykułu. W tamtych czasach rozwoju polskiego Internetu 2 warunkiem był postulat, by witryna w ogóle działała. Był on w tamtych czasach ważny, bo w sieci było mnóstwo witryn tak źle technicznie zaprojektowanych, że po prostu nie działały. Dziś średni poziom projektowania jest znacznie wyższy – witryny działają i stąd zwrócenie uwagi na dodatkową warstwę realizacji potrzeb użytkownika.

O Maslowie: Amerykański psycholog Abraham Maslow zaproponował w połowie XX wieku teorię realizacji potrzeb ludzkich, wpływających na zachowania jednostek. Zaproponował podział potrzeb ludzkich na pięć poziomów. Postulował, że ludzie nie będą realizować potrzeb z poziomu wyższego, dopóki potrzeby z poziomu niższego nie będą zaspokojone w elementarnym zakresie (George Boeree o Maslowie).

Numeruję poziomy od najbardziej podstawowego (1.) – czyli od dołu piramidy. Przyjęto model piramidy, gdyż pokazuje on dobrze „podstawowość” pierwszych poziomów.

Piramida potrzeb Maslowa:

1. Fizjologiczne (powietrze, woda, jedzenie, ciepło…)
2. Bezpieczeństwa (brak zagrożenia fizycznego, pieniądze…)
3. Przynależności (miłość, przyjaźń, rodzina, bliska grupa…)
4. Akceptacji i pozycji (samoakceptacja, pozycja społeczna, uznanie, sława…)
5. Samorealizacji (sztuka, nauka, rozumienie rzeczywistości i innych ludzi…)

Model piramidy potrzeb można użyć także do analizy strony WWW. Przeniesienie piramidy Maslowa wymaga przystosowania do zagadnień percepcji sieci. Pierwotny model ma zastosowanie do ogólnych zachowań człowieka w środowisku i społeczeństwie.

Jest smutnym, że potrzeba rozumienia innych ludzi ląduje tak nisko. W projektowaniu stron objawia się to często całkowitym lekceważeniem, czy też brakiem wysiłku zrozumienia potrzeb użytkownika. Zamiast tego zwycięża 4. – potrzeba własnego sukcesu w grupie wykonawczej J.

Model dla Internetu: Niżej opisuję model użyteczny w projektowaniu i ocenie witryn. Powstał w oparciu o moje doświadczenia przy obserwacji i projektowaniu masowych serwisów (Onet, Merlin, Grono, inne), analizy historii sukcesu innych znanych witryn i obserwacji zachowań użytkowników w czasie badań użyteczności różnorodnych witryn.

Podobnie jak u Maslowa – realizacja przez witrynę celów poziomu wyższego nie ma sensu, gdy nie są zrealizowane cele z niższego. Witryna może sprawiać wrażenia ładnej i atrakcyjnej (szczególnie, gdy ma piękną animację), ale nie będzie często i stale odwiedzana. Nie wytworzy przywiązania i nie pozostawi u użytkownika trwałego wrażenia satysfakcji.

1. Zrealizuj potrzebą przyjścia (daj, to co chce użytkownik, po co w ogóle przyszedł)
2. Zrealizuj ukryte emocje (a użytkownik się przywiąże i będzie wracał)
3. Z tego samego świata (j.w. czuje się u siebie)
4. Spraw by to sprawnie działało (użyteczność, etc)
5. Przyjemne i estetyczne (grafika, identyfikacja marki, ładność ogólna

Witryna musi realizować pierwsze 2 poziomy, by odnieść sukces. I często to wystarcza w zupełności. „Nasza klasa” była (i w dużym zakresie jest) zaprojektowana gorzej niż gorzej pod względem użyteczności. System z rzadka działał na początku istnienia. A jednak odniósł wspaniały sukces. W miarę pojawiania się konkurencyjnych witryn zaczynają mieć znaczenia wyższe poziomy. Gdy podstawowe potrzeby są realizowane przez kilka witryn, użytkownik zaczyna zwracać uwagę na cechy z kolejnych poziomów.

Poniższy model został stworzony od strony potrzeb użytkownika. Witryna zwykle powinna realizować także cele firmy. Gdy cele te są różne, zdarza się niechcący lub świadomie poświęcać skuteczność witryny dla użytkownika, na rzecz skuteczności dla firmy. To jest strategia samobójcza na dłuższy dystans. Zawsze pojawi się konkurent polski lub światowy i użytkownicy uciekną nawet, gdy mamy początkowo wyjątkowy towar.

Gdy nie mamy konkurencji lub pojawiła się zmowa (świadoma lub nie) kartelowa na rynku – można być bardziej bezkarnym w lekceważeniu potrzeb użytkownika.

Poziom 1. Najważniejszy na start

Realizacja potrzeby wejścia

Ludzie wchodzą na stronę z jakiegoś ważnego dla nich powodu, poszukują informacji, rozrywki lub towarzystwa. Jeżeli serwis po prostu nie zawiera tych treści – nie będzie popularny, niezależnie jak będzie np. ładny. To banalne przecież stwierdzenie bardzo często jest lekceważone, szczególnie wtedy, gdy witryna realizuje głównie cele działu marketingu, a nie cele użytkownika. Zdarza się, że w projekcie przykłada się wielką wagę (i wydaje pieniądze) do grafiki, animacji, wyrafinowanych funkcjonalności, bez których twórcy (którzy je wymyślili i są z nich dumni) nie widzą możliwości zaistnienia serwisu.

A tu zawsze trzeba pamiętać o podstawowym celu przyjścia użytkownika – co on uważa za ważne, dlaczego wybrał nasza witryną (nie spośród innych ale zasadniczo dlaczego). Trzeba sobie robić takie ćwiczenia – seanse trzeźwości – gdy wciągnięci i zafascynowani realizujemy projekt życia.

Możliwość odnalezienia głównej treści jest elementem tego poziomu. Obecność na witrynie poszukiwanej, głównej treści (przyczyny wejścia) powinna być sygnalizowana w sposób bezpośredni – przez podanie jej nazwy, linków, kategorii. Nawet jeśli witryna ma mętną strukturę, ale dostęp do głównej informacji sygnalizowany jest elementami, na które łatwo (lub jest to wysoce prawdopodobne) się natknąć – potrzeba z tego poziomu zostanie zrealizowana.

Ten poziom działa zawsze. Dla witryn społecznościowych, informacyjnych czy firmowych. Zawsze trzeba wiedzieć po co ludzie do nas przychodzą. Resztę możemy realizować, jak mamy za dużo pieniędzy.

Poziom 2. Najważniejszy na przyszłość

Realizacja potrzeby emocjonalnej

Większość rzeczy, które robimy ma drugie dno, ukrytą emocję czy niewyrażoną potrzebę. Także użytkownik w sieci tak ma. Deklarowana przyczyna odwiedzania witryny nie zawsze jest trwała. Emocje „nieoficjalne”, które ma obsługiwać witryna należą zwykle do stałego repertuaru charakterystycznego dla naszego gatunku (jak u MaslowaJ):

• Ciekawości i rozrywki (gadgety, ciekawostki, nauka, sztuka, polityka)
• Rozrywki (gry, muzyka, filmy, polityka, celebrities)
• Porównania pozycji społecznej (celebrities, sławne osoby, zwycięzcy, problemy rodzinne i finansowe znanych ludzi)
• Przynależności (zamknięte i otwarte grupy dyskusyjne, czat, blogi z komentarzami, hobby)
• Zdobycia pozycji społecznej (blogi, informacje finansowe, motoryzacja, allegro, serwisy gdzie jest się autorem – foto, muzyka, pisanie, linked-in)
• Akceptacji (najczęściej braku poczucia własnej wartości) (serwisy randkowe z oszukanymi profilami, serwisy pedofilskie, gwałtowne fora dyskusyjne),
• Seksu (randkowe i porno, celebrities, fotograficzne, sklepy z bielizną, fora z tematami towarzyskimi)

Jak łatwo zauważyć, w każdy serwis można wmontować elementy z listy, tak by serwis był bardziej lepki.

Poziom 3.

Witryna jest z mojego świata.

Ten dość ezoteryczny poziom potrzeb jest ważniejszy niż kolejne, w zapewnieniu sukcesu witryny. Ilustruje to częsty sukces witryn zakładanych przez amatorów – zapaleńców tematu, którzy żyją nim i potrafią ten swój świat pokazać - tak, że inni użytkownicy zainteresowani tematem wiedzą, że trafili na swoich i ekspertów. Często jest tak, że twórcy witryny (szczególnie ci odpowiedzialni za jej treści) są w podobnym wieku, mają podobny światopogląd (lub przynajmniej pogląd na funkcje witryny), system wartości, gusta, żywiołowość, pochodzą z podobnego kręgu kulturowego, klasy społecznej etc.

Zapewnienie realizacji tego poziomu jest często trudne dla profesjonalnych zespołów produkcyjnych, ponieważ rzadko zdarza się, że robią oni witryny dla siebie.

Poziom 4.

Wygoda obsługi.

Jak już mamy celową i swojską witrynę, warto by była wygodna w użyciu. I choć użyteczność witryny jest dopiero na czwartym poziomie, warto jednak zwrócić uwagę, że istnieją sytuacje, gdy poprzednie poziomy są podobnie wypełnione przez konkurencję, a ten staje się ważny dla sukcesu witryny.

No i mamy zupełnie nowe podejście do użyteczności w postaci iPhona, gdzie haptyczny interfejs sprawił, że to on jest pożądanym celem posiadania urządzenia. Jednak sytuacje, gdy sam sposób użycia gadgetu jest zabawowy i przyjemny i staje się celem – nie są częste.

Użyteczność ma duże znaczenie w serwisach transakcyjnych, gdzie niemożność zakupienia towaru zaczyna stawać w sprzeczności z realizacją potrzeby z poziomu pierwszego.

Poziom 5.

Przyjemność estetyczna.

Tu, podobnie jak i u oryginalnego Maslowa, potrzeby estetyczne są potrzebą bardzo wysokiego poziomu i przez to w praktyce bardzo mało ważną dla większości użytkowników. W wielu przypadkach w procesie powstawania witryny twórcy nie poradzili sobie z pierwszymi czterem, więc co zmieni realizacja piątego? A jest to na dodatek jeden z najczęstszych problemów w serwisach firmowych. Z jednej strony, dlatego, że większość stron robią graficy, z drugiej też dlatego, że zamawiający, którzy zwykle doskonale znają swoje produkty, podświadomie osobiście nie są zainteresowani treścią serwisu i zwracają głównie uwagę na jego estetykę. Powszechne jest wybieranie firmy projektowej na podstawie ofertowego projektu paru stron serwisu, gdzie z oczywistych względów jego piękno jest głównym kryterium wyboru.

Podobne do przeżycia estetycznego, jest zadziwienie. Twórcy strony mogą umieścić na niej treści lub funkcje, w zasadzie niepotrzebne, ale będące czymś w rodzaju prezentu, dostarczonej przyjemności. Potrzeba zadziwienia może pojawiać się u użytkowników stron firm markowych.