Projektowanie serwisu e-Commerce jest jednym z większych wyzwań webdesignera czy osoby odpowiadającej za UX / UI. Podczas projektowania portfolio, strony dedykowanej eventowi czy ekskluzywnemu produktowi mamy zdecydowanie większą dowolność. W projektowaniu sklepu online najważniejsze jest wsparcie jego funkcji sprzedażowej. To zysk jest podstawą utrzymania się serwisu e-commerce, dlatego sklep “ma przede wszystkim sprzedawać”.
Zanim zaczniesz projektować sklep internetowy
Podobno Einstein powiedział, że :
Gdybym miał godzinę na uratowanie świata, poświęciłbym pięćdziesiąt pięć minut na zdefiniowanie problemu i tylko pozostałe 5 minut na znalezienie rozwiązania.
Ten cytat wpisuje się w jedno z kluczowych zagadnień przy projektowaniu serwisu e-commerce, czyli konieczności zdefiniowania potrzeb i problemów. Dużą rolę odgrywa na tym etapie sam klient, który najlepiej zna swój produkt oraz grupę docelową. Uwagi i sugestie właściciela sklepu powinniśmy brać pod uwagę, ale zawsze przez pryzmat klienta końcowego – użytkownika serwisu. To on przede wszystkim musi czuć się swobodnie na naszej stronie .
Wielu klientów internetowych wchodzących na stronę jedynie sprawdza czy coś ich zainteresuje, czy dany sklep ma dla nich cokolwiek do zaoferowania. Decyzja czy pozostać na stronie zapada niekiedy w przeciągu kilku sekund. Wyzwaniem dla webdesignera jest tak zaprojektować serwis, żeby odwiedzający go klienci:
- poświęcili czas i zapoznali się z ofertą
- dokonali zakupu
- w przyszłości powrócili do sklepu.
Jak zaprojektować konwertującą stronę główną sklepu. Strona główna to wizytówka naszego serwisu. Stąd szczególna uwaga poświęcana jest na jak najlepsze jej zaprojektowanie. W zależności od charakteru towarów, będzie ona wyglądać inaczej.
W sklepie z odzieżą postawimy przede wszystkim na wyeksponowanie asortymentu, duże zdjęcia, ciekawe aranżacje. Sklep sprzedający drobne części zamienne do AGD skupi się przede wszystkim na funkcjonalnej możliwości wyszukania odpowiedniego zamiennika.
Z całą pewnością nie ma jednego ogólnego szablonu sklepu, który sprawdziłby się w każdym przypadku jednakowo dobrze. Na pewno jest za to kilka dobrych praktyk, które możemy traktować uniwersalnie.
Logo, panel klienta i koszyk, czyli podstawy
Na początek – logo. Niby rzecz oczywista, a często traktowana niedbale. Wchodząc na stronę sklepową, użytkownik musi od razu wiedzieć gdzie jest. Logo to element identyfikujący sklep, dlatego warto aby było widoczne i w odpowiedniej rozdzielczości. Rozmyte, nieostre, “poszarpane” czy umieszczone na tle, z którym się zlewa wygląda nieprofesjonalnie.
Widoczny panel logowania i koszyk, to kolejne “must have” sklepu internetowego. Dobrą praktyką jest oznaczenie (przy pomocy koloru, cyfry, wartości koszyka) czy koszyk jest pusty, czy nie. Warto pamiętać o dobrze wyeksponowanej wyszukiwarce, która w zależności od charakteru produktów, może być jednym z kluczowych elementów przeglądania oferty sklepu.
Menu poziome vs. menu pionowe
Nawigacja w serwisie, to także mocno indywidualna kwestia. W zasadzie utarły się dwie konwencje:
- menu poziome
- menu pionowe
Zaletą menu poziomego jest jego widoczność zaraz po wejściu na stronę. Nie zajmuje wiele miejsca, występuje na większości serwisów, więc użytkownik będzie do niego od razu przyzwyczajony. Z drugiej jednak strony jego układ wymusza ograniczoną liczbę kategorii, a ich nazwy powinny być krótkie i zwięzłe.
W menu pionowym mamy do dyspozycji znacznie więcej miejsca, dzięki czemu możemy tworzyć kolejne poziomy nawigacji. Brak przemyślanej struktury może jednak prowadzić do chaosu, a co za tym idzie, mniej intuicyjnej nawigacji dla użytkownika. Przy dużej ilości kategorii w menu pionowym, trudniej jest nam także wyróżnić pewne istotne linki.
Zadbaj o właściwy odbiór sklepu
W poruszaniu się po sklepie, zwłaszcza jeśli jest on rozbudowany, pomagają breadcrumbsy. Tzw. “okruszki” tworzą ścieżkę nawigacji, która w prosty sposób pozwala określić użytkownikowi, gdzie się znajduje oraz wrócić do interesującej go strony.
Kolejną istotną kwestią z punktu widzenia projektowania zarówno sklepu, jak i innych serwisów internetowych jest dobór odpowiednich fontów i kolorów. Powinniśmy zadbać o to by na naszym sklepie nie było zbyt wielu czcionek. Dobrą praktyką jest wybór dwóch wiodących rodzajów – prostego, czytelnego do tekstów i drugiego, którym wyróżnimy nagłówki, istotne hasła czy np. ceny. Pamiętajmy jednak, że obie czcionki powinny być przede wszystkim czytelne. Dla podkreślenia istotnych kwestii możemy zastosować różne grubości fontu, ale tu także nie należy przesadzać. Wiele czcionek oferuje kilka grubości. Pamiętajmy jednak, że każda grubość, nawet tej samej czcionki, to osobno ładowany na stronie element. Ich ilość wpływa nie tylko na ogólny odbiór strony, ale i na jej wydajność.
Kwestia kolorów w sklepie internetowym to wypadkowa wielu czynników. Niektóre marki posiadają brandbooki lub chodźby podstawową księgę znaku. Wiodący kolor na stronie może być czasami “odgórnie” narzucony, z uwagi na konieczność zachowania spójności sklepu z identyfikacją wizualną marki. Niemniej pamiętajmy, że pewne kwestie, jak button “Do koszyka”, ceny promocyjne, istotne hasła np. menu, warto wyróżnić innym kolorem. Odpowiednim zestawieniem kolorystycznym możemy w skuteczny sposób przyciągnąć uwagę odbiorcy.
Kolory to nie jedyny sposób aby przyciągnąć wzrok użytkownika. W sklepach stacjonarnych często najciekawsze produkty (albo raczej te, które sprzedający chcą nam zasugerować) są na wysokości naszego wzroku, w łatwo dostępnych miejscach czy blisko kas. Podobne zabiegi stosuje się w serwisach e-Commerce.
Produkty, które chcemy wyróżnić zwykle umieścimy wysoko na stronie, aby były widoczne zaraz po wejściu lub po niewielkim scrollowaniu strony. Tym, co również przyciąga ludzki wzrok są… inni ludzie. Zdjęcia, które przedstawiają osoby – najlepiej ze wzrokiem skierowanym do przodu – bardziej przyciągają, niż zdjęcia samych produktów. Zastosowanie ikon i haseł jest kolejną dobrą praktyką. “Promocja”, “Dostawa w 24h”, “Bezpieczne płatności” opatrzone ikoną, trafią do użytkownika szybciej, niż kilka linijek tekstu mówiącego o tym samym.
Pamiętaj o urządzeniach mobilnych
Warto pamiętać, że obecnie najpopularniejsza w Polsce rozdzielczości ekranów to 1366 x 768. Warto zadbać aby pewne istotne elementy np. button “Do koszyka” w karcie produktu był widoczny na wspomnianych ekranach. Zatrzymując się na chwilę przy rozdzielczościach ekranów, warto wspomnieć, że kolejna najpopularniejsza rozdzielczość dotyczy urządzeń mobilnych. W styczniu 2016 roku wartość ta wynosiła 8% udziału wszystkich urządzeń, a rok później w styczniu 2017 – już ponad 16%. Tak dynamiczny wzrost pokazuje, że coraz większa liczba użytkowników korzysta z urządzeń mobilnych. Projektując nasze serwisy musimy brać pod uwagę konieczność dostosowania projektu do ich potrzeb.
Projektowanie procesu zakupowego
Wszystkie wyżej wymienione kwestie są niezwykle istotne. W końcu to one decydują o tym czy użytkownik znajdzie w naszej ofercie coś dla siebie. Ale co z finalizacją transakcji? Nie każda kończy się przecież sukcesem, a główną przyczyną jest zwykle źle skonstruowany formularz zamówienia.
Nikt z nas nie przepada za wypełnianiem formularzy, dlatego warto zadbać, aby był jak najprostszy. Często praktyką jest zmuszanie użytkownika do założenia konta, poprzez niemożność finalizacji zamówienia bez zarejestrowania. Większość z nas nie przepada za narzuconym przymusem, dlatego dobrym pomysłem jest umożliwienie “zakupów bez rejestracji”. Tzw. “szybkie zakupy” pozwalają na zakup przy minimum formalności. Jeśli już zdecydujemy się dać możliwość złożenia zamówienia bez konieczności rejestrowania się, pamiętajmy aby na zakończenie transakcji umożliwić założenie konta.
Sam proces zakupowy możemy zaprojektować dwojako. System kolejnych kroków, czyli przechodzenie na podstrony w celu wypełnienia danych koniecznych do finalizacji transakcji, to jedno z popularniejszych rozwiązań. Warto pamiętać, aby tych kroków było jak najmniej, żeby sztucznie nie wydłużać procesu składania zamówienia. Druga opcja, czyli onepage, opiera się na takim skonstruowaniu podstrony, aby wszystkie konieczne dane były od razu widoczne.
Zarówno w jednym jak i drugim przypadku powinniśmy zadbać, aby wszystkie pola formularza były jednoznaczne, a komunikaty (np. o błędnych danych) oczywiste. Nie możemy pozostawić miejsca na domysły. Niestety, w przeciwieństwie do sklepu stacjonarnego, gdzie mamy bezpośredni kontakt z klientem, tutaj nie jesteśmy w stanie od razu rozwiać jego ewentualnych wątpliwości. Klient prędzej zrezygnuje z transakcji i poszuka produktu w ofercie innego sklepu, niż pozwoli sobie na niepewność. Dobrą praktyką jest dodanie na zakończenie finalizacji transakcji szybkiego podsumowania zamówienia – wartość koszyka, koszty dostawy, ewentualne rabaty.
Pamiętajmy, aby każda akcja użytkownika spotkała się z reakcją serwisu. Dlatego warto zaprojektować stronę z podziękowaniem za złożenie zamówienia, opatrzyć ją możliwością dodawania opinii. Taki feedback może być często bardzo pomocny. Być może coś przeoczyliśmy, na którymś etapie któryś z elementów procesu jest nieintuicyjny. Dzięki zebranym opiniom jesteśmy w stanie poprawić funkcjonowanie serwisu, a tym samym zwiększyć sprzedaż.
Na zaprojektowaniu praca się nie kończy
Doskonalenie sklepu internetowego, to wychodzenie naprzeciw oczekiwaniom jego klientów. Ważne jest zarówno poprawianie oferty produktów, jak i funkcjonalności samego serwisu. Wspomniane opinie i innego rodzaju feedback od klientów, to nie jedyne źródła informacji, które możemy wykorzystać do ulepszenia serwisu.
Pomocne są także heatmapy, narzędzia rejestrujące zachowania użytkowników na stronie. Pozwalają zrozumieć, jak klienci poruszają się w obrębie sklepu, jakie są najsilniejsze wskaźniki motywacji zwiedzających, co stanowi słabe punkty. Podczas wprowadzania modyfikacji warto opierać się na czymś więcej niż intuicji. “Wydaje mi się, że tak będzie lepiej” to zdecydowanie za mało, aby móc powiedzieć, że dane rozwiązanie sprawdzi się na naszym serwisie. Nawet jeśli jesteśmy przekonani o słuszności wprowadzenia zmiany, warto zapytać (chodźby kilku osób z najbliższego otoczenia), co o niej sądzą.
Serwis e-Commerce kierowany jest z założenia do szerokiej grupy odbiorców. Nawet przy bardzo zbliżonej docelowej grupie użytkowników, nie możemy założyć z góry, że dane rozwiązanie jest nieomylne. Przy wprowadzaniu konkretnej zmiany pomocne mogą być testy A/B, gdzie porównujemy dwie alternatywne wersje dla jednej zmiennej. Przykładowo w jednym ze sklepów badaliśmy umiejscowienie filtrów na stronie listingu. Testy A/B wykazały, że zdecydowanie lepszym rozwiązaniem było umiejscowienie ich po lewej stronie od produktów.Choć początkowo klient uważał, że umieszczenie ich nad produktami jest dobrym pomysłem, finalnie pozostawił je po lewej stronie. Testy A/B umożliwiają szybkie podejmowanie decyzji i są łatwe w interpretacji. W tym konkretnym przypadku filtrów, pozwoliły na uniknięcie mało funkcjonalnego rozwiązania w architekturze strony.
Sklep online to nieustanna praca wielu osób. Samo zaprojektowanie i wdrożenie to nie koniec naszej pracy. Pierwsze skutecznie złożone zamówienie, to nic innego jak kolejny etap tworzenia serwisu e-Commerce. Kiedy ta praca się kończy? Jak to w biznesie – w zasadzie nigdy, ona dopiero się zaczyna :).