Doświadczenie użytkownika (z ang. user experience, UX) w dzisiejszych czasach wychodzi poza klasyczną definicję. Bo nie chodzi tylko o to, aby klient dobrze się czuł, używając Twojego produktu, chodząc po Twojej stronie czy korzystając z aplikacji, ale także chciał zostać jak najdłużej oraz myślał o tym doświadczeniu nawet po jego ukończeniu. W tym artykule omówię 5 działających zasad UX na stronach www, których implementacja pomoże Ci wyróżnić się na tle konkurencji oraz zbudować silną świadomość marki wśród klientów.
To nie fUX – są na to badania
Przeglądam Facebooka. Nagle moją uwagę przykuwa jedna reklama. Klikam. System przekierowuje mnie do sklepu internetowego. Czekam sekundę, dwie, trzy… Skrypty się ładują. Ok, jest! Moim oczom ukazuje się „piękna” strona, która jest równie kolorowa co wiszące ogrody Semiramidy.
Mnóstwo przypadkowo rozmieszczonych elementów, pop-upy wyskakujące z góry i z boku, mikroskopijna czcionka. A to dopiero początek. Mój umysł nie jest w stanie tego ogarnąć, więc mimo całkiem niezłej kreacji reklamowej, wychodzę i chcę jak najszybciej przesunąć to doświadczenie do poznawczego magazynu zapomnienia.
Spotykam się z taką sytuacją mniej więcej 2-3 razy w tygodniu. A Ty?
UX design powinien być ukierunkowany na…
Właściciele sklepów internetowych tak bardzo skupiają się (bądź nie) na innych elementach, że zapominają o pryncypiach, czyli kliencie. A konkretniej mówiąc – o potrzebach i doświadczeniach klienta.
A przecież bez tego nie ma sprzedaży. Pstrokata, nieintuicyjna i przypominająca barwami Dia de Muertos strona internetowa nie konwertuje. I nawet najcudowniejszy produkt, najbardziej perswazyjny tekst czy gros opinii zadowolonych klientów tego nie uratują.
Dlatego musisz zrobić kilka kroków w tył, przyjrzeć się stronie, czyli wejść w buty klienta docelowego i zadać sobie pytanie: „Co tu jest nie tak?”. A jeszcze lepiej jeśli poprosisz o to potencjalnych klientów lub w ostateczności znajomych czy bliskich. W ten sposób ustalisz, co można poprawić.
Ale na subiektywnych odczuciach się nie kończy. UX ma już kilkadziesiąt lat i na całe szczęście istnieją tysiące badań, które dokładnie pokazują, co należy zrobić i w jaki sposób, aby wizyta klienta na stronie internetowej przebiegła mu przyjemnie i bezawaryjnie.
W skrócie – jest to zbitka wniosków z różnych dziedzin: psychologii, neurobiologii, neuromarketingu czy inżynierii, które pomogą Ci zdefiniować błędy projektowe, funkcjonalne i wizualne na stronie firmy lub podstronach produktów/usług. Możemy je wspólnie omówić?
Prawo Jacoba a user experience
Lepiej Ci się rozmawia z przyjacielem czy nowo poznaną osobą w tramwaju? Wolisz zabrać ważnego partnera biznesowego do znajomej restauracji, w której masz sprawdzone dania czy do zupełnie przypadkowej, której menu nigdy nie widziałeś na oczy?
Ogólnie mamy tendencję do wybierania rzeczy, które już znamy. I nieważne w tym przypadku jest to, czy ktoś jest większym ekstrawertykiem otwartym na doświadczenia. Taka jest nasza ludzka tendencja, bo lubimy rzeczy spójne i porządek w życiu.
Właśnie o tej prawidłowości mówi prawo Jacoba, które wskazuje na to, że użytkownicy lubią spędzać czas na stronach podobnych do tych, które odwiedzili w przeszłości. Bo dzięki temu wiedzą, co gdzie jest i gdzie mają szukać konkretnej informacji.
Dlatego warto projektować stronę w ten sposób, aby jej wzorce były ogólnie znane i powszechne. Wcale to nie oznacza, że strona nie musi być oryginalna, bo w prawie Jacoba nie chodzi o teksty czy design, tylko ogólne działanie.
Pierwszy przykład z brzegu – wchodzisz na stronę i spodziewasz się, że na górze będzie logotyp oraz menu. Brawo! Zdarzają się wyjątki, to jasne. Ale kiedy Twoja firma oferuje usługi stacjonarne, to możesz zakładać, że często odwiedzaną zakładką będzie „kontakt”. To tam użytkownicy będą się kierować w celu umówienia spotkania lub poznania adresu firmy. Jak podać to użytkownikom na tacy? Na większości stron zakładka „kontakt” jest w górnym menu, dlatego nie wyłamuj się z tego schematu i także umieść ją na ostatnim miejscu w górnym menu.
U mnie na stronie menu jest równie intuicyjne.
Zasada ta nie dotyczy wyłącznie menu, tylko większości elementów.
Kiedy dodajesz tekst na kolorowym tle (różniącym się od koloru tła strony), to musisz mieć świadomość, że dla większości osób będzie to jasny sygnał, że mają do czynienia z przyciskiem, który mogą dotknąć (tak jak widzisz poniżej na przykładzie „Zamów egzemplarz”). Przygotuj się na to. Nie projektuj takiego elementu, jeśli nie jest klikalny, bo niepotrzebnie rozproszysz uwagę użytkowników. A jak zaprojektować dobrą stronę i ile osób w to zaangażować? Na to pytanie odpowiedź znajdziesz tutaj: Dobra strona internetowa – Ile osób przy niej pracuje?
Efekt Zeigarnik a design thinking
Składasz zamówienie w restauracji. Kelner pieczołowicie zapisuje na kartce szczegóły, po czym przekazuje ją kucharzowi. Następnie dostarcza dania. Jesz. Kelner zabiera talerze. Lata między stolikami i widzi Twoje spojrzenie. Choć na sali jest grubo ponad setka gości, to wie, że nie zapłaciłeś. Podchodzi, pytając: „Przygotować rachunek?”. Czy jest aż tak łasy na pieniądze? Niekoniecznie. Za wszystkim może stać efekt Zeigarnik.
To zjawisko opisane przez Blumę Zeigarnik w latach 30. XX wieku. W pierwotnym założeniu opisywało, że zadania niewykonane pamiętamy lepiej niż zadania wykonane, co wynikało między innymi z domknięcia poznawczego.
Dzisiejsi psychologowie pod pojęciem efektu Zeigarnik bardziej rozumieją tendencję do lepszego przypominania sobie zadań, których realizację przerwano w trakcie. Natomiast rdzeń efektu został praktycznie ten sam.
Jak to się ma do projektowania UX?
Jeśli jesteś autorem kursu online, to możesz dać uczestnikom możliwość podejrzenia postępu. Dzięki temu będą wiedzieć, ile jeszcze im zostało do „wykonania zadania” i jednocześnie łatwiej wrócą pamięcią i myślami do samej treści w nim przedstawionych (o ile nie będą przerabiali materiału na raz).
Używam tego mechanizmu na swojej platformie do kursów, gdzie wyraźnie pokazuję uczestnikom jakiegokolwiek szkolenia, na jakim etapie są i ile zostało im jeszcze do końca.
Efekt środka sceny w projekcie UX
Ewolucyjnie jesteśmy skazani na patrzenie przed siebie – tak działa nasz wzrok. Kiedy czytasz to zdanie, to w pierwszej kolejności zwracasz uwagę na kolejne litery składające się na litery, które tworzą zdania. Twoja uwaga jest właśnie tutaj i wyraźnie widzisz tylko to. Reszta dookoła jest rozmyta, niewyraźna.
Świetnie to widać na przykładzie widzenia tunelowego. Ale nie chodzi mi o zaburzenie wzroku, tylko fiksację charakterystyczną dla szczególnego rodzaju skupienia.
Masz z nim do czynienia w chwili, gdy jedziesz autem i się zamyślisz. Patrzysz się przed siebie i tylko to widzisz wyraźnie. Reszta jest mało istotna. W ten sposób tworzy się tunel. Nie raz w takich momentach myślisz, czy na pewno na tamtej krzyżówce było zielone światło. To przerażające uczucie, ale jednocześnie bardzo powszechne.
Widzenie tunelowe pojawia się też w przypadku interesującej rozmowy. Nie zwracasz uwagi na otoczenie, tylko patrzysz prosto na rozmówcę. Wszystko, co dzieje się dookoła, nie ma znaczenia. Robiono na ten temat eksperymenty, które pokazywały, że w trakcie interesującej rozmowy możesz ulec fiksacji do tego stopnia, że nawet nie zauważysz, jak osoby trzecie całkowicie zmienią wystrój wnętrza, w którym przebywasz.
Ale co to ma wspólnego z doświadczeniami użytkownika?
Tutaj z odsieczą przychodzi efekt środka sceny. Z racji, że mamy tendencję do patrzenia na wprost, to także lubimy poznawczo trzymać się środka. Kiedy będziesz mieć do wyboru 3 produkty, które są do siebie bardzo zbliżone, to jest spora szansa, że wybierzesz właśnie ten, który jest na środku.
Doskonale wiedzą o tym marketerzy, którzy świadomie umieszczają najbardziej polecane produkty na środku. Możesz kojarzyć to z różnych stron z kursami lub szkoleniami, gdzie masz cennik z trzema produktami obok siebie, ale to właśnie pakiet środkowy jest najbardziej eksponowany. Teraz wiesz, że wcale nie dzieje się tak bez powodu.
Efekt ten wykorzystaliśmy u jednego z naszych klientów – eSign.
Próg Doherty’ego – Krok dalej w budowaniu pożądania klienta
Nie lubisz czekać, co? Pewnie też masz tak jak ja, kiedy otrzymujesz maila od firmy kurierskiej w stylu: „Dzisiaj dostarczymy paczkę”, a w środku jest rzecz, do zakupu której przymierzasz się od kilku tygodni.
Stres, nerwówka i ekscytacja tworzą fenomenalny koktajl emocjonalny, który jednocześnie uwrażliwia Cię na bodźce. Kiedy nagle słyszysz dzwonek telefonu, myślisz, że to kurier. Ale jednak nie… To tylko znajomy z Kołobrzegu. Kiedy słyszysz kroki na klatce, myślisz, że to na pewno kurier dziarsko niosący przesyłkę. Ale niestety nie… To tylko sąsiadka z psem.
Każda kolejna minuta tylko zwiększa to pożądanie.
Ale jednocześnie warto zwrócić uwagę na to, że każda minuta oczekiwania zwiększa też frustrację. I to nawet nie każda minuta, a każda sekunda, a nawet – milisekunda. Szczególnie kiedy mówimy o wolno ładującej się stronie internetowej.
Klikasz coś na stronie. I czekasz. Kółko w przeglądarce kręci się bez przerwy. A Ty czujesz poirytowanie. W końcu wychodzisz ze strony, pozostawiając koszyk. I choć widzisz na Facebooku reklamy remarketingowe zachęcające Cię do powrotu na stronę, dokończenia zakupu i odebraniu 5% rabatu, to nie wracasz, bo… Nie chcesz po raz kolejny przeżywać tej gehenny przepełnionej oczekiwaniem.
Ale jaki jest próg oczekiwania? Hm, tutaj należy wspomnieć o progu Doherty’ego. To on opisuje, że płynna relacja na linii użytkownik-system ma miejsce, kiedy interakcji między nimi zajmuje mniej niż 400 ms.
Dla Ciebie to oznacza, że każda Twoja strona oraz aplikacja powinna ładować się krócej niż 400 ms. Wtedy nie zaburzasz rytmu klienta i jednocześnie nie wzbudzasz w nim frustracji. Wszystko chodzi płynnie, a on może cieszyć się z przebywania na Twoim serwerze.
Prędkość Twojej strony oraz garść innych statystyk dotyczących doświadczeń użytkownika możesz sprawdzić tutaj: https://pagespeed.web.dev/
Prawo Hicka – efektywny marketing zaklęty w liczbach
Masz do wyboru 2 podobne sklepy z praktycznie takimi samymi produktami – dżemami owocowymi. Jest jedna różnica. W pierwszym sklepie masz 6 smaków do wyboru, a w drugim – 24 smaki. Gdzie pójdziesz?
Teraz możemy teoretyzować. Ale naukowcy z Uniwersytetu Columbia to zbadali. Okazało się, że większa ilość dżemów sprawiała, że więcej osób się zatrzymywało przy półce z dżemami. Ale przecież samo zwrócenie uwagi nie przynosi pieniędzy, prawda?
Okazało się, że spośród osób, które zatrzymało się przy półkach z 6 rodzajami dżemów, aż 30% dokonało zakupu. Zaś w drugiej grupie (z 24 dżemami), tylko 3% kupiło.
Wniosek jest prosty – dokonywanie wyborów jest męczące dla mózgu i jednocześnie paraliżujące. Skutecznie odciąga nas od podjęcia decyzji.
I właśnie o tym mówi prawo Hicka. Czas, który mamy na podjęcie decyzji, rośnie wraz z liczbą opcji do wyboru. Dlatego im mniej opcji, tym lepiej. A co ze sklepami, które sprzedają setki, a nawet tysiące produktów.
Tutaj należy czerpać z doświadczenia gigantów, np. Amazona. Pomimo tego, że serwis sprzedaje miliony (szacuje się, że na stronie mają ponad 12 milionów) produktów, to świetnie zarządza doświadczeniem klientów. Dlaczego? Bo produkty są logicznie przyporządkowane do kategorii i jednocześnie bardzo mądrze eksponowane w układzie trójkowym. Allegro z kolei robi przejrzysty listing (jeden pod drugim).
Dlatego ogranicz liczbę opcji na stronie. Jeśli masz duży e-commerce, nie pokazuj wszystkiego na stronie głównej. To zbije klienta z pantałyku i spowoduje paraliż decyzyjny.
Rola strony internetowej w marketingu jest kluczowa. W tym tekście odnoszę się jednak do kwestii UX, czyli wskazówek raczej wizualnych i funkcjonalnych. Jeśli szukasz informacji na temat tego, jak przykuć uwagę czytelników i wykorzystać prawa psychologiczne podczas pisania tekstów, tutaj też coś znajdziesz:
Wskazówki UX designera prosto z kuźni WBIZNES
Na tych pięciu zasadach się nie kończy. Przygotowałem coś extra! Poprosiłem naczelnego designera oraz projektanta UX mojej Agencji Marketingu Internetowego WBIZNES – Darka Rułkę o to, aby podzielił się swoimi doświadczeniami (w końcu zawodowo projektuje doświadczenia dla użytkowników). Zdradził mi kilka praktycznych tipów à propos kierunku odbierania treści i doboru kolorów w procesie projektowania UX.
Kierunek
Najważniejszy przycisk powinien zawsze znajdować się na końcu. Wynika to z kierunku czytania. W naszej kulturze patrzymy zawsze od góry do dołu i od lewej do prawej. Ustawienie najważniejszego CTA na końcu sprawia, że zaoszczędzamy użytkownikowi energii i czasu na cofanie się do poprzedniego przycisku. A jak wiadomo, na stronie internetowej liczy się każda milisekunda.
Zaaplikuj tę zasadę w swoich formularzach i pop-up’ach, a nawet komunikatach o ciasteczkach na stronie. W końcu trzeba zrobić dobre pierwsze wrażenie.
Aby ułatwić użytkownikom wypełnienie formularzy, zamiast tworzyć różne skomplikowane układy, ułóż poszczególne ich elementy jeden pod drugim. Znacznie łatwiej jest zapoznać się z jedno kolumnowym układem treści. Co więcej, nie pozostawiaj pola do interpretacji co do kolejności pozycji. W takim układzie trudniej o przeoczenie któregoś z punktów.
Kolor
Stopniując wagę tekstów na stronie, warto zachować odpowiedni kontrast pomiędzy nagłówkami i akapitami tekstu. Aby tego dokonać, nagłówkom zazwyczaj nadajemy jaśniejszy kolor niż dłuższym tekstom.
Często popełnianym błędem jest wykorzystywanie różnych odcieni czystej czerni, co powoduje, że strona sprawia wrażenie mdłej. Lepszym rozwiązaniem jest wykorzystanie jaśniejszego odcienia tła. Przykładowo, jeżeli tekst znajduje się na granatowym tle, w nagłówku wykorzystaj biel, natomiast w dłuższym tekście — jaśniejszy odcień tła (w tym wypadku szarość wynikającą z koloru granatowego).
Projektując sekcje, bądź elementy z większą ilością klikalnych elementów, należy zadbać o to, aby były one wyraźnie zróżnicowane. W przeciwnym razie użytkownik nie będzie wiedział, w który przycisk powinien kliknąć.
Aby zapobiec wywołaniu uczucia dezorientacji u użytkownika, powinniśmy zaprojektować różny wygląd przycisków w zależności od ich wagi. W tym wypadku najważniejszy jest przycisk „Dodaj do koszyka”, zaraz po nim „Kategoria”, która przenosi do wszystkich produktów z tej kategorii, a na końcu „Usuń z koszyka”, bo przecież na tym zależy nam najmniej.
Częstym problemem w sytuacjach, w których chcemy zastosować odpowiedni color code do poszczególnych elementów jest zachowanie odpowiedniej estetyki elementów w wielu kolorach i jednoczesne trzymanie się norm WCAG2.
Dobrym pomysłem na poradzenie sobie z tym problemem jest zastosowanie jasnego tła w odpowiednim kolorze i ciemnego tekstu, któremu nadamy ciemniejszy odcień tego samego koloru. Dzięki temu zachowamy odpowiednie walory estetyczne, rozróżnimy poszczególne elementy i w większym stopniu dogodzimy algorytmowi WCAG2.
Czas na cienie. Jest to szczegół, ale na pewno poprawi wygląd strony internetowej. W naturze nie występują cienie składające się wyłącznie z czerni z tego powodu, że naturalne światło nigdy nie jest białe. W pochmurny dzień światło przybiera zimne barwy w odcieniach błękitu, natomiast w słoneczne jest bardziej ciepłe — żółte, a co za tym idzie, cień też zmienia swój kolor.
Wykorzystanie odcieni błękitu (zamiast czystej czerni w efekcie cienia na stronie internetowej) sprawia, że wyglądają one mniej mdło i bardziej naturalnie.
Czym jest UX i komu to potrzebne?
Projektowanie strony internetowej lub aplikacji mobilnej, interfejsu użytkownika, portfolio, brandingu i marketingu, a nawet zwykłego maila to coś więcej niż efekt WOW. Nieprzypadkowo do najważniejszych elementów projektu UX zalicza się:
- Zdefiniowanie potrzeb użytkowników
- Obsługa na urządzeniach mobilnych
- Klikalność elementów strony
Choć to tylko 3 z kilkunastu czynników, które warto wziąć pod uwagę, nawet te są często bagatelizowane, odsiewane podczas projektowania pod pretekstem „A po co to robić?”. Jednak teraz wiesz, że skoro UX z psychologicznego punktu widzenia może wspomóc Twoje działania, to czemu tego nie wykorzystać, prawda?
Poczuj marketingowy lUXus
Zasady UX to zbiór praktyk, które możesz wykorzystywać w interfejsach, prototypach, projektach graficznych, makietach, produktach cyfrowych, aplikacji mobilnej, a nawet architekturze informacji. Finalnie zależy nam przecież na jednym – by klient kupił. Uwzględniając powyższe prawa, potrzeby użytkowników i trochę sprytu możesz sprawić, że obiektywna funkcjonalność wpłynie na subiektywną użyteczność projektów, co w przypadku dobrego projektu stron www jest super ważne.
Kiedy znasz zasady UX, lepiej znasz zachowania klientów. A kiedy lepiej znasz zachowania klientów, lepiej sprzedajesz. Czyli kiedy lepiej znasz UX, lepiej sprzedajesz. To prosty sylogizm, z którym trudno się spierać. Pytanie do Ciebie – którą technikę wykorzystasz jako pierwszą, aby poprawić swoje wyniki?
