Projektując interfejs sklepu internetowego można doszukać się pewnego schematu. Mianowicie, aby sklep funkcjonował w pełni poprawnie potrzebne są mu komponenty, które zazwyczaj się pojawiają także w innych sklepach. Są to listingi produktów, karta produktu, filtry, a także strona główna z sekcjami dopasowanymi do indywidualnych potrzeb. Do tego można dodać podstrony wyników wyszukiwania, koszyka, procesu zakupowego i mamy niemal w pełni rozpisany model sklepu internetowego. Jednak nic bardziej mylnego, ponieważ diabeł tkwi w szczegółach.

Czym innym są elementy, z których powinno się skorzystać, aby bazować na przyzwyczajeniach użytkowników i dobrych praktykach, a czym innym jest architektura informacji dopasowana do odbiorcy i typu sprzedawanych produktów. To właśnie architektura informacji determinuje logikę projektu oraz to w jaki sposób informacje zostaną udostępnione odbiorcom. Przy projektowaniu sklepu internetowego dla danej branży największym wyzwaniem jest zrozumienie dla jakiego typu klienta jest on tworzony. Poznając odbiorcę będziemy mogli dobrać odpowiednie praktyki i rozwiązania ułatwiające znalezienie pożądanych przez niego produktów. Właściwe zorganizowanie informacji oraz jej stopniowanie może bardzo pomóc w poruszaniu się po sklepie.

Gdy branża jest specyficzna

Co w momencie kiedy branża okazuje się bardziej wymagająca, chociażby z uwagi na jej asortyment, który jest tak rozległy, że trudno zapamiętać wszystkie występujące w sklepie kategorie produktów? Ostatnio miałem okazję zmierzyć się z projektem sklepu internetowego dla przedsiębiorstwa specjalizującego się w sprzedaży artykułów BHP. Każdy na pewno brał udział w szkoleniach związanych z BHP, czy to w szkole, czy w pracy. Nie ma się co oszukiwać, nie bywały to najbardziej porywające prezentacje / szkolenia. Jednak sama idea bezpieczeństwa jest jak najbardziej ważna i słuszna. W jaki sposób zapewnić ludziom, potrzebującym specjalistycznego sprzętu łatwy, dostęp do oferowanego asortymentu?

Wspominałem wyżej o standardowych elementach sklepu, z których powinien być zbudowany, aby zapewnić komplementarność całego rozwiązania. Można także powoływać się na sprawdzone wzorce projektowe, potwierdzone badaniami i mające pozytywny wpływ na doświadczenia użytkowników. Branża, w której mało który projektant pochylił się nad problemem czytelnej prezentacji danych, okraszonej atrakcyjnym interfejsem, stanowi wyzwanie. Trzeba czasami przetrzeć szlaki i wziąć odpowiedzialność za proponowane rozwiązania. Dobrze pokazuje to benchmark wykonany w ramach researchu, przygotowującego do procesu projektowania. Można zauważyć, że w designie sklepów tej branży brakuje ciekawości zrozumienia problemu i chęci dostarczenia atrakcyjnego rozwiązania. Słowem, projekty można uznać za potraktowane po macoszemu. No ale ten kto nie popełnia błędów, stoi w miejscu 🙂

Zaczynając od początku, dużym wyzwaniem było zaprojektowanie już samej architektury menu. Nawigacja strony powinna być czytelna, jednoznaczna i niemal w każdym przypadku od razu dostępna dla użytkownika. Mając do dyspozycji dużą liczbę zakładek musiałem się zastanowić, który typ nawigacji sprawdzi się w przypadku tego projektu. Ze względu na wspomniane uwarunkowanie, zdecydowałem się na menu pionowe. W swojej formie w ramach tego projektu, zwraca ono uwagę użytkownika i jest wyróżniającym się elementem ekranu.

