User Experience w e-commerce – jak poprawić konwersję dzięki UX

Nie od dziś znamy pojęcie określane jako SXO stanowiące połączenie SEO (Search Engine Optimization), UX (User Experience) oraz CRO (Conversion Rate Optimization). W ogólnym skrócie jego założeniem jest nie tylko pozyskanie potencjalnego klienta z organicznych wyników wyszukiwania, lecz także jego późniejsze zatrzymanie na stronie i doprowadzenie do konwersji. Może to być zarówno zakup, wypełnienie konkretnego formularza lub chociażby pobranie jakiegoś dokumentu.

Główną zaletą stron dostosowanych pod kątem użyteczności jest możliwość poprawy wskaźnika konwersji, a tym samym wzrost generowanych przychodów. Szybka, intuicyjna i łatwa w obsłudze strona www pozwoli zmniejszyć liczbę osób, które opuszczą nasz serwis bez dokonania konwersji. Zadbanie o UX na etapie projektowania i tworzenia strony, pomoże ograniczyć w przyszłości koszty testów, analiz oraz poprawek na stronie. Zyskujemy zatem podwójnie, ponieważ oprócz szansy na zwiększenie zysków, możemy także ograniczyć nasze wydatki.

W zeszłym tygodniu odbyły CEE Mobile Web Days – specjalny event zorganizowany przez Google obejmujący darmowe webinary poświęcone optymalizacji stron www pod kątem urządzeń mobilnych. Specjaliści z branży starali się przybliżyć najważniejsze informacje i wskazówki odnośnie dostosowania stron do urządzeń mobilnych, zarówno pod kątem szybkości jak i User experience. Specjalnie dla Was przygotowaliśmy podsumowanie najważniejszych informacji, w którym dzisiaj skupiliśmy się głównie na temacie UX. Zapraszamy do lektury.

Problemy z UX – jak wykryć?

Audyt UX

Chcąc wykryć problemy na naszej stronie www pod kątem UX, pierwszą opcją jest oczywiście skorzystanie z usług dostępnych na rynku agencji tudzież specjalistów oferujących przeprowadzenie kompleksowych audytów, które z pewnością dostarczą mnóstwo ciekawych i przydatnych rekomendacji. Alternatywą może być jednak także poproszenie grupy znajomych lub współpracowników o wykonanie jakiegoś prostego zadania na Twojej stronie. Jeśli przykładowo posiadasz sklep internetowy z telefonami i akcesoriami GSM, może to być chociażby znalezienie wymarzonego modelu smartfona.

Poproś uczestników testu o szczerą opinię i komentarz na temat obsługi strony oraz wskazanie ewentualnych elementów, miejsc lub funkcjonalności, które sprawiły im najwięcej problemu. Każdą z sesji nagraj, dzięki czemu zyskasz dodatkowe źródło informacji do późniejszej analizy. Zebrane dane warto podzielić w zależności od typu strony, poczynając od strony głównej, poprzez kategorie produktów, karty produktowe, a kończąc na koszyku i dokonanym zakupie. W ten sposób będzie Ci o wiele łatwiej określić, który krok ścieżki zakupowej sprawia najwięcej problemów Twoim potencjalnym klientom.

Analiza statystyk

Nieco innym sposobem na wykrycie potencjalnych problemów na stronie pod kątem UX będzie dokładna analiza ruchu mobilnego generowanego przez stronę oraz zestawienie go z konwersjami. Często zdarza się, że choć urządzenia mobilne generują o wiele więcej ruchu na stronie, to właśnie wersja komputerowa znacznie lepiej sprzedaje. W takim przypadku problemem najczęściej jest właśnie niedostosowanie strony do urządzeń mobilnych pod kątem szybkości oraz UX. Skutkiem tego nawet jeśli użytkownicy trafiają na Twoją stronę za pomocą smartfonów, z powodu licznych problemów z jej obsługą, zakupu dokonują na wersji komputerowej lub nie dokonują go wcale i przechodzą do konkurencji.

Zachowanie klientów online i bariery pod kątem UX

