Budowa sklepu – UX

Z tego rozdziału dowiesz się:

• co to jest UX i jaki ma wpływ na SEO,
• jakie są wskaźniki, które pomogą ocenić UX strony,
• co to jest ścieżka zakupowa,
• jakie elementy i funkcje umieszczone na stronie wspierają lepsze doświadczenia użytkowników.

UX – doświadczenie użytkownika w sklepie internetowym

Każdy z nas woli korzystać ze sklepów internetowych, w których poruszanie się, wyszukiwanie produktów oraz samo dokonywanie zakupów sprawia przyjemność, a nie kłopot. Przyjaźnie skonstruowane witryny pozwalają na szybkie znalezienie upragnionego towaru, dokładne obejrzenie go dzięki wysokiej jakości zdjęciom i przeprowadzenie bezpiecznej transakcji. Właśnie dlatego podczas projektowania stron i sklepów internetowych coraz częściej zwraca się uwagę na doświadczenie użytkownika (UX – ang. user experience).

Dlaczego UX dla SEO?

Mówiąc o doświadczeniu użytkownika, skupiamy się nie tylko na elementach wizualnych witryny oraz łatwości poruszania się na niej – odpowiednio zaprojektowany sklep będzie nie tylko „ładny i przejrzysty”, ale pozwoli nam w prosty i intuicyjny sposób wykonać wszystkie działania, takie jak dodanie produktów do koszyka czy zrealizowanie wygodnej płatności. UX czyli user experience to wszystko, co składa się na nasze doświadczenie ze sklepem internetowym (ale i nie tylko – także z innymi stronami, aplikacjami, interfejsem produktów życia codziennego itd.) – czyli m.in. nasze odczucia wizualne oraz emocje. Jeżeli sklep internetowy został stworzony zgodnie z zasadami UX – czyli jest atrakcyjny, użyteczny, intuicyjny i wywołuje u odwiedzających osób pozytywne emocje – użytkownicy będą chcieli do niego wracać i robić w nim zakupy.

W poniższym rozdziale poruszamy oczywiście temat UX, który skupia się na samym sklepie internetowym i jego przystosowaniu do potrzeb Klienta, jednak trzeba pamiętać, że doświadczenie użytkownika związane z zakupami online jest o wiele szersze. Obejmuje również obsługę po odbytej transakcji, relacje z Klientem czy też wrażenia dotyczące ewentualnego serwisu lub reklamacji produktu. To jednak temat na zupełnie inny e-book.

Co więc łączy UX i SEO? Sklep internetowy odpowiednio zoptymalizowany zgodnie z zasadami SEO przyciągnie użytkowników na stronę, ale jeśli nie będzie przyjazny, a jego obsługa intuicyjna, na pewno nie utrzyma Klientów na tyle długo, by dokonali zakupów. Co więcej, trendy jasno pokazują, że Google wspiera pozycjonowanie tych witryn, które charakteryzują się wysoką użytecznością (ang. usability). W rankingu wyszukiwarki znaczenie mają także wszelkie informacje pochodzące od użytkowników (m.in. czas jaki spędzają na danej stronie, jakie następują ich interakcje ze stroną), co pokazuje, że znaczenie UX rośnie i będzie rosło – także jeśli chodzi o pozycjonowanie stron.

Wskaźniki UX

Wprowadzenie zmian pod kątem UX to jedno, ale skąd będziemy mieć pewność, że modyfikacje rzeczywiście działają? Pomocą służyć będzie kilka podstawowych wskaźników, które znajdziesz w Google Analytics i które pokażą nam, czy wdrożone zmiany przynoszą zakładane efekty, m.in.:

• Bounce rate (współczynnik odrzuceń) to nic innego jak liczba osób, które weszły na naszą stronę, ponieważ uważały, że właśnie na niej znajdą to, czego szukają, i niestety opuściły ją, nie wykonując żadnej akcji. Jeśli użytkownik odwiedził nawet tylko jedną podstronę serwisu, ale wykonał na niej jakieś działanie – np. zostawił swój adres mailowy w newsletterze lub pobrał plik PDF ze specyfikacją produktu – to jego sesja nie będzie traktowana jako odrzucona.
• Czas / sesja to wskaźnik, który pokazuje nam, ile czasu użytkownicy spędzają na naszej stronie podczas jednego wejścia na nią – czyli tak zwanej sesji. Im dłuższy jest ten czas, tym lepiej – oczywiście, o ile poświęcają go rzeczywiście na przeglądanie produktów, a nie tylko na „walkę” ze znalezieniem odpowiednich towarów.
• Konwersja to magiczne słowo, o którym słyszał każdy właściciel sklepu internetowego. Określa ono konkretne, oczekiwane działanie, którego użytkownik dokonuje w sklepie (zapisanie się do newslettera, dokonanie zakupu itd. – tak naprawdę dla każdego z nas może to być coś innego, ponieważ nasze potrzeby są różne). Liczba osób, które odwiedziły nasz serwis internetowy i dokonały zamierzonego przez nas działania, to tak zwany współczynnik konwersji. Mierzy się go, dzieląc liczbę konwersji przez liczbę użytkowników sklepu i mnożąc otrzymany wynik razy 100%. Dobrze zaprojektowany sklep często charakteryzuje się większym współczynnikiem konwersji, ponieważ zachęca do odwiedzin i ułatwia dokonywanie zamierzonych przez właściciela sklepu działań.

Ścieżka zakupowa

Aby zaprojektować sklep internetowy zgodnie ze standardami UX, powinniśmy poznać sposób, w jaki Klienci szukają pożądanych przez nich informacji – zarówno na naszej stronie, jak i w wyszukiwarce. Tzw. „ścieżka zakupowa” (czyli wszystko to, co prowadzi do podjęcia decyzji o zakupie aż do jego dokonania) najczęściej będzie zależeć od stopnia wiedzy użytkownika oraz jego zdecydowania. Osoba, która jeszcze nie wie, co dokładnie zamierza kupić, zacznie od ogólnych fraz i stopniowo będzie kierować się ku szczegółom. Przykładowo – jeśli kieruje nami chęć kupienia tapety do naszego salonu, to zapewne pierwszym hasłem jakie wpiszemy w wyszukiwarkę będzie właśnie słowo „tapety”. Szybko zobaczymy, że liczba wyników jest zdecydowanie za duża i chcąc trafić jeszcze lepiej, musimy uszczegółowić hasło. Fraza „zielona tapeta w paski” da nam w miarę dokładny wynik, jednak jeśli jeszcze lepiej znamy produkt, który chcemy kupić, możemy sprecyzować zapytanie. Po wpisaniu „flizelinowa zielona tapeta w paski” mamy największe szanse na znalezienie dokładnie tego, czego szukamy, ponieważ w takim zapytaniu podajemy, kolor, wzór, materiał i rodzaj produktu.

Po wyszukaniu i znalezieniu upragnionego produktu użytkownik prawdopodobnie będzie chciał go kupić, a naszym zadaniem jest jak największe ułatwienie mu tego procesu. W przypadku gdy Klient kliknie „Kup” lub „Dodaj do koszyka”, powinniśmy mu przedstawić jasny wybór – realizację danego zamówienia lub kontynuowanie zakupów w naszym sklepie.

Jeśli użytkownik wybierze złożenie zamówienia, to niezwłocznie powinniśmy go przenieść do strony podsumowania zamówienia, gdzie zobaczy zestawienie wybranych przez siebie produktów, wybierze płatność, a także metodę dostawy. Zadbajmy też o to, by mógł dokonać zakupu bez rejestracji konta – wymóg rejestracji jest często powodem porzuceniem koszyka przez użytkowników – dana osoba może nie mieć na rejestrację czasu lub po prostu nie chcieć jej wykonać). Warto podkreślić zalety, jakie wynikają z posiadania konta w naszym serwisie, jak zrobiono to na stronie Answear, jednak ostateczną decyzję należy pozostawić Klientowi.

Jeżeli jednak Klient zdecyduje się kontynuować zakupy, to koniecznie zapewnijmy mu możliwość podglądu i edycji koszyka bez przymusu opuszczania danej podstrony. Dzięki temu nie będzie musiał przechodzić do koszyka wtedy, gdy będzie chciał zobaczyć podsumowanie kosztów lub edytować zamówienie i np. podmienić produkty. Jeśli realizujemy darmową dostawę od konkretnej kwoty, również umieśćmy tę informację w podglądzie koszyka – Klienci często wolą kupić więcej produktów, a oszczędzić na ich przesyłce.