Projektując menu nie można zapominać o jego niższych poziomach (o ile występują). Zabieg, jaki został wykonany w przypadku omawianego sklepu, można z powodzeniem wdrożyć także w przypadku menu poziomego. Pełne wykorzystanie przestrzeni sprawdza się w tym przypadku, ponieważ z powodzeniem można wykorzystać obszar rozwiniętego menu w celu umieszczenia dodatkowych banerów reklamowych lub promowanych produktów. Dzięki temu, poza aspektami marketingowymi, wzmacniamy przekaz na temat wybranej zakładki menu i upewniamy użytkownika w którym miejscu się znajduje. Jest to oczywiście dodatkowy zabieg, poza takimi środkami wyrazu jak wyróżnienie poprzez podświetlenie aktywnego elementu / wygaszenie pozostałych elementów, zaznaczenie kolorem itp.

Podczas warsztatu z Klientem ustaliliśmy, że samo wyszukiwanie także będzie miało duży wpływa na znajdowanie produktów. Dlatego zadbaliśmy o to aby wyszukiwarka, która jest istotnym, dobrze widocznym i łatwo dostępnym elementem tego interfejsu, była także funkcjonalna. Stąd wdrożenie kategorii, w ramach których można zawęzić poszukiwania, a także inteligentne podpowiedzi, listujące produkty już w momencie wpisywania frazy. Aby dodatkowo dostarczyć klientowi informacje produktowe, te pojawiają się już na listingu podpowiedzi, jednocześnie ułatwiając dotarcie do pożądanego artykułu.

Ważne elementy i dobre praktyki

Należy pamiętać, że dla jakiej branży byśmy nie projektowali interfejsu sklepu, to nadal jest to sklep, a ten musi sprzedawać. Dlatego warto pamiętać o takim pojęciu jak “above the fold”. Jest to obszar, jaki użytkownik zobaczy po wejściu na daną stronę po raz pierwszy. Kluczowe jest dostarczenie Klientowi informacji, które zachęcą go do dalszego przeglądania strony lub do dokonania zakupu. W celu stwierdzenia czy dany widok spełnia nasze oczekiwania i założenia biznesowe, można wykonać bardzo szybkie i tanie testy. Jednym z nich jest test 5 sekund. Polega on na wyświetleniu badanemu użytkownikowi widoku podstrony przez 5 sekund i zapytaniu go co zapamiętał. Jeżeli elementy, które miały być widoczne w pierwszej kolejności, nie zostaną nigdy wymienione, może być to sygnał do przebudowania badanej podstrony.

Bywa, że sklepy internetowe są przeładowane produktami lub na atakują hasłami dotyczącymi promocji, zalewając użytkownika informacjami, które mogą rozproszyć jego uwagę. Mam tu na myśli oczywiście przesadną liczbę takich elementów. Z drugiej strony jednak nie można popaść w skrajność i nie wspomnieć w ogóle o promocjach. W końcu trzeba jakoś zachęcić klientów do zakupów 🙂 Postawiłem więc na czytelność i wpuszczenie “oddechu” do projektu. Wykorzystanie pełnej przestrzeni ekranu na umieszczenie contentu daje większe możliwości, z których w tym przypadku chciałem skorzystać. Dzięki temu, produkty mogły zostać umieszczone w dużych boxach z wyraźnymi zdjęciami, cenami, labelami informacyjnymi (np. “Promocja”, “Nowość”) oraz przyciskami CTA (ang. Call To Action). Ten ostatni element w przypadku tej realizacji ma trochę inną funkcjonalność niż zazwyczaj. Mianowicie, wspomniana duża liczba produktów występujących w sklepie wynika m.in. z dużej liczby ich wariantów. W związku z tym, w boxach produktowych nie mogliśmy umieścić klasycznego “Dodaj do koszyka”, lecz “Zobacz wszystkie warianty”. Rozwiązanie takie sprawia, że przycisk CTA jest jednoznaczny – wprost informuje o wielości opcji i jasno określa, co stanie się w momencie jego wciśnięcia.

