Jak zaprojektować idealny sklep internetowy?

Aby odpowiedzieć sobie na pytanie jak zaprojektować idealny sklep internetowy, warto najpierw zacząć od określenia jaki właściwie jest „sklep idealny”. Dla projektantów to  sklep, którego wszystkie procesy, funkcjonalność, a także wygląd spełniają potrzeby dwóch grup: klienta/zleceniodawcy oraz użytkownika czyli końcowego odbiorcy.

Oczekiwania tych dwóch grup w większości się pokrywają. Każdemu właścicielowi sklepu zależy na tym, aby jego klienci byli zadowoleni i chętnie korzystali z jego usług, jednak dodatkowo ważne dla niego jest też by strona była dobrze zbudowana technicznie i sprawnie obsługiwał wszystkie procesy i integracje. Użytkownika taki sklep musi nie tylko zainteresować i przyciągnąć jego uwagę, ale przede wszystkim powinien dać mu pewien komfort, sprawić by jego subiektywne wrażenie było pozytywne. 

O tym jak wpływać na doświadczenie użytkownika wiemy już całkiem sporo, ponieważ tematem User Experience badacze zajmują się od wielu lat. Bardzo uogólniając można posłużyć się słynnym powiedzeniem „Nie każ mi myśleć!”, zaczerpniętym z tytułu książki Steve’a Kruga, która powstała już ponad 20 lat temu.

Nasze rozwiązania powinny  być dla użytkownika:

• Bardzo intuicyjne i proste w obsłudze – dobrze jeśli oparte są na elementach, które zna już z innych stron internetowych, ale nie jest to obowiązkowe. Nowe, ciekawe rozwiązanie może jednocześnie przyciągnąć uwagę użytkownika  i uatrakcyjnić stronę. Pozytywny odbiór nowoczesnych, innowacyjnych stron będzie dobry, o ile będą one maksymalnie intuicyjne i zrozumiałe.
• Atrakcyjne – sklep powinien przyciągnąć jego uwagę i zrobić dobre pierwsze wrażenie. Użytkownik, który już na początku swojej wizyty pozytywnie odbierze stronę, będzie bardziej tolerancyjny na ewentualne problemy związane z korzystaniem z niej. Pamiętajmy jednak, by zainteresować, a nie przytłoczyć i rozproszyć uwagę użytkownika. Duże znaczenie mają tu wysokiej jakości zdjęcia i starannie dobrane oraz podzielone treści.
• Dostępne – pamiętajmy, że klientami sklepu mogą być także osoby starsze i niepełnosprawne. Dobrze zaprojektowany e-commerce  to też taki, który umożliwia i ułatwia korzystanie z niego również tym grupom klientów. 

Projektowanie idealnego sklepu internetowego: wyzwania i pytania

Obecne czasy są bardzo dynamiczne, zmieniają się nie tylko trendy i technologie, ale również sam użytkownik. Z tego powodu również dziedzina User Experience ewoluuje każdego dnia i wymaga ciągłego badania odbioru witryn przez klientów. Zachowanie użytkownika, jego zrozumienie strony oraz  satysfakcję z korzystania z niej można badać na wiele sposobów i za pomocą różnych narzędzi. Możemy skorzystać z pomocy firmy badawczej (głównie gdy chcemy sprawdzić odbiór istniejącego sklepu lub zbadać działanie prototypu)lub  samodzielnie użyć różnych narzędzi (często darmowych) by badać ruch i zachowanie użytkownika na stronie (np. za pomocą Hotjar). Bardzo dobrym źródłem takich danych jest Baymard Institute, serwis, który prowadzi badania stron na dużą skalę w zakresie e-commerce na całym świecie. Na podstawie swoich prac tworzą wytyczne bardzo pomocne w tworzeniu sklepów przyjaznych i zrozumiałych dla ich użytkowników.

W odbiorze strony przez użytkownika bardzo ważna jest jego percepcja, na którą wpływają elementy używane przez projektantów takie jak: barwa, kształt, rytm, lokalizacja na stronie, położenie względem innych elementów, kompozycja, typografia. To właśnie sprawne operowanie tymi elementami wpływa na zrozumienie procesu przez użytkownika, na jego intuicyjność. Dla projektanta przydatna zatem będzie znajomość psychologii w zakresie procesów poznawczych człowieka i znajomość zasad, które na te procesy wpływają (w jaki sposób czyta powiązane ze sobą kształty, co zauważy, a co zignoruje, jak je zinterpretuje). Tłumaczą to np. znane w psychologii zasady Gestalt (zasada bliskości, podobieństwa, symetrii, domknięcia itd.).