Mnóstwo ludzi przegląda strony za pomocą smartfonów jadąc w pociągu, czekając na autobus, korzystając z serwisów społecznościowych lub po prostu dla zabicia czasu. W każdej z tych sytuacji szybkie wczytanie oraz wygodne zaprezentowanie zawartości Twojej strony internetowej jest kluczowe. Powolna, trudna w obsłudze i nieresponsywna strona irytuje użytkowników i prowadzi do utraty potencjalnej konwersji. Twoja strona powinna działać bezproblemowo, aby jej użytkownicy mogli ekspresowo otrzymać pożądane informacje.

Część klientów przeglądając strony na urządzeniach mobilnych często tylko sprawdza daną ofertę, usługi, dostępne opcje i ceny, a samego zakupu dokonuje na wersji komputerowej lub osobiście w sklepie stacjonarnym. Bardzo często powodem takiej sytuacji jest bariera w postaci problemów z UX, do których możemy zaliczyć:

1. Męczące scrollowanie – przeglądając zawartość długich stron internetowych i chcąc zmienić filtry dla wyświetlanych produktów, często konieczne jest ręczne przewinięcie strony do samej góry. Użytkownicy nie lubią scrollowania, lepszym rozwiązaniem będzie „pływający” pasek filtrów, cały czas widoczny w dolnej części ekranu. Testy pokazują, że w ten sposób możemy zwiększyć długość pojedynczych sesji na stronie.
2. Porównywanie produktów (upewnianie się w decyzji) – możliwość szybkiego i wygodnego porównania produktów na stronie jest niezwykle ważne dla klientów online i pomaga upewnić się w decyzji zakupowej. Jeśli nie umożliwisz takiej opcji lub funkcjonalność nie zostanie dobrze zaprojektowana, stracisz potencjalnych klientów.
3. Odpowiednia prezentacja produktów – użytkownicy online przed dokonaniem zakupu chcą być w 100% pewni tego co kupują. Umieszczenie na stronie faktycznego zdjęcia produktu lub pokoju do wynajęcia to absolutny must-have. Oprócz tego wypróbuj także prezentacje 3d lub krótkie filmy video prezentujące dany produkt.
4. Niekompletne informacje o dostępności i kosztach – informacje o dostępności oraz kosztach dostawy muszą być widoczne od samego początku, a nie w ostatnim kroku ścieżki zakupowej.
5. Brak autouzupełniania – w formularzach na stronie wykorzystuj funkcję autouzupełniania, która pozwoli na ograniczenie wszelkich literówek i błędów, a także przyśpieszy proces wypełniania poszczególnych pól i przyczyni się do poprawy konwersji.

UX w ścieżce zakupowej

Menu główne

Dla większości stron internetowych zdecydowanie najwięcej kliknięć generuje główne menu, za pomocą którego użytkownicy sprawdzają co oferujemy oraz wyszukują pożądanych informacji, usług lub produktów. Tym samym to właśnie tutaj najczęściej zaczyna się ścieżka zakupowa dla naszych potencjalnych klientów. Menu na wersji mobilnej często zastępowane jest przez tzw. hamburger, w którym poszczególne kategorie są ukrywane. W związku z tym warto pomyśleć nad dodatkowym sposobem na zaprezentowanie najważniejszych kategorii lub podstron.

Często wykorzystywanym rozwiązaniem na wersji mobilnej jest menu w formie relacji/historii znanych np. z Instagrama lub jako klasyczny slajder. Testy pokazują, że pokazana w ten sposób lista kategorii na stronie głównej pozytywnie wpływa na wzrost konwersji. Dając użytkownikom więcej opcji znalezienia poszukiwanych przez nich produktów, zwiększamy szansę na konwersję. Jeśli ścieżka zakupowa będzie zbyt skomplikowana, użytkownicy mogą się w niej zgubić i nie dokonać zakupu.

Wyszukiwarka wewnętrzna

Nieco innym sposobem nawigacji na stronie jest wewnętrzna wyszukiwarka, której prawidłowa struktura oraz działanie to klucz do zwiększenia konwersji. Z wyszukiwarki korzystają przede wszystkim klienci zdecydowani, którzy wiedząc czego konkretnie szukają i co chcą kupić, przez co znacznie częściej konwertują (dokonują zakupu) niż klienci korzystający z menu głównego.

Cechy prawidłowo zbudowanej wyszukiwarki:

• dobrze widoczny pasek wyszukiwania – testy pokazują, że zamiast małej lupy w rogu menu, znacznie lepszym rozwiązaniem jest umieszczenie w nim pełnego pola wyszukiwarki, co przekłada się na wzrost konwersji;
• synonimy – wyszukiwarka powinna być w stanie zwrócić odpowiednie wyniki na podstawie synonimów oraz różnych form dla wpisanego zapytania;
• autouzupełnianie i poprawki literówek – niezwykle pomocne w szczególności dla dłuższych zapytań;
• alternatywne produkty dla braku wyników – nigdy nie zostawiaj klienta z niczym, w przypadku braku wyników na dane zapytanie, zawsze staraj się zaprezentować chociażby powiązane wyniki;
• zoptymalizowane filtry – na stronie wyników wyszukiwania warto wdrożyć moduł filtrowania, który pozwoli dodatkowo zawęzić zwrócone wyniki i znaleźć pożądany produkt;

Ważne: zawsze optymalizuj obie ścieżki zakupowe, zarówno tę, w której użytkownik przechodzi przez kategorie i różne filtry zanim trafi na produkt docelowy, jak i tę w której korzysta z wewnętrznej wyszukiwarki.

Porównywarka produktów

Każdy klient przed dokonaniem zakupu porównuje dany produkt z innymi dostępnymi na rynku, w szczególności w przypadku zakupów online. Właśnie dlatego porównywarka, zaraz obok wyszukiwarki, jest jedną z najważniejszych funkcjonalności na stronie z punktu widzenia UX oraz CRO.

Wdrażając porównywarkę pamiętaj o jej odpowiedniej budowie oraz funkcjach. Klient musi szybko dostać jasną informację czym konkretnie różnią się poszczególne produkty. Świetnym sposobem na ułatwienie wyboru produktu będzie wyróżnienie 2-3 najważniejszych funkcji różniących dane produkty na poziomie listingu. Jest to niezwykle ważne w szczególności na wersji mobilnej strony, gdzie nie ma miejsca na zaprezentowanie ich kompletnej listy. Porównywane produkty powinny być zawsze widoczne na ekranie, bez konieczności przewijania zawartości wyświetlacza (poziomy slajder). Zamiast rozbudowanych widoków, stosuj proste, klasyczne tabele, zawierające konkretne „suche” dane na temat obu urządzeń.

Strona mobilna vs aplikacja

Posiadając zarówno stronę www jak i aplikację mobilną, pamiętaj, aby zawsze inwestować i wdrażać te same zalecenia na obu platformach. Klienci mają w zwyczaju przechodzić z jednej na drugą i z powrotem. Aż 21% użytkowników, którzy zaczynają research na stronie w wersji mobilnej, kończą swój zakup za pośrednictwem aplikacji. Sprawdź jak Twoi klienci szukają informacji i produktów, które oferujesz, jak dokonują zakupu, jak wchodzą w interakcję z Twoim brandem i bądź tam, gdzie są Twoi klienci.

Wieloplatformowa optymalizacja pod UX