Po tym, jak Klient przejdzie do koszyka, również mu pomóżmy, np. podczas wypełniania formularza kontaktowego. Zadbajmy choćby o funkcję autouzupełniania – szczególnie jeśli nie są to pierwsze zakupy danego użytkownika na naszej stronie –  oraz walidację w czasie rzeczywistym (ang. Inline Validation). Walidacja powoduje, że jeśli któreś pole nie jest prawidłowo wypełnione (np. numer telefonu jest za krótki lub adres e-mail nie zawiera znaku @), to użytkownik od razu się o tym dowie i będzie mógł poprawić swoje niedopatrzenie natychmiast. Uchroni go to przed koniecznością wypełniania całego formularza ponownie.

Wyszukiwarka produktów

Wyszukiwarka produktów to niezwykle przydatne narzędzie, które pomaga Klientom w prosty sposób znaleźć interesujący ich produkt. Sprawia, że nie muszą przechodzić przez kategorie i podkategorie sklepu, wystarczy za to jedynie wpisać konkretną nazwę we wskazane pole. Sklepową wyszukiwarkę również możemy dostosować tak, by wspierała doświadczenie Klienta. Warto zadbać o to, aby sama podpowiada użytkownikom towary, które są dostępne w sklepie. Doskonale widać to na poniższym przykładzie: wyszukiwarka Drogerii Pigment prezentuje najpopularniejsze produkty, które odpowiadają wpisywanej frazie. Jeśli na widocznej liście użytkownik nie znajdzie pożądanego towaru, może oczywiście kliknąć ikonkę lupy lub przycisk „Więcej produktów” i zobaczyć pełne wyniki.

W przypadku niektórych typów produktów, zwłaszcza technicznych, podczas wyszukiwania nie będzie wystarczać sama nazwa produktu, dlatego warto zawrzeć możliwość wprowadzenia dodatkowych danych. Doskonale poradził sobie z tym portal Oponeo, który udostępnia użytkownikom wyszukiwarkę opon według konkretnego rozmiaru lub modelu samochodu. Klienci mogą także od razu określić szerokość, profil oraz średnicę poszukiwanych artykułów. Dzięki takim opcjom produkty wyszukają zarówno osoby zaznajomione z tematem, jak i te, które nie mają wiedzy na temat walorów technicznych.

Koniecznie zadbajmy także o dobre umiejscowienie paska wyszukiwarki – Klienci nie powinni mieć najmniejszych problemów z jego znalezieniem. Użytkownicy Internetu są przyzwyczajeni, że najczęściej takie pole znajduje się w górnej części strony i prawdopodobnie właśnie tam będą go szukać. Warto pamiętać również o oznaczeniu go ikonką lupki oraz umieszczeniu na pasku tekstu „Szukaj”. Możemy od razu zapewnić Klientom możliwość przeszukania konkretnej kategorii sklepu, zwłaszcza jeżeli nazwy produktów mogą się powtarzać w różnych kategoriach, jak ma to miejsce przy wyszukiwaniu książek, filmów, płyt, plakatów itp.

Pamiętajmy jednak, aby wyniki wyszukiwania zostały zablokowane w pliku robots.txt i nie były indeksowane przez wyszukiwarkę, ponieważ przyczyni się to do powstawania duplikatów podstron.

Filtrowanie

Kolejnym elementem wpływającym na UX, w który powinien być wyposażony nasz sklep, jest filtrowanie produktów według dowolnych kryteriów. Tu Klientów podzielimy na dwie kategorie:

1. świadomych i wybierających dokładnie to, czego chcą, wykorzystując do tego odpowiednie parametry,
2. tych, którzy wiedzą, że potrzebują danego produktu, ale nie znają jego konkretnych cech.

Przykładowo na stronie sklepu z zegarkami LuxTime możemy filtrować produkty według aż jedenastu kryteriów, takich jak ich kolor, mechanizm, producent czy nawet pożądana wodoszczelność. Tak szeroki zakres filtrów sprawia, że produkty mogą znaleźć zarówno osoby znające konkretne parametry, jak i ci, którzy będą się kierować jedynie kolorem czy ceną artykułu. Zadbajmy także o możliwość szybkiego usuwania filtrów – nie chcemy przecież, żeby Klient musiał odznaczać wszystkie opcje zawsze wtedy, gdy chce zmienić swoje ustawienia.

Oprócz filtrowania powinniśmy także zapewnić przydatną funkcję sortowania produktów. Pamiętajmy jednak, aby zawrzeć w niej wszystkie pomocne kryteria, takie jak cena, nazwa, data dodania oraz popularność.

Podobnie jak w przypadku wyników wyszukiwania również rezultaty filtrowania oraz sortowania produktów nie powinny być indeksowane w wyszukiwarce.