Wyposażeni w wiedzę i dane na temat tego jakie wymagania powinien spełniać sklep idealny, by został dobrze odebrany przez użytkownika oraz by mógł on sprawnie korzystać ze wszystkich jego funkcjonalności, pozostaje nam odpowiedzieć na główne pytanie – jak go zaprojektować? Jak uczynić by stał się funkcjonalny, intuicyjny, by trafił do odpowiedniej grupy odbiorców, jakie wybrać dla niego rozwiązania i możliwości? Tu z pomocą przyjdą nam założenia Design Thinking. Na wstępie cały proces możemy podzielić na 4 etapy. Fazy te będą się nieco od siebie różnić w zależności od tego czy proces projektowania dotyczy redesignu czy nowego sklepu.

Empatyzacja i definicja problemu

Empatyzacja to faza, w której zdobywamy kluczową wiedzę o użytkowniku. Odpowiadamy na pytania dla kogo projektujemy, jakie są najważniejsze potrzeby i problemy użytkownika. Słuchamy, obserwujemy, próbujemy wejść w jego buty  by zrozumieć motywacje, które będą wpływać na jego zachowanie i podejmowane decyzje. Następnie w celu usystematyzowania zdobytej wiedzy przechodzimy do definicji problemu, w której wskazujemy realne potrzeby i oczekiwane korzyści. Na tym etapie bardzo ważne jest rozróżnienie tego co „wydaje” się użytkownikowi, klientowi lub nam samym od tego, co rzeczywiście jest prawdziwym problemem i potrzebą. Jest to etap bardzo trudny, ponieważ wymaga od wszystkich porzucenia standardowego myślenia i dotarcia do samego sedna problemu. Etap ten możemy przeprowadzić z wykorzystaniem takich technik i badań jak:

• wywiady, 
• obserwacje, 
• ankiety, 
• tworzenie person i map empatii, 
• analiza konkurencji,
• audyt użyteczności (przy redesign),
• warsztat Discovery,
• technika 5x dlaczego, 
• matryca propozycji wartości, 
• priorytetyzacja.

W czasie badań pojawi się prawdopodobnie wiele nowych informacji, które będzie trzeba uporządkować, powiązać ze sobą, wybrać te najważniejsze (a czasem najpilniejsze do wdrożenia w pierwszym etapie) do  realizacji głównych celów. Pojawią się też przesłanki wskazujące, że z niektórych rozwiązań warto zrezygnować lub zastąpić je innymi (mogą być zbyt kosztowne, niewykonalne lub zbyt trudne do wdrożenia). Bardzo przydają się wtedy te słynne kolorowe,kwadratowe karteczki, które zbierają wszystkie dane i dają możliwość dowolnego przekładania, układania i porządkowania informacji.

Generowanie pomysłów

Etap ten polega na tworzeniu wielu rozwiązań i wyróżnia się podejściem ilościowym, a nie jakościowym. Zatem zadaniem projektantów jest wygenerowanie jak największej liczby pomysłów na zaspokojenie potrzeb użytkowników, także takich, które wydają się szalone i nierealne, ale mogą się stać inspiracją dla nieszablonowego podejścia. To jeszcze nie czas na tworzenie idealnego rozwiązania, lecz na sprawdzenie jak największej liczby możliwości, pobudzenie potencjału zespołu projektowego, wykorzystanie różnych doświadczeń i spojrzeń interdyscyplinarnego zespołu. 

W celu generowania pomysłów korzysta się z różnych technik kreatywnych takich jak burza mózgów (Brainstorming), która pozwala na śmiałe i swobodne przedstawienie wszystkich pomysłów nawet tych najbardziej zaskakujących. Ważne jest by przestrzegać zasad: nie oceniać i nie krytykować, wszystkie pomysły zapisywać, inspirować się pomysłami innych.

W dalszej części tego etapu następuje kategoryzowanie pomysłów w celu wybrania tych z największym potencjałem. By przeprowadzić selekcję najpierw należy wszystkie pomysły pogrupować na:

• pomysły, z których na pewno nie skorzystamy,
• zbyt trudne lub z jakiś powodów niemożliwe do wdrożone, ale inspirujące i ciekawe,
• zbyt przeciętne lecz przydatne i łatwe do wprowadzenia,
• propozycje z największym potencjałem.