1. Optymalizuj ścieżkę zakupową pomiędzy platformami – daj użytkownikowi szansę na poznanie Twojej strony, za wszelką cenę unikaj pop-upów, a jeśli musisz, wyświetlaj je we właściwym momencie, np. po wykonaniu jakiegoś zadania, nigdy losowo. Wyświetlanie ogromnego okna pop-up z zachętą do pobrania Twojej aplikacji bezpośrednio po wejściu na stronę nie jest dobrą praktyką. Zamiast tego stosuj mniejsze, dobrze widoczne banery, wyglądające jak jej integralna część, a nie irytujący dodatek. Nie zapomnij dodać jasnej i konkretnej informacji, dlaczego warto w tym momencie zainstalować aplikację, używaj chwytliwych ikon i symbolów. Dodając na stronie takie funkcjonalności jak Lista życzeń lub Ulubione produkty upewnij się, że są one zintegrowane i dostępne zarówno z poziomu strony jak i aplikacji.
2. Konsekwentny design – jeśli posiadasz stronę www oraz aplikację, używaj tego samego designu dla obu platform. Podobnie przygotowując aplikację na różne systemy, np. iOS i Android, Twoja strona i aplikacja powinna wyglądać i działać tak samo. Punkt ten jest ważny w szczególności dla nawigacji na stronie, która powinna być skonstruowana w ten sam sposób.
3. (Krótsza) koncentracja uwagi – podczas korzystania z urządzeń mobilnych użytkownik może się bardzo łatwo rozproszyć i przerwać zakupy, np. dostając SMS, telefon lub powiadomienie push up. W związku z tym projektując strony i aplikacje mobilne niezwykle istotne jest, aby maksymalnie zainteresować użytkownika i skupić jego uwagę. Priorytetyzuj elementy na stronie, w szczególności dla części above the fold, gdzie powinny znaleźć się Twoje propozycje wartości, przycisk CTA i przyciągające uwagę zdjęcia, np. oferowanych produktów.
4. Postrzegana szybkość strony – z powodu wielu bodźców zewnętrznych, które mogą odwrócić uwagę internautów korzystających ze smartfonów, niezwykle istotne jest, aby w 100% wykorzystać czas użytkownika obecnego na naszej stronie. Oprócz samego przyśpieszenia strony bądź aplikacji, korzystaj z różnych rozwiązań, informujących użytkowników, że na stronie cały czas coś się dzieje. Na przykładzie wczytywania kolejnych elementów strony, mogą to być animacje pokazujące postęp wczytywania się serwisu. W ten sposób zajmiemy i odwrócimy uwagę użytkowników, zmniejszając ryzyko opuszczenia strony.
5. Ergonomia mobilna – nie wszyscy zdajemy sobie sprawę jak istotna jest dolna część ekranu na urządzeniach mobilnych. Z uwagi na obsługę smartfona za pomocą kciuka, jest to idealne miejsce na dodatkowe menu na stronie, przyciski nawigacyjne, ale także istotne CTA, przyciski, małe pop-upy.
6. Tryb offline – dla strony www oraz aplikacji przygotuj specjalne widoki dedykowane dla trybu offline, co umożliwi użytkownikowi interakcję z Twoim brandem nawet podczas chwilowej utraty połączenia z Internetem. W takich sytuacjach warto wyświetlić użytkownikom krótki komunikat z opcją kontaktu, np. nr telefonu.

Co jeszcze wpływa na UX?

Checklista podczas optymalizacji strony pod UX:

1. Kluczowe CTA widoczne bez scrollowania – tak istotne elementy karty produktowej jak cena oraz przycisk „Dodaj do koszyka” powinny być dobrze wyróżnione i widoczne zaraz po wejściu na daną stronę (above the fold). Podczas scrollowania warto wykorzystać wspomniany już pływający pasek (floating bar), dzięki czemu cena oraz przycisk będą cały czas na widoku,  a umieszczone w nim przyciski, w zasięgu kciuka, którym najczęściej obsługujemy smartfon.
2. Szybka rejestracja z wykorzystaniem zewnętrznych kont – proces założenia konta na stronie powinien zajmować jak najmniej czasu i być możliwie najprostszy. Dodaj możliwość ekspresowej rejestracji z wykorzystaniem kont w ramach Facebook’a, Gmail’a, Linkedin’a itd. W ten sposób znacznie przyśpieszysz proces rejestracji i zmniejszysz prawdopodobieństwo wystąpienia ewentualnych błędów podczas wypełniania danych. Zwróć uwagę, że podczas zakupów na urządzeniach mobilnych użytkownicy często są już zalogowani np. do swojego konta Gmail w przeglądarce.
3. Odpowiednio oznaczone błędy w formularzach – wszelkie błędy podczas wypełniania formularzy na stronie powinny być od razu oznaczane. Oprócz standardowego czerwonego koloru, warto wykorzystywać także ikony i symbole, które dodatkowo zwrócą uwagę klientów (np. wykrzyknik lub krzyżyk). Pamiętaj, że pośród Twoich klientów mogą trafić się osoby z wadami wzroku (np. daltonizm). Po wysłaniu błędnie wypełnionego formularza przewiń od razu stronę do problematycznego miejsca, razem z krótkim komentarzem.
4. Propozycja wartości (standardy usług) – wyróżnij na stronie zalety Twojego sklepu/strony oraz oferowanych produktów/usług (value proposition). Informacje te powinny być widoczne dla użytkownika przez cały czas, tj. zarówno na stronie głównej, jak i z poziomu kategorii i kart produktowych. Na karcie produktowej dobrze jest umieścić je w pobliżu przycisku „Dodaj do koszyka”, co może pozytywnie wpłynąć na decyzje zakupowe. Nie zawsze cena decyduje o zakupach, ale też jakość usług i oferowane korzyści, np. ekspresowa wysyłka, szybka dostawa, bezpłatny zwrot itd. Pokaż klientowi, dlaczego powinien dokonać zakupu w Twoim sklepie, a nie u konkurencji i wskaż co zyskuje.
5. Odpowiedni typ klawiatury dla liczb – upewnij się czy pola w formularzu na stronie służące do wprowadzania liczb zostały odpowiednio zaprogramowane (kod pocztowy, nr telefonu, liczba produktów). Po ich wybraniu na urządzeniu użytkownika powinna być wywoływana klawiatura numeryczna z dużymi łatwo klikalnymi przyciskami zamiast domyślnego alfabetu. Takie rozwiązanie znacznie ułatwi prawidłowe wypełnienie formularza oraz ograniczy potencjalne błędy w zamówieniach.
6. Ograniczona nawigacja w koszyku – ogranicz nawigację na stronie na poziomie koszyka do elementów bezpośrednio z nim związanych, zmniejszając ryzyko opuszczenia koszyka bez dokonania zakupu. Dobrym pomysłem będzie ukrycie menu głównego lub linku do strony głównej, aby maksymalnie skupić uwagę użytkownika na koszyku i dokończeniu procesu zakupu.
7. Pełne i przejrzyste informacje na temat dostawy – dodaj na stronie pełne informacje na temat dostępności produktów, terminu, kosztów i form dostawy. Informacje te powinny być cały czas widoczne, najlepiej już obok przycisku „Dodaj do koszyka”. Klienci nie lubią negatywnych niespodzianek w postaci dodatkowych, początkowo ukrytych kosztów, które zostają im przedstawione dopiero w ostatnim kroku ścieżki zakupowej, co często przeważa o decyzji zakupowej.

Podsumowanie

Przed wdrożeniem jakichkolwiek większych zmian na stronie zawsze warto przeprowadzić testy A/B, aby sprawdzić które z nich bardziej przypadnie do gustu Twoim klientom. Wybierając konkretne narzędzie do testów A/B, dobrze, aby umożliwiało integrację danych z Google Analytics. Świetnym wyborem tutaj chociażby darmowy Google Optimize.

Testy A/B checklista:

• minimalny czas trwania – 2 tygodnie
• minimalna liczba osiągniętych konwersji – 200
• przygotowuj 2-3 różne rozwiązania danego problemu
• testuj na różnych rynkach
• przeprowadzaj 1 test jednocześnie
• nie testuj w czasie świąt, okresów wyprzedaży, itp.
• dokumentuj wyniki badań i testów
• testuj nowe narzędzia i funkcjonalności
• mierz jak zmiany UX wpływają na konwersje

Prawidłowe dostosowanie strony do urządzeń mobilnych często bywa trudnym zadaniem, gdyż posiadają one znacznie mniejsze ekrany niż komputery stacjonarne lub laptopy, przez co mamy mniejsze pole manewru. Optymalizacja strony pod kątem UX pozwala na wzrost współczynnika konwersji, generowanych przychodów oraz spadek współczynnika odrzuceń. Potencjalny klient po wejściu na stronę internetową musi zostać zachęcony do zakupu i zapewniony, że trafił we właściwe miejsce.

Najważniejsze czynniki wskazywane przez użytkowników podczas przeglądania stron na urządzeniach mobilnych to głównie szybkość strony oraz to jak szybko znaleźli poszukiwane informacje. Znacznie mniejszą uwagę internauci przykładają chociażby do wyglądu serwisu, nad którym często spędzamy długie godziny, dopracowując i projektując stronę. Jak widzimy, czasem warto pójść w nieco innym kierunku i postawić nie tylko na atrakcyjną szatę graficzną, lecz na szybkie, bezproblemowe i intuicyjne rozwiązania, które ułatwia zakupy Twoim klientom.

Potrzebujesz konsultacji lub audytu SEO?

Skontaktuj się