Temat User Experience powinien zainteresować każdego, komu zależy na optymalizacji ruchu na stronie. Zadbanie o doświadczenia użytkowników podczas korzystania z naszej strony internetowej pozytywnie wpływa na konwersję, czyli np. zakup, zapis do newslettera, udostępnienie treści czy wysłanie zapytania ofertowego.
Poniżej przedstawiamy dziesięć uniwersalnych zasad UX, które powinieneś wziąć pod uwagę, projektując stronę internetową.
1. Uwzględnij urządzenia mobilne w projektowaniu
Dane zebrane przez Google nie pozostawiają wątpliwości: 58% polskich internautów równie często przegląda sieć przy użyciu smartfonów, co za pomocą komputerów i laptopów, a 26% wybiera małe ekrany chętniej niż duże (dane z Google Consumer Barometer, stan na: 24 V 2018 r.). W Europie Zachodniej i USA odsetek użytkowników preferujących urządzenia mobilne jest jeszcze większy: w Stanach jest to 35%, w Wielkiej Brytanii 32%, a w Niemczech i Francji odpowiednio 33% i 34%. Natomiast w krajach takich jak Indie i Chiny to aż ¾ wszystkich Internautów.
Dlatego dostosowanie prac projektowych zarówno do potrzeb użytkowników desktopów, jak i właścicieli smartfonów, nie jest już tylko „dobrą praktyką” – obecnie stanowi po prostu konieczność.
Google rekomenduje i wspiera w tym zakresie trzy rozwiązania:
- Elastyczne projektowanie witryn (czyli tworzenie tzw. stron responsywnych) – strony automatycznie dostosowują się do rozmiarów ekranu i rodzaju urządzenia. To proste i skuteczne rozwiązanie, idealne dla większości właścicieli stron internetowych.
- Dynamiczne wyświetlanie treści – to rozwiązanie polegające na prezentowaniu odmiennej treści w zależności od rodzaju urządzenia po stronie klienta. Polecane firmom, które nie mogą zrezygnować z jakości materiałów wyświetlanych na desktopie na rzecz szybkości ładowania się strony na urządzeniach mobilnych.
- Osobne adresy URL – strona w wersji mobilnej znajduje się pod innym adresem niż strona w wersji desktopowej. Przy odwiedzinach ze smartfona następuje automatyczne przekierowanie na stronę mobilną. Rekomendowane w sytuacjach, w których do budowy strony mobilnej chcemy zastosować inną technologię niż w przypadku desktopowej.
2. Uprość architekturę informacji
Tzw. zasada trzech kliknięć oznacza, że każda podstrona Twojej strony internetowej powinna znajdować się co najwyżej w odległości trzech kliknięć od strony głównej, tj. że powinna być dostępna najdalej z podstrony kategorii lub podkategorii. Dzięki temu użytkownik z łatwością znajdzie te treści, których nie potrafi znaleźć za pomocą znajdującej się na Twojej stronie wyszukiwarki. Jest to szczególnie ważne w przypadku e-sklepów, gdzie użytkownicy często szukają produktów np. po zastosowaniach, a nie nazwach.
Uproszczenie architektury informacji oznacza również stworzenie przejrzystej i intuicyjnej mapy strony. Zadbać należy o komfort poruszania się w witrynie, np. paginacja w artykułach (najczęściej mająca na celu zwiększenie liczby wyświetleń reklam) sprawdzi się tylko przy bardzo dobrze zoptymalizowanym kodzie strony. W przeciwnym wypadku czas oczekiwania na załadowanie się kolejnej podstrony może okazać się za długi. Za stosowanie zabiegów tego rodzaju wielokrotnie krytykowano nawet bardzo popularne strony internetowe jak np. Yahoo!.
3. Nie stosuj funkcji utrudniających nawigację
Wyskakujące okienka, niewyróżniające się na tle strony przyciski i linki – wszystkie te rozwiązania znacząco obniżają komfort korzystania ze strony. W szczególności te pierwsze – wyskakujące okienka – okazują się szczególnie irytujące. Istnieją znacznie skuteczniejsze sposoby, żeby nakłonić użytkowników do zapisu do newslettera albo zakupu; najlepsze z nich oparte są na zapewnieniu wartości dodanej (np. „Zapisz się do newslettera i pobierz darmowy e-book lub raport”).
4. Zoptymalizuj wyszukiwanie wewnątrz witryny
Usprawnienia, które mogą poprawić doświadczenie użytkowników to m.in.: autouzupełnianie, ograniczenie wstępnej listy wyników do najpopularniejszych produktów, wyszukiwanie wewnątrz witryny, możliwość dodania produktu do koszyka z poziomu listy produktów, a także rozpoznawanie błędów przy wyszukiwaniu (żeby użytkownik nie musiał poprawiać literówek albo wpisywać zapytania ponownie). Ze względu na coraz większą liczbę witryn stosujących tego rodzaju rozwiązania, optymalizacja wyszukiwania wewnątrz witryny staje się już standardem, dlatego jej brak może okazać się poważną wadą.
Warto tu zauważyć, że wszystkie te funkcje okazują się szczególnie istotne w przypadku urządzeń mobilnych. Użytkownik smartfona z pewnością doceni i wykorzysta funkcję autouzupełniania podczas wyszukiwania danego produktu; podobną zaletą może być również możliwość dodania produktu do koszyka z poziomu listy wyników wyszukiwania – zwłaszcza przy wolniejszych sieciach komórkowych. Rozpoznawanie błędów w pisowni to obecnie w zasadzie standard – funkcję tę zaimplementowano już we wszystkich największych e-sklepach i platformach e-commerce na świecie (Amazon, eBay, Alibaba, a nawet Allegro); korzystają z niej również mniejsze witryny (np. Zalando).
5. Uprość checkout
Porzucone na etapie checkoutu koszyki zakupowe są problemem niejednego właściciela e-biznesu. W wielu wypadkach wystarczy jednak odpowiednie zaprojektowanie całego procesu – oszczędzi nam to wydatków na późniejszy remarketing, SMS-y z przypomnieniami o „smutnym koszyku” czy nękające użytkowników mailingi. Najlepiej zastosować następujące zasady:
- minimalizacja liczby pól formularza – wymagajmy od użytkownika tylko tych danych, które są nam konieczne do realizacji umowy;
- rozbicie formularza na więcej stron w przypadku większej liczby danych – w takiej sytuacji dobrze jest też poinformować użytkownika o dokładnej liczbie kroków, które musi jeszcze wykonać (np. za pomocą grafiki obrazującej kolejne kroki na górze strony);
- zapewnienie różnych możliwości dokonania płatności – to kluczowa sprawa. Jeżeli po wypełnieniu wszystkich niezbędnych pól użytkownik dowiaduje się, że nie może zapłacić w preferowany przez siebie sposób, to szanse, że nie zdecyduje się na inny wzrastają;
- automatyczne uzupełnianie formularza dla zarejestrowanych – ale z możliwością zmiany (w razie gdyby użytkownik chciał zmienić adres wysyłki).
Jeżeli chcesz dowiedzieć się na temat projektowania procesu zakupowego pod urządzenia mobilne, zapraszamy do naszego artykłu: Jak zaprojektować lepszy proces zakupowy na urządzeniach mobilnych?
6. Zadbaj o odpowiednie rozmieszczenie tekstu na stronie
Badania eye-trackingowe pokazują, że czytając strony internetowe, użytkownicy trzymają się głównie lewej górnej części strony; mapa cieplna oglądanych przez nich obszarów układa się w charakterystyczny kształt litery F. Wielu projektantów stron internetowych wykorzystuje to w najprostszy z możliwych sposobów: umieszczając w tych rejonach widgety mediów społecznościowych, a nawet elementy ofertowe.
Rozmieszczenie tekstu (i, ogólnie, wszystkich elementów) na stronie internetowej powinno być uwarunkowane również własną analizą. Dobrym pomysłem jest regularne sprawdzanie, w jaki sposób użytkownicy poruszają się po stronie; co pomoże nam sprawdzić, czy oparty na wcześniejszych założeniach projekt pomaga realizować cele biznesowe. Z wartościowych narzędzi warto wymienić m.in. popularnego Hotjara, Crazy Egg, Kissmetrics czy Smartlook. Pozwalają one zweryfikować, w jaki sposób użytkownicy wchodzą w interakcję ze stroną. Wyniki z badań przeprowadzonych za ich pomocą są świetnym wsparciem dla danych analitycznych (pozyskiwanych np. poprzez Google Analytics, Adobe Analytics, Piwik) i ułatwiają podejmowanie decyzji o kierunku ew. zmian na stronie.
7. Umożliwiaj rejestrację, ale jej nie wymagaj
Z badań przeprowadzonych przez Baymard Institute w 2017 r. stan na: 4 VI 2018 r. wynika, że wymaganie od użytkowników rejestracji w celu zamknięcia transakcji przyczynia się aż do 37% wszystkich porzuceń koszyków. Wyżej na liście powodów znajdują się już tylko nieprzejrzyste lub zawyżone koszty transakcji.
Benefity związane z rejestracją powinny stanowić zachętę, a nie konieczność. Wymaganie rejestracji już na starcie pozbawia nas możliwości dotarcia do tych użytkowników, którzy nie chcą jej dokonać.
8. Zadbaj o szybkość ładowania strony
Znalezienie rozsądnej wypadkowej pomiędzy dobrym wyglądem a szybkością ładowania się strony nie stanowi obecnie dużego problemu: najnowsze technologie webdeweloperskie umożliwiają pogodzenie tych dwóch interesów. Dobór odpowiednich rozwiązań technologicznych powinien mieć miejsce już na etapie projektowania witryny.
Szybkość ładowania nadal stanowi natomiast problem mobilnych wersji witryn. W przypadku mobile zalecamy przede wszystkim usunięcie niepotrzebnych funkcji, np. sliderów czy karuzel postów, skrócenie listy tzw. zasobów krytycznych (czyli koniecznych do wyświetlenia strony) oraz zastosowanie zaawansowanych technik kompresji. Z pomocą w badaniu szybkości ładowania witryny przychodzi narzędzie od Google, Test Your Mobile Website Speed and Performance, które pozwoli zweryfikować, ile czasu zajmuje pełne wczytanie strony w wersji mobilnej i wygenerować prosty raport dotyczący najpoważniejszych problemów. Dokładniejszą diagnozę dla wszystkich pobieranych z serwera zasobów możemy natomiast przeprowadzić za pomocą narzędzi dla programistów (w przeglądarce Google Chrome dostępnych pod kombinacją klawiszy Ctrl+Shift+I).
9. Zadbaj o chwytliwe Call To Action i umieść je w dobrze widocznym miejscu
Nie licząc podstawowej zasady kontrastu – CTA musi być dobrze widoczne na tle pozostałej treści – nie istnieją uniwersalne reguły dotyczące wyglądu i umieszczenia przycisku CTA na desktopie. Warto przetestować kilka wariantów i wybrać ten najlepszy dla Twojej witryny – np. za pomocą bardzo popularnych testów A/B, testując jednocześnie tylko jeden z elementów (np. tylko kolor, tylko rozmieszczenie).
Dużo łatwiej jest w przypadku mobile. Tutaj zasady dotyczą przede wszystkim widoczności: CTA musi być widoczne od razu i wprost informować, czego oczekujemy od użytkownika (a zarazem – czego użytkownik może spodziewać się po naciśnięciu przycisku). Przycisk musi być też łatwy do kliknięcia – małe ekrany są dużo mniej precyzyjne niż duże. Podstawową zasadą jest prostota: np. „Wejdź!”, „Zobacz!”, „Kup!”, ew. „Dowiedz się więcej…”.
Warto również mieć na uwadze różnicę pomiędzy CTA kontekstowym i pozakontekstowym. Pozakontekstowe CTA nie wymaga od użytkownika znajomości treści strony; to wszystkie przyciski z rodzaju „Kup teraz!” czy „Dodaj do koszyka”. Treść kontekstowych CTA jest natomiast uzależniona od treści strony – i wymaga jej znajomości. To komunikaty w rodzaju „Zgadzam się”, „Zrób to”, a nawet zwyczajne „Tak”/„Nie”. Stosując je, należy pamiętać o jednoznaczności komunikatu i przyzwyczajeniach użytkowników.
10. Informuj użytkowników o wykonaniu pożądanych przez nich działań
Dobry przykład: jeżeli ktoś chce dodać produkt do koszyka, to powinien zostać poinformowany o wykonaniu działania, np. krótką i nienachalną animacją lub dźwiękiem, albo przynajmniej niewielką cyfrą reprezentującą liczbę dodanych produktów pojawiającą się obok ikony koszyka. Informowanie, że użytkownikowi powiodło się wykonanie pożądanego zadania, pozwoli uniknąć sytuacji, w której np. dodaje on ten sam produkt do koszyka parę razy (albo musi przerywać zakupy w celu sprawdzenia, czy się udało).
Podsumowanie
Projektując witrynę, powinniśmy zawsze skupiać się na celu, w jakim odwiedzają ją użytkownicy, i sposobach, jakimi zazwyczaj go realizują (np. kupując w innych e-sklepach). Bardzo ważnym elementem prac projektowych jest benchmarkowanie konkurencji – dokładne sprawdzenie, które rozwiązania zyskują na popularności, a które znajdują się w trendzie spadkowym. Większość użytkowników jest przyzwyczajona, że kliknięcie w logo w górnej części strony przenosi ich do głównej części witryny. Możliwe, że z czasem będą się pojawiały inne rozwiązania, do których będziemy się przyzwyczaili.
Przeczytaj również
W ostatnich latach na intensywny i dynamiczny rozwój e-commerce…
Na początku każdego roku dokonujemy przeglądu najlepszych praktyk i…