CTA

Przeglądając strony czy sklepy internetowe, bardzo często możemy się spotkać z przyciskami typu:

• „Dodaj do koszyka”,
• „Kup teraz”,
• „Zapisz się”,
• „Dołącz do Klubu”,
• „Dowiedz się więcej”,
• „Czytaj dalej”.

Są to przykłady tzw. CTA (ang. call to action), czyli wezwania do działania. Mają one jeden cel – nakłonić użytkownika do wykonania konkretnej akcji, na której nam zależy. Może to być zostawienie adresu e-mail w celu zapisania się do newslettera lub otrzymania dodatkowego rabatu, przeczytanie nowego artykułu na firmowym blogu. W sklepach internetowych najczęściej będziemy dążyć do sfinalizowania zakupów. CTA może być stosowane w różnych formach, np. linku, sloganu, grafiki, lecz najczęściej spotykane są buttony. Podczas tworzenia przycisków CTA warto trzymać się kilku uniwersalnych zasad, które podniosą ich skuteczność.

1. Przyciski CTA powinny być widoczne, czytelne i wyróżniać się na stronie – tak aby użytkownik zawsze był świadomy ich położenia. Od razu powinien także widzieć, że dany przycisk jest „klikalny”.
2. Warto zadbać o odpowiednią wielkość oraz zauważalny kolor przycisków CTA. Sprawdzą się przede wszystkim mocne barwy, np. kolor pomarańczowy, który został zastosowany na stronie Allegro (kolor ten dodatkowo nawiązuje do brandu). Przycisk powinien być też otoczony neutralnym tłem, np. bielą, co będzie pozwalać na jego lepsze wyróżnienie. Najlepiej, aby barwy samego buttonu oraz użytego na nim fontu były kontrastowe – tak aby zapewnić jak największą widoczność tekstu.
   
3. Należy pamiętać, aby jasno określać, gdzie użytkownik zostanie przeniesiony po kliknięciu CTA, dlatego zamiast ogólnych buttonów typu „Dalej” czy „Kliknij”, wybierzmy konkretne sformułowania takie jak „Czytaj artykuł” lub „Przejdź do kasy”.
4. Jeśli dany tekst na to pozwala, warto zwracać się do użytkownika w pierwszej osobie, czyli np. „Mój koszyk”, zamiast „Twój koszyk”.
5. Technologie mobilne zyskują coraz większy udział w rynku e-commerce, dlatego musimy także pamiętać o dopasowaniu naszych buttonów CTA do wersji strony na urządzenia przenośne. Powinniśmy zadbać o to, żeby przyciski były równie dobrze widoczne na smartfonach czy tabletach, jak są na komputerach.

Sam przycisk i napis CTA to jeszcze nie wszystko – liczy się również jego odpowiednie umieszczenie. Oczywiście: to, gdzie ma się znaleźć dany button, zależy od tego, do jakiej akcji chcemy przekonać użytkownika. Przyjęło się – nie bez powodu – że przycisk „Kup teraz” powinien znajdować się w okolicach ceny – pod nią, obok lub również poniżej liczby produktów, które chcemy kupić. Ta sama zasada dotyczy przycisku „Dodaj do koszyka”. Oba buttony powinny być umieszczone w intuicyjnym miejscu, które niejako stanowi podsumowanie tego, co dany użytkownik chce zrobić. Jeżeli wybrał on już odpowiednie kolor, rozmiar, wersję oraz liczbę egzemplarzy kupowanego produktu, to przycisk „Dodaj do koszyka” będzie dla niego automatycznym następstwem, czymś, co kliknie intuicyjne. Jeżeli zakupy w naszym sklepie internetowym będą przebiegały naturalnie, niczym w sklepie stacjonarnym, jesteśmy na najlepszej drodze do tego, żeby doświadczenia Klienta związane z naszą stroną były pozytywne.

Zasady zasadami, jednak nie zapominajmy o ciągłym testowaniu danego koloru, kształtu, umiejscowienia oraz treści widocznej na samym przycisku. Do określenia, czy CTA są skuteczne, mogą posłużyć choćby mapy ciepła (ang. heat maps), które w graficzny sposób przedstawiają elementy przyciągające wzrok i aktywność użytkowników na danej stronie. Narzędzia takie jak HotJar, Smartlook czy CrazyEgg analizują ruch kursora oraz miejsca kliknięć dokonywanych przez osoby odwiedzające stronę. Jeśli aplikacje te wykażą, że dany przycisk CTA nie wywołuje pożądanej aktywności użytkowników, będziemy musieli wprowadzić zmiany.

Bezpieczeństwo płatności

Idealny scenariusz zakłada, że finalnym krokiem Klienta podczas wizyty w naszym  sklepie internetowym będzie dokonanie zakupu. Jak już wspominaliśmy w rozdziale dotyczącym architektury sklepu internetowego, należy zadbać o wdrożenie certyfikatu SSL na naszą stronę, by zapewnił szyfrowanie danych. Powinniśmy zaoferować Klientom różne formy bezpiecznych płatności online, takie jak opisane poniżej.

• Przelew tradycyjny. Zajmuje najwięcej czasu, ponieważ polega na ręcznym wpisaniu danych odbiorcy przelewu.
• Przelew szybki. Najczęściej jest wykonywany przez pośredników takich jak Przelewy24, PayU czy Dotpay. Firmy te mają konta we wszystkich bankach, dzięki czemu transakcje mogą być wykonywane wewnętrznie – pomiędzy dwoma rachunkami w danym banku – co zajmuje dosłownie chwilę.
• Płatność kartą kredytową. Warto zadbać o wykorzystanie usług Visa Checkout dla kart Visa oraz MasterPass dla MasterCard. Dzięki temu w trakcie płatności Klienci nie będą zmuszeni do podawania wszystkich poufnych informacji dotyczących kart, które mogą zostać przechwycone. Zostaną jedynie poproszeni o podanie hasła.
• Płatność aplikacją mobilną. Każdy z większych banków działających w Polsce udostępnia swoim Klientom własne aplikacje mobilne, które umożliwiają płacenie BLIK-iem. Bezpieczeństwo takiej transakcji zapewnia sześciocyfrowy kod, który zachowuje ważność jedynie przez 120 sekund.
• Płatność za pobraniem. Pewna część Klientów sklepów internetowych wciąż decyduje się na dokonanie bezpiecznej płatności przy odbiorze, nie można o nich zapominać.

Każdy Klient ma własne przyzwyczajenia, dlatego musimy zadbać o to, by nasza oferta była dopasowana do różnych grup odbiorców – niektórzy użytkownicy będą woleli wykonać przelew, inni szybką płatność BLIK-iem, a część osób będzie chciała zapłacić gotówką. Nie zapominajmy także o tym, aby uwzględnić różne formy wysyłki zakupionych produktów. Nie każdy sklep stać na zapewnienie darmowej dostawy, ale możemy zróżnicować jej opcje i koszty – od najdroższego kuriera, poprzez tańszy paczkomat, aż do odbioru w kiosku Ruchu.

Generalnie aby sprawdzić, czy Twój sklep jest przyjazny dla użytkownika, warto przeprowadzać tak zwane testy użyteczności, najlepiej jeszcze przed jego wdrożeniem – pomoże to od razu wyeliminować wyzwania, które użytkownicy mogą mieć w integracji z Twoim sklepem. Pamiętaj, że każdy użytkownik jest inny i nie warto z góry zakładać, że „coś jest intuicyjne dla mnie, więc zadziała”. Inwestycja w badania przeprowadzone nad naszą stroną przez profesjonalną agencję UX na pewno zwróci się w przyszłości.

Warto podkreślić, że projektowanie sklepu internetowego zgodnie z UX nie jest jednorazowym działaniem – to proces, który powinien być nieustannie udoskonalany. Wystarczy popatrzeć na to, z jaką częstotliwością największe sklepy online wprowadzają zmiany zarówno w wyglądzie witryny, jak i jej funkcjonalności. Najlepszym przykładem z rodzimego rynku będzie choćby portal Allegro, który średnio raz na rok przeprowadza widoczną modyfikację swojej strony, uwzględniając doświadczenie Klienta.

Jak już wspomnieliśmy na początku tego rozdziału, UX i SEO nie muszą się wykluczać, a wręcz przeciwnie, powinny się wzajemnie uzupełniać. Dlatego uwzględnijmy istotne pod kątem SEO elementy, ale dopasujmy je także do użytkownika. Przykładowo – wiemy, że nagłówek H1 na każdej stronie to niezwykle istotny składnik jej optymalizacji, jednak zadbajmy, aby był on umieszczony w widocznym punkcie. Dzięki temu osoba odwiedzająca naszą stronę będzie doskonale wiedziała, w którym miejscu obecnie się znajduje.