8 zagadnień, od których warto pamiętać projektując witrynę e-commerce

Decyzje projektowe podejmowane podczas tworzenia strony e-commerce, która ma zagwarantować jak najlepsze doświadczenia jej przyszłych użytkowników, zależą od wielu czynników. W procesie projektowania, zwłaszcza gdy włączeni są w niego specjaliści UX, przygotowanie pierwszych makiet poprzedzone jest analizą obejmującą m.in.:

• zakres prezentowanych ofert – czy strona ma oferować kilka wersji jednego, unikalnego produktu, szeroką gamę produktów konkretnej marki, czy może artykuły różnych producentów z możliwością dobrania produktów najlepiej dopasowany do potrzeb klientów;
• branżę – innych rozwiązań projektowych może wymagać strona przeznaczona dla specjalistów, a innych e-commerce z ofertą kierowaną do zróżnicowanego grona użytkowników, którzy szukają w niej powszechnie znanych artykułów codziennego użytku;
• rodzaj asortymentu sklepu i związana z tym częstotliwość i powtarzalność zakupów – czy produkty nabywane są w miarę regularnie (np. kosmetyki, artykuły spożywcze), czy raczej należy się liczyć z jednorazowym zakupem danego produktu w dłuższym okresie czasu (np. AGD, elektronika itp.).

Istnieje jednak kilka podstawowych elementów, które znajdziesz na każdej stronie e-commerce, niezależnie od tego, komu i jakiego rodzaju produkty oferuje sklep, czy oferta ta kierowana jest do klientów indywidualnych, czy w formie transakcji B2B. Zarówno w przypadku tworzenia projektu e-commerce od podstaw, jak i przy redesignie istniejącego sklepu internetowego, zestaw elementów trafiających na warsztat projektantów będzie zbliżony. Dlatego ten artykuł skupia się na dobrych praktykach, które warto wziąć pod uwagę podczas projektowania:

• strony głównej,
• strony z listą produktów,
• podstrony produktowej,
• koszyka,
• modułu zgód na przetwarzanie danych użytkownika.

Powyższa lista została uzupełniona o tematy, bez uwzględnienia których trudno zaplanować intuicyjne interakcje użytkownika z interfejsem: architektura informacji, nawigacja i wyszukiwanie oraz dostępność treści.

Uwaga!
W przypadku stron e-commerce kluczowym elementem jest proces zakupowy. W poniższym zestawieniu został on pominięty, głównie ze względu na obszerność tego zagadnienia oraz możliwe warianty decyzji projektowych. Można oczywiście wskazać pewne standardowe rozwiązania (np. dobre praktyki tworzenia formularzy), jednak ciężko rozważać całość procesu zakupu w oderwaniu od specyfiki konkretnego projektu.

1. Architektura informacji

Przemyślana struktura informacji, w oparciu o którą prezentowana będzie oferta sklepu musi być przede wszystkim spójna i konsekwentnie stosowana w obrębie całej witryny. Użytkownik powinien mieć możliwość szybkiego zorientowania się w ofercie sklepu dzięki łatwym do odróżnienia kategoriom, które nie powtarzają się oraz nie są wzajemnie zagnieżdżone. W przypadku obszernych kategorii, zawierających wiele produktów, zwykle są one podzielone na podkategorie, przy czym liczba poziomów takiego podziału nie powinna przekraczać trzech. Z kolei kiedy oferta obejmuje zaledwie kilka (typów) produktów, często nie jest nawet konieczne grupowanie ich w kategorie.

Należy również zapewnić spójność między wersją strony przygotowaną na różne typy urządzeń, różniące się wielkością ekranów oraz sposobem obsługi interfejsu (np. wyświetlacz dotykowy, mysz). Różnice w funkcjonalności czy sposobie prezentacji informacji na urządzeniach mobilnych i desktopowych są czasem nieuniknione. Powinny być jednak uzasadnione, np. uproszczeniem eksploracji czy zapewnieniem właściwego poziomu dostępności.

Pamiętaj:

• Uporządkuj kategorie w możliwie najprostszy sposób, tak żeby ich struktura była zrozumiała dla każdego użytkownika, niezależnie od jego przyzwyczajeń oraz doświadczenia w zakupach on-line.
• Złożoną ofertę odwzoruj w dodatkowych podkategoriach. Nie twórz jednak kategorii sztucznie lub na wyrost, jeśli zakres oferty nie jest rozbudowany.