Korzystając ze wspomnianego przycisku przenosimy się na kartę produktu, która może być bogata w wiele jego wariantów. Ponieważ postawiłem na czytelność i przystępność, wszystkie warianty znajdują się możliwie wysoko, by ułatwić użytkownikowi dostęp do nich. Tym samym, Klient nie musi się martwić przeglądaniem strony w celu poszukiwania konkretnej wersji towaru i wie, że wszystkie możliwe warianty znajdują się w miejscu widocznym na pierwszym ekranie. Dzięki zastosowaniu opcji full screen można było umieścić zafixowany element informacyjny. Z punktu widzenia podsumowania zakupów jest on bardzo ważny, ponieważ pokazuje finalną liczbę wybranych elementów oraz zaktualizowaną łączną cenę. Poza tym w jego obszarze znajdują się przyciski “Dodaj do koszyka” oraz “Dodaj do porównania”. Wspomniane zafixowanie gwarantuje dostępność na każdej wysokości listingu wariantów.

Karta produktu bez takich elementów jak nazwa produktu czy cena nie istnieje. Warto zadbać, aby nie były to najmocniej eksponowane elementy, ale by jednocześnie w łatwy sposób dostarczały użytkownikowi wyczerpujących informacji.

Ze względu na mocno rozbudowane menu nie można w prosty i jednoznaczny sposób oznaczyć w miejsca, w którym użytkownik się znajduje. W tej sytuacji pomocą służą okruszki (ang. breadcrumbs). Dzięki nim można również wrócić do innej podstrony, która weszła w skład naszej ścieżki.

Odpowiedź na rzeczywiste potrzeby

W projektowaniu produktów cyfrowych, z którymi nie mieliśmy nigdy styczności najważniejsze jest zrozumienie branży oraz użytkownika. Parametry określające ich profil w połączeniu z wymaganiami biznesowymi dadzą nam jasny pogląd na potrzeby i wymagania, którym trzeba sprostać. Projektując sklep dla branży BHP zauważyłem, że ponad wszystko należy postawić na czytelności i jednoznaczność w przekazie informacji. W innych projektach oczywiście też, ale tutaj szczególnie należało zwrócić na to uwagę. Klienci odwiedzający sklep muszą wiedzieć w jakim są miejscu i gdzie mogą dalej “pójść” w celu znalezienia i zakupu poszukiwanego artykułu. Dlatego też projekt jest raczej stonowany w swojej kreacji i stawia na eksponowanie produktów wraz z niezbędnymi informacjami na ich temat. Odbiorcy tej konkretnej branży nie oczekują wspaniałych wrażeń artystycznych. Zupełnie zbędne w tym przypadku byłyby gradienty, przesadnie duże teksty czy przeładowanie animacjami. Dla klienta tego czy innego sklepu z branży BHP, doświadczenia mają być proste i szybkie. Użytkownik liczy na to, że znajdzie produkt łatwo i bezproblemowo. Oczekiwania są determinowane dużą liczbą wariantów dostarczanych wariantów. Cały proces musi być przystępny i intuicyjny. Zbierając w całość wyszczególnione wyżej wytyczne można napisać, że projekt musi być użyteczny 🙂 Stwierdzenie to jest obecnie tak mocno eksploatowane, że jest używane wymiennie z innymi, bardziej trafnymi określeniami lub wręcz przeciwnie – do zbyt ogólnego opisu. W tym przypadku użyteczność została sprofilowana pod kątem odbiorcy końcowego i zachęcam do tego aby to praktykować.

Wracając do braku odpowiedniego materiału porównawczego do benchmarku, warto sięgać do sprawdzonych praktyk i ujmować je w minimalistycznym stylu. Pozwoli to uniknąć zagubienia się podczas projektowania w zgodzie z nowoczesnymi trendami i przy wykorzystaniu skomplikowanych rozwiązań. Pamiętajmy, że sklep musi sprzedawać, a każde dodatkowe kliknięcie oddala jego użytkownika od zakupu, a naszego Klienta od sukcesu. Nas samych zresztą też.