Co to jest UX i dlaczego jest ważne dla Twojego e-sklepu? (część I)

Słyszałeś kiedyś, że pierwsze wrażenie jest najważniejsze? Ta sama zasada dotyczy sklepów internetowych. Łatwość użytkowania, przejrzysty wygląd strony oraz jego dostosowanie do grupy docelowej – to tylko niektóre czynniki, które składają się na pozytywny UX e-sklepu. Co oznacza ten skrót, jaki ma wpływ na funkcjonowanie Twojego biznesu i o czym musisz pamiętać? Przeczytasz o tym w poniższym artykule.

ux sklepu internetowego

Co to jest UX?

UX to skrót z angielskiego user experience, czyli, tłumacząc dosłownie, doświadczenie użytkownika i jego wrażenia z interakcji z produktem. Najczęściej dotyczy kontaktów z oprogramowaniem czy stronami internetowymi – naturalną koleją rzeczy jest więc coraz większe znaczenie UX również w e-commerce. Budowanie pozytywnych doświadczeń polega w tym przypadku na wygodnym korzystaniu z witryny sklepu internetowego na każdym etapie procesu zakupowego.

Innymi słowy, dobrze zaprojektowane UX to takie, które sprawia, że klient nie ma problemu z odnalezieniem interesujących go produktów, dodaniem ich do koszyka, wyborem metody dostawy czy dokonaniem płatności. Umożliwienie użytkownikowi bezproblemowego dokonania zakupu to, rzecz jasna, większa szansa na jego powrót do Twojego sklepu i mniejsza na przejście do konkurencji.

Co więcej, UX od przyszłego roku będzie miało duży wpływ na pozycję strony w wyszukiwarce Google. Wszystko za sprawą zaplanowanej na maj aktualizacji algorytmu i wzbogacenie go o Page Experience – więcej na ten temat pisaliśmy już na blogu.

Choć oczywiście sama wysoka pozycja w Google jest ważna, to aby móc ją maksymalnie wykorzystać, musisz zadbać o to, by użytkownik nie tylko wszedł na stronę Twojego sklepu, lecz także faktycznie coś w nim kupił. Temu właśnie służy projektowanie UX.

Co wpływa na UX sklepu internetowego?

Dostosowanie wyglądu strony do grupy odbiorców

Zgodnie z pierwotną definicją, user experience ma za zadanie dostosowanie m.in. oprogramowania, interfejsu i treści strony do logiki postępowania człowieka. Jednak aby faktycznie móc to założenie spełnić, musisz dobrze znać swojego klienta i grupę docelową. Żadna, choćby najpiękniej wyglądająca strona sklepu nie zachęci użytkownika do dokonania zakupu, jeśli komunikacja i użyteczność nie będzie dostosowana do potrzeb konsumenta. I tak, inaczej będzie wyglądać komunikacja w sklepie z modą dla dojrzałych kobiet, inaczej w takim ze sprzętem do wspinaczki, a w jeszcze inny sposób – w sklepie z zabawkami dla dzieci.

Zanim więc zlecisz zaprojektowanie UX (lub podejmiesz się tego samodzielnie), zbadaj i przeanalizuj, kto najczęściej kupuje w Twoim sklepie internetowym. Pamiętaj, że w kwestii tej nie chodzi wyłącznie o elementy graficzne, kolorystykę czy język, jakim będziesz kierował treści do użytkownika, lecz także choćby możliwość wyboru rozmiaru czcionki, która okaże się przydatna dla osób starszych lub z wadami wzroku. Poza tym korzystanie ze strony powinno być intuicyjne, a klient nie powinien zastanawiać się, gdzie szukać danego produktu lub jaką akcję wywoła kliknięcie w dany przycisk.

💡Coraz większa liczba klientów e-sklepów decyduje się na zakupy przez smartfona. Dlatego też poza wersją desktopową Twojej strony, zadbaj o czytelność i przejrzystość tej mobilnej.

Wygląd i elementy graficzne

Slidery i banery

Wiele sklepów internetowych na stronie głównej wita użytkowników sliderem, czyli karuzelą przewijającą zdjęcia, po kliknięciu w które zostaje przeniesiony na konkretną podstronę. Możesz na nim umieścić choćby informacje o bieżących promocjach czy skierować do najpopularniejszych kategorii produktów.

slider sephora

Slider na stronie głównej sklepu Sephora.

W przypadku sliderów ważny jest czas, po którym zmienia się widoczne na nim zdjęcie. Daj użytkownikowi kilka sekund na to, by zapoznać się z wyświetlanymi treściami, a równocześnie ograniczaj długość komunikatów, by klient faktycznie mógł je zobaczyć. W przypadku widocznego powyżej slidera na stronie Sephory, zdjęcia nie przesuwają się automatycznie, a robi to sam użytkownik, klikając w dowolnym czasie w widoczne po bokach strzałki.