• Nadaj kategoriom etykiety ułatwiające użytkownikom zorientowanie się, jakie produkty znajdzie pod każdą z nich, jeszcze zanim zacznie przeklikać się przez pozycje menu.
• W nazwach kategorii unikaj żargonu, zrozumiałego jedynie dla wąskiej grupy ekspertów danej branży. Jeżeli jednak oferta składa się (głównie) ze specjalistycznych produktów, wyjaśnij różnice między nimi, np. poprzez ilustracje czy zdjęcia poglądowe – skorzystają na tym mniej zaawansowani użytkownicy.

2. Nawigacja i wyszukiwanie produktów

Analizując nagrania zachowań użytkowników na stronie (np. przy pomocy Hotjara) często obserwujemy oznaki ich zagubienia spowodowane nieprzemyślaną lub niewłaściwie zaprezentowaną nawigacją. Poprawnie zaprojektowana elementy interfejsu powinny w prosty, zorganizowany sposób prowadzić do poszukiwanych treści. Standardowo użytkownik ma do dyspozycji: menu główne, wyszukiwarkę oraz wewnętrzne linkowanie pomiędzy poszczególnymi podstronami sklepu.

Pamiętaj

• Zaproponuj nawigację spójną w ramach całej witryny – zagwarantuje to np. menu, wyszukiwarka czy nagłówki umieszczane konsekwentnie tym samym miejscu podstron, niezależnie od ich przeznaczenia.
• Zapewnij spójność również pomiędzy wersjami zaprojektowanymi na różne urządzenia – wersja mobilna sklepu powinna udostępniać użytkownikom ten sam zestaw kluczowych funkcji, co desktop.
• Zaprojektuj możliwość przejścia do podstron kategorii na kilka sposobów, np. poprzez wyniki wyszukiwania, filtry czy linki umieszczane na stronach kategorii powiązanych z daną.
• Podpowiedz użytkownikowi, co może wpisać w polu wyszukiwania – rozważ przy tym wprowadzenie historii wyszukiwanych haseł oraz wskazywanie popularnych fraz.
• W przypadku braku wyników wyszukiwania nie pozostawiaj użytkownika samego sobie – dalszą eksplorację może zainspirować propozycja haseł, a w ostateczności prezentacja elementów oferty (np. bestsellery lub produkty podobne do przeglądanych).

3. Strona główna

Klienci trafiający do sklepu internetowy często przekierowywani są bezpośrednio do podstrony szukanej przez nich kategorii lub promowanego produktu. Niektóre wizyty odbywają się przez to z pominięciem strony głównej. Warto jednak zadbać o prezentowane na niej informacje, częste aktualizacje treści oraz wprowadzenie elementów budujących zaufanie użytkowników oraz świadomość marki (np. logotypy partnerów, producentów, wyróżniki marki, certyfikaty serwisów z opiniami itp.). To tutaj firma zwykle prezentuje kluczową część oferty i najpopularniejsze kategorie. Tutaj też kieruje się użytkownik, który chce dowiedzieć się więcej o marce, zorientować w całościowej ofercie sklepu lub po prostu w poszukiwaniu inspiracji. Projekt strony głównej powinien być zatem wizytówką sklepu.

Pamiętaj:

• Zaprezentuj na stronie głównej propozycja wartości marki – może to być baner lub sekcja z USP (unikatowe cechy oferty).
• Umieść na stronie głównej przykłady produktów reprezentujących kluczowe kategorie, pozwalające użytkownikowi ocenić zakres oferty.
• Udostępnij użytkownikom funkcje, które pozwalają śledzić aktualizacje oferty oraz zachęcają do powrotu na stronę (np. zapis do newslettera, informacje o programie lojalnościowym). Nie zapominaj o aktualizacji treści na wizytówce sklepu.
• Zadbaj o użytkowników powracających oraz szukających inspiracji – na stronie głównej zaplanuj miejsce na moduł z produktami podobnymi do ostatnio oglądanych przez klienta.
• Zapewnij czytelność strony dzięki przemyślanej hierarchii jej elementów – przeanalizuj, które informacje są najważniejsze z punktu widzenia użytkownika i odpowiednio je zaakcentuj. Dodatkowo, sekcje oraz poszczególne elementy powinny być prezentowane w sposób pozwalający użytkownikom skupić się na danym fragmencie treści.

4. Lista produktów, filtry i sortowanie

Sposób prezentacji listingu zależy głównie od założeń projektu. Stosowany jest zarówno widok z siatką kafli, jak i listą ułożonych jeden pod drugim modułów (najczęściej z możliwością ich przełączania). Chcąc zapewnić szybkie ładowania się strony, warto podzielić listę na mniejsze “porcje”. Konieczna jest przy tym możliwość doładowywania kolejnych produktów – przyciskiem lub poprzez automatyczne rozszerzenie listy podczas scrollowania strony (tzw. infinite scroll).

Absolutnym standardem na liście produktów są natomiast filtry. Pośród ich podstawowych atrybutów znajdziesz często: zakres cen, producentów, cechy produktu (np. jego kolor czy rozmiar), ale też oznaczenie promocji. Każdy projekt wymaga indywidualnego przeanalizowania zakresu filtrów, tak żeby optymalnie dopasować ich opcje do asortymentu sklepu.

Pamiętaj:

• Informuj użytkownika, w którym miejscu witryny właśnie się znajduje – nad listą powinien być umieszczony nagłówek z jednoznaczną nazwą kategorii oraz tzw. okruszki. Ścieżka powrotu przydaje się zwłaszcza, kiedy architektura oparta jest na zagnieżdżonych kategoriach, pozwalając użytkownikowi na przeniesienie się do kategorii nadrzędnej jednym kliknięciem/tapnięciem.
• Zapewnij możliwość uporządkowania oraz ograniczenia listy produktów zgodnie z preferencjami użytkownika – udostępnij opcje sortowania oraz filtry.
• Upewnij się, że liczba i zakres filtrów są dostosowane do prezentowanego asortymentu – nie warto nadmiernie rozdrabniać filtrów tworząc bardzo szczegółowe opcje. Może się również zdarzyć, że poszczególne kategorie będą wymagały różnego zestawu filtrów.
• Zdecyduj, które informacje o produkcie są niezbędne do jego precyzyjnej identyfikacji i umieść w opisach ofert na liście tylko to, co jest ważne z punktu widzenia użytkownika. Popraw rozpoznawalność produktów prezentując (czytelne) miniatury zdjęć.
• Rozważ udostępnienie opcji dodawania do koszyka z poziomu listy – pozwoli to na sprawną finalizację zakupów, np. gdy użytkownik dobrze zna ofertę i wszedł na stronę sklepu po konkretny produkt

5. Karta produktu

Użytkownik wchodzący na kartę produktu powinien otrzymać informacje, które pozwolą mu zweryfikować, czy jest zainteresowany daną ofertą. Dlatego prezentowany opis powinien zawierać kompletną, szczegółową specyfikację produktu, z uwzględnieniem danych istotnych z punktu widzenia użytkownika. Zwykle opis zawiera cechy produktu (np. wymiary, rodzaj materiału), nazwę producenta oraz możliwe warianty (np. kolor, rozmiar).

Dane te warto uzupełniać poglądowymi zdjęciami, pozwalającym ocenić np. proporcje i rozmiar artykułu, ale też obejrzeć jego detale. 

Pamiętaj

• Umieść na karcie produktu jego pełną nazwę oraz kod (o ile występuje) – będzie to pomocne, gdy produkty nie mają unikalnych cech pozwalających na ich jednoznaczne zidentyfikowanie.
• Pokaż ostateczną cenę produktu, a w przypadku naliczenia rabatu uzupełnij ją o informację o cenie wyjściowej oraz wysokości rabatu.
• Przemyśl umieszczenie na stronie rekomendacji produktów podobnych lub komplementarnych.
• W wypadku chwilowego braku produktu daje użytkownikowi możliwość otrzymania powiadomienie o powrocie produktu do oferty.

6. Koszyk

Prezentacja zawartości koszyka, zwłaszcza z umiejętnie podanymi informacjami dodatkowymi (np. o wartości koszyka zapewniającej darmową dostawę), może inspirować niektórych użytkowników do uzupełnienia zakupów. Warto jednak zachować umiar, np. umieszczając na stronie koszyka dodatkowych modułów, np. z rekomendacjami produktów

Umieszczenie przez użytkownika produktów w koszyku nie zawsze jest jednoznaczne z finalizacją zakupów. Porzucone koszyki są częstym zjawiskiem, jednak nie zawsze przyczyną przerwania procesu zakupu są ewidentne błędy w jego obrębie czy obiektywne trudności z przebrnięciem przez skomplikowane formularze (zwłaszcza jeśli na danej stronie e-commerce nie uwzględniono funkcji schowka). Problem warto zidentyfikować przy pomocy narzędzi analityki internetowej oraz prześledzenia zachowań użytkowników.

Pamiętaj:

• Zapewnij mechanizm zapamiętywania zawartości koszuka pomiędzy wizytami użytkownika na stronie lub jasno informuj o automatycznym wyczyszczenia go po zakończeniu sesji.
• Pozwól użytkownikowi podjąć ostateczną decyzję o zakupie już w koszyku – udostępnij możliwość usunięcia lub zmiany liczby produktów, ewentualnie  parametrów produktu (np. koloru lub rozmiaru).
• Pokaż wartość zamówienia w czytelny sposób, z uwzględnieniem przyznanych rabatów oraz wszystkich kosztów. Poinformuj również o możliwych formach płatności.
• Zapewnij użytkownikowi zarówno łatwy powrót do sklepu, jak i przejście do finalizacji transakcji.
• Pozwól użytkownikowi przenosić produkty z koszyka do schowka i odwrotnie..

7. Zgody na zbieranie i przetwarzanie danych

Nikogo nie zaskakują obecnie mechanizmy zbierające dane użytkowników zaimplementowane na stronach internetowych. Strona wykorzystująca tylko pliki cookie niezbędne do jej funkcjonowania (wynikające z tzw. uzasadnionego interesu) teoretycznie nie potrzebuje modułu zgody. Jednak stosowny baner ze wspomnianymi zgodami na przetwarzanie danych wita Cię zapewne kilka razy dziennie podczas surfowania w internecie. Mimo powszechnego stosowania systemów zarządzania zgodami na zbieranie informacji o użytkowniku, często nie przykłada się wagi do ich poprawności. Częste jest na przykład przyjmowanie domyślnej zgody użytkownika na stosowanie cookies i podobnych technologii.

Pamiętaj:

• Moduł z informacją o polityce prywatności lub cookies powinien być łatwy do zauważenia i zamknięcia. 
• Prośba o wyrażenie zgody powinna być wyświetlana użytkownikowi do momentu jej zamknięcia i nie pokazywana podczas przechodzenia na kolejne podstrony lub podczas następnych wizyt w witrynie. 
• Ustawienia powinny gwarantować domyślną nieaktywność zgód. Wyjątkiem może być “uzasadniony interes”, jednak i w tym przypadku użytkownik być wyraźnie i jednoznacznie poinformowany o takiej opcji.
• Wycofanie zgody powinno być maksymalnie uproszczone, na przykład przez zastosowanie odrzucenia wszystkich opcji zbiorczo.

8. Dostępność treści strony

Cyfrowa dostępność prezentowanych treści jest kwestią, którą coraz częściej uwzględnia się podczas projektowania stron internetowych. Zgodnie z ustawą z lutego 2019 r. jedynie podmioty publiczne mają obowiązek zapewnienia dostępności zgodnie ze standardem Web Content Accessibility Guidelines (obowiązująca obecnie wersja to WCAG 2.1). Wspomniany standard wyróżnia trzy poziomy zgodności treści witryny z wytycznymi:

• grupa A zawiera rekomendacje, które powinny być wdrożone, jeżeli chcemy zapewnić minimalny poziom dostępności wszystkim użytkownikom danego interfejsu; 
• rekomendacje z grupy AA gwarantują akceptowalną dostępność;
• optymalny poziom dostępności wymaga zastosowania rekomendacji z grupy AAA.

Szczegółowy opis zasad znajdziesz w polskim tłumaczeniu dokumentu WCAG.

Warto pamiętać, że mimo braku obowiązku zapewniania dostępności treści na stronach e-commerce, wytyczne WCAG stanowią zestaw cennych wskazówek dla projektantów chcących ułatwić korzystanie ze sklepu internetowego jak najszerszej grupie użytkowników. Przy wielu decyzjach projektowych pomocne mogą być proste narzędzia dostępne on-line. Na przykład poprawność kontrastu elementów projektowanego interfejsu możesz łatwo zweryfikować odwiedzając stronę WebAim czy WhoCanUse.

Pracuj z danymi

Powyższa lista nie wyczerpuje obszernego zbioru zagadnień, które należy rozważyć projektując stronę e-commerce. Możesz jej jednak użyć, jako bazy porządkującej rozpoczynające się prace nad stroną sklepu. Na każdym etapie projektu warto wracać do informacji zbieranych w trakcie jego trwania, ale też weryfikować wstępne założenia dzięki pogłębianiu wiedzy o motywacjach, potrzebach i zwyczajach zakupowych faktycznych (oraz potencjalnych) użytkowników projektowanej witryny. Najlepsze efekty uzyskasz zapewniając dywersyfikację źródeł tych informacji – niezbędnych danych szukaj zarówno w statystykach udostępnianych przez narzędzia analityki internetowej czy programy pozwalające na śledzenie zachowań użytkowników, ale też skonfrontuj proponowane rozwiązania z użytkownikami podczas kilku sesji testów użyteczności.  

– – –

Artykuł został przygotowany w oparciu o checklisty IDEACTO – jeśli jesteś zainteresowany pełnym zestawieniem najlepszych praktyk w projektowaniu i optymalizacji sklepów internetowych, pobierz Best Practices for E-commerce.

Artykuł został pierwotnie opublikowany w Magazyn Online Marketing.