banner
  • Monika Koprowska-Sawzdargo

  • | 11.07.2022

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.
W sklepie na stronie Huskee.co sprzedawanych jest tylko kilka produktów (kubki, pokrywki i podstawki), dlatego nie było konieczne tworzenie skomplikowanej struktury kategorii.

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.