To zresztą kolejny element ważny na sliderze – odpowiednia nawigacja. Brak strzałek czy często stosowanych kropek symbolizujących kolejne slajdy to duży błąd. Pozwalają one bowiem użytkownikowi samodzielnie wrócić do interesującego go elementu. Pamiętaj jednak, by symbole nawigacji nie zasłaniały treści cennych dla klienta.

Kolejnym elementem graficznym, jaki możesz zastosować na stronie głównej sklepu, są banery. Jeśli decydujesz się na oba elementy, to najlepiej, jeśli banery będą znajdować się bliżej punktu przewinięcia strony, wyraźnie poniżej slidera.

slider i banery sephora

Banery na stronie głównej sklepu Sephora.

💡Czasem mniej znaczy więcej. Dlatego też unikaj przesycenia strony głównej dużymi elementami graficznymi, jeśli nie mają one żadnej korzyści dla użytkownika.

W przykładzie powyżej widzimy banery informujące o najnowszej promocji i propozycje prezentów świątecznych. Dobrym pomysłem może być też zaprezentowanie w takiej formie najnowszej kolekcji czy bestsellerów w Twoim sklepie.

Zdjęcia

Kolejnym czynnikiem wpływającym na pozytywne UX są zdjęcia produktów – zarówno na stronie samego produktu, jak i kategorii. Te oczywiście, w obu wspomnianych przypadkach, powinny być wysokiej jakości i szybko się ładować.

📚Przeczytaj też: Zdjęcia produktu, które sprzedają - 10 praktycznych wskazówek

Zacznijmy od zdjęć na stronach kategorii. W tym miejscu powinieneś pokazać różne warianty produktu – np. kolorystyczne czy rozmiarowe. W ciekawy sposób robi to Zalando. Po najechaniu kursorem na dane zdjęcie, poniżej widzimy informacje o innych wersjach danego towaru.

warianty produktów Zalando

Zdjęcie na stronie kategorii w sklepie Zalando przed i po najechaniu kursorem z prezentacją wariantów produktów. Zauważ, że po tej akcji zmieniła się też sama fotografia.

Dobrą praktyką jest też pokazanie zastosowania danego produktu – to szczególnie ważne w przypadku sklepów z odzieżą czy obuwiem. Zamiast wstawiać zdjęcie sukienki, zaprezentuj ją na modelce. Aby jednak strona kategorii nie była zbyt monotonna, zastosuj fotografie, w których modelka przyjmuje inne pozy lub na których pojawia się inna osoba – np. tak, jak zrobił to H&M:

zastosowanie produktu H&M

Pokazanie zastosowania produktu na stronie kategorii w sklepie H&M. Widoczne z tego poziomu są też dostępne warianty kolorystyczne artykułów.

Zastosowanie produktu możesz zaprezentować też na samej stronie głównej – jak zrobiła to Ikea. Widzimy tam zdjęcia z aranżacjami z użyciem mebli i akcesoriów ze sklepu. Jeśli najedziemy kursorem na dany element wyposażenia, zobaczymy jego nazwę i po jednym kliknięciu przeniesiemy się na jego kartę produktu:

ikea

Ikea robi to dobrze!

Jeśli zaś chodzi o stronę samego produktu, to pokaż na niej zdjęcia robione z różnych kątów. Możesz zaprezentować je zarówno w formie karuzeli, jak i statycznej, w której użytkownik samodzielnie wybiera interesującą go fotografię:

zdjęcie na stronie produktu

Zdjęcia na stronie produktu w sklepie ASOS.

Strona produktu to także dobre miejsce na pokazanie jego zastosowania. Pamiętaj, żeby dać użytkownikowi możliwość powiększenia fotografii.

Niektóre sklepy, aby jeszcze lepiej pokazać możliwości oferowanych towarów, decydują się na umieszczenie na karcie produktu zdjęć 360°, a nawet krótkich filmów.

wideo produktu

Nawigacja i poruszanie się po stronie

Jednym z kluczowych elementów wpływających na pozytywne UX, a co za tym idzie – zwiększenie konwersji, jest dobrze zbudowany pasek nawigacji. Powinien on być widoczny na każdej stronie w sklepie, a najlepsza praktyka to umieszczanie go na samej górze.

Zadbaj więc, by w pasku nawigacji znalazły się kategorie produktowe najwyższego rzędu, wyszukiwarka, możliwość logowania lub rejestracji oraz link do koszyka.

Wyszukiwarka

Jak wspomniałam wcześniej, wyszukiwarka powinna być widoczna zarówno na stronie głównej, jak i na karcie produktu. Najlepszą praktyką będzie umieszczenie dość szerokiego pola, by użytkownik nie musiał zbyt długo szukać możliwości znalezienia konkretnego towaru.

Aby przyspieszyć proces zakupowy, a także by klient mógł znaleźć szukany artykuł bez większego wysiłku, umieść na stronie wyszukiwarkę z autouzupełnianiem. Możesz też np. sugerować wybór produktów po samym kliknięciu w pole wyszukiwania – jak np. robi to Decathlon:

wyszukiwarka

Wyszukiwarka na stronie sklepu Decathlon.

Jak widzisz, narzędzie podpowiada zarówno frazy wyszukiwane niedawno przez samego użytkownika, lecz także proponuje popularne w ostatnim czasie kategorie. Obok zaś widzimy przykłady produktów odpowiadających zapytaniu.

Kategorie

Odpowiednio zbudowane drzewo kategorii to jeden z kluczowych czynników wpływających na właściwą nawigację w sklepie internetowym. Pamiętaj bowiem, że nie każdy klient korzysta z wyszukiwarki lub wchodzi na Twoją stronę z konkretną potrzebą – może też przecież szukać inspiracji lub przejrzeć asortyment. Dlatego tak ważne jest, by dostęp do kategorii był łatwy z każdego miejsca w e-sklepie.

W pasku nawigacji powinny znaleźć się odnośniki do kategorii najwyższego rzędu, a więc te najbardziej ogólne. Po rozwinięciu danej kategorii użytkownik będzie mógł zawęzić grupę produktów. Możesz w tym miejscu także wyróżnić kategorie niższego rzędu, które są obecnie najczęściej wyszukiwane:

kategorie

Lista podkategorii po rozwinięciu kategorii najwyższego rzędu. Obok listy widzimy odnośniki do trzech popularnych grup produktów w formie graficznej.

Pamiętaj, by dostosowywać drzewo kategorii do obecnego asortymentu sklepu. Element ten powinien być aktualizowany oraz elastyczny – w końcu poszczególne grupy produktów z czasem mogą ulegać zmianie.

optymalizacja logistyki e-commerce

Filtry i sortowanie

Kolejnym naturalnym etapem przy wyszukiwaniu produktów w sklepie jest ich filtrowanie. Jak dużo filtrów powinieneś uwzględnić na stronie sklepu? Odpowiedź zależy oczywiście od asortymentu. Wybieraj filtry najbardziej intuicyjne dla danej grupy produktów – jak cena (możesz dać użytkownikowi możliwość wyboru przedziału kwot lub za pomocą suwaka), kolor, rozmiar, skład, rodzaj czy marka. Jednym z filtrów może być też pokazanie wyłącznie produktów będących obecnie w promocji.

filtrowanie media markt

Filtrowanie na stronie kategorii w sklepie Media Markt. Na samej górze widzimy najpopularniejsze filtry dla danej grupy produktów, po lewej stronie - możliwość zawężenia poszukiwań według bardziej szczegółowych kryteriów.

Umieszczenie jak największej liczby filtrów to korzyść dla klienta, który może dokładnie zawęzić pole poszukiwania. Wystrzegaj się jednak sytuacji, w których działanie to zakończy się wyświetleniem pustej strony, bez jakichkolwiek produktów.

Inna kwestia to umiejscowienie panelu z filtrami. Te najczęściej występują w lewej części strony, jednak wiele sklepów decyduje się też na miejsce nad listą produktów, w formie rozwijanej listy. Dzięki temu użytkownik nie musi przesuwać strony, by wybrać odpowiedni filtr.

filtrowanie douglas

Filtrowanie produktów na stronie sklepu Douglas.

W poszukiwaniu właściwego produktu pomóc może również sortowanie listy artykułów według wybranych przez klienta kryteriów. Możliwość ułożenia produktów według np. ceny, popularności czy oceny użytkowników powinna pojawić się w górnej części strony.

Koszyk

Dobrze zaprojektowany pod względem UX sklep internetowy to taki, w którym klient ma dostęp i wgląd do koszyka na każdym etapie procesu zakupowego. Dlatego tak istotne jest umieszczenie tego odnośnika w nawigacji.

📚Przeczytaj też: Jak zwiększyć wartość koszyka zakupowego? 5 porad

Co więcej, użytkownik powinien dostawać bieżącą informację na temat liczby produktów w koszyku oraz ich wartości, dlatego element ten powinien się automatycznie aktualizować po dodaniu kolejnego artykułu. Dobrą praktyką jest pokazywanie zawartości koszyka po najechaniu na odpowiedni symbol w nawigacji:

koszyk nawigacja zara home

Podgląd koszyka w panelu nawigacyjnym w sklepie Zara Home z wyróżnioną opcją przeniesienia się na jego stronę oraz informacją o kwocie brakującej do darmowej dostawy.

Aby jeszcze bardziej zachęcić klientów do umieszczenia kolejnych artykułów w koszyku, na każdej podstronie powinien być widoczny kod rabatowy, informacja o promocji czy zachęta do zapisu na newsletter. Pamiętaj jednak, by ta nie zasłaniała ważnych dla użytkownika treści i nie zajmowała zbyt dużo miejsca, ale wciąż była wyróżniona – np. innym kolorem czcionki czy tłem.

baner newsletter

Baner zachęcający do zapisu na newsletter w sklepie NA-KD widoczny na stronie kategorii produktów.

To jeszcze nie wszystkie elementy, które wpływają na pozytywne UX w sklepie internetowym! O kolejnych czynnikach wartych wzięcia pod uwagę przeczytasz w drugiej części artykułu.

0 komentarzy