Pozostaje już tylko podjęcie decyzji, którymi pomysłami będziemy zajmować się w dalszych etapach. Pomóc może tu matryca decyzyjna, która na osi „istotność” i „łatwość” wskaże, które opcje są najbardziej korzystne. Na tym etapie można wykorzystać warsztaty: Event Storming, Przegląd interfejsu, Priorytetyzacji, Design Studio.

Prototypowanie

Na tym etapie powstają pierwsze namacalne projekty (technika jest dowolna, od flamastrów i kredek po „działające” prototypy w Figmie lub Adobe XD). Najważniejsze jest by móc wybrane pomysły zaprezentować klientowi, sprawdzić i przetestować z użytkownikami, zanim zostaną podjęte kosztowne prace wdrożeniowe. Przy projektowaniu sklepu dobrze sprawdza się przygotowanie najpierw makiet o niskim poziomie szczegółowości (low fidelity), na podstawie, których można skupić się na układzie i najważniejszych funkcjonalnościach. Dopiero po nich możemy przejście do projektów o wysokim poziomie szczegółowości (high fidelity), które będą jednocześnie „klikalnymi” prototypami. Zanim jednak zajmiemy się UI projektu (jego wyglądem), warto poświęcić czas na przygotowanie tablicy inspiracji (Moodboard) – jednej lub kilku, które zgromadzą dobraną kolorystykę, fonty, fakturę i inne inspiracje, które użyjemy w projekcie sklepu.

Testowanie

Ostatni etap to sprawdzenie czy wizja projektantów zaspokoi oczekiwania realnych użytkowników. Niestety, mimo że wyczekiwany, jest to jednak bardzo trudny moment dla całego zespołu, ponieważ jego członkowie muszą być gotowi nie tylko na otrzymanie negatywnej informacji zwrotnej, ale nawet na konieczność powrotu do punktu wyjścia czyli do pierwszego etapu (empatyzacji i definicji problemu). Iteracja jest bardzo ważna w całym procesie, ponieważ projektu strony nie powinno się traktować jako skończone dzieło, lecz na bieżąco go ulepszać. Po przejściu wszystkich faz zmienia się nasze postrzeganie danego tematu, dlatego ponowne jego przestudiowanie i wprowadzenie zmian, może znacząco podnieść jakość projektowanego sklepu.

Do testowania możemy wykorzystać m.in. testy użyteczności lub testy A/B. Przebadanie produktu i iteracje to szansa uniknięcia błędów i konieczności wprowadzania poprawek już na wdrożonym sklepie, co jest bardzo opłacalne.

O czym jeszcze pamiętać?

• Interdyscyplinarny zespół – do projektu e-commerce powinien zostać utworzony zespół, w skład którego wejdą specjaliści z różnych dziedzin, m.in.: projektanci, developerzy, marketingowcy, managerowie zarówno po stronie wykonawcy jak i zleceniodawcy. Jest to ważne by w procesie tworzenia projektu uczestniczyło wiele wykwalifikowanych i doświadczonych osób, które będą uwzględniać różne problemy, rozwiązania, potrzeby i technologie.
• Dostępność – ze sklepu będą korzystać osoby z mniejszym i większym doświadczeniem, a także takie, które posiadają różnego rodzaju niepełnosprawności (np. wadę wzroku) więc powinien on być dostępny dla tych wszystkich grup i dostosowany do ich potrzeb. Najlepiej by spełniał wytyczne dostępności cyfrowej WCAG (m.in. prawidłowy kontrast) i dawał możliwość dostosowania widoku (np. zmiana wielkości fontów).
• Responsywność – sklep powinien nie tylko być dostępny na urządzeniach mobilnych, ale również dostosowywać się do zmiany wielkości urządzenia pod względem m.in. wielkości czcionki, układu – tak by zakupy na telefonie były łatwe i wygodne.

Dokładne przeprowadzenie procesu projektowego oraz zaangażowanie specjalistów umożliwi stworzenie rozwiązań oczekiwanych przez użytkowników, funkcjonalnych, opłacalnych oraz sprawnych technicznie. Jest to proces złożony, czasem skomplikowany i wymagający zaangażowania wielu osób, ale jednocześnie inwestycja w UX  przynosi ogromny zysk.

„Każdy dolar zainwestowany w UX zwraca od 10$ do 100$”  – (“The Six Steps For Justifying Better UX” – raport firmy Forrester z 2016r.)

Jest tak dlatego, że dobrze zaprojektowany sklep doceni każdy użytkownik, ponieważ nie będzie tylko przyjemny, ale też podniesie komfort robienia w nim zakupów. A poświęcenie czasu na badanie prototypu znacznie zmniejszy koszty wdrażania zmian i poprawek.