Co to jest UX i UI oraz jakie mają znaczenie w Ecommerce?

Nawet dla osób na co dzień zajmujących się Ecommerce, UX oraz UI to dwa dość obco brzmiące skróty. W tym artykule dowiesz się więc, co to jest UX oraz UI, oraz czym one się różnią i czy są ważne w Ecommerce.

UX w Ecommerce – co to jest?

UX jest skrótem od User Experience, czyli tłumacząc dosłownie doświadczenia użytkownika. To proces projektowania aplikacji lub strony, podczas którego budujesz doświadczenia użytkownika Twojego sklepu internetowego. Każdemu właścicielowi sklepu internetowego, czyli pewnie również Tobie, chodzi o to, by użytkownik realizował pewne cele. Celem biznesowym jest na przykład dokonanie zakupu, a mikro-celem, czyli celem konkretnej podstrony będzie dodanie produktu do koszyka.

W UX e-commerce przede wszystkim chcesz, by klient, wchodząc na Twój sklep internetowy, finalnie dokonał zakupu.

Celem UX jest zwiększenie konwersji, ale robimy to poprzez zapewnienie takiego komfortu korzystania z Twojego sklepu, by klient dokonał zakupu w sposób łatwy, przyjemny dla niego. By nie musiał się zastanawiać, gdzie znajduje się jakiś element. Użytkowanie sklepu ma być maksymalnie proste i intuicyjne:

• klient powinien w łatwy sposób wyszukać produkt;
• wyszukiwarkę należy tak wyeksponować, by nie było wątpliwości, że znajduje się właśnie w tym miejscu;
• wyniki wyszukiwania powinny być odpowiednio dostosowane do klienta sklepu i w czytelny sposób przedstawione;
• oczywiście strona musi być responsywna, czyli wyświetlać się prawidłowo na wszystkich typach urządzeń.

Ważne jest, żeby wypracować cele biznesowe. Sprawdzić, co pragnie osiągnąć właściciel sklepu internetowego. Jednak musisz też zbadać i poznać grupę docelową. Dlatego w skład prac UX wchodzą warsztaty z osobą, która zna personę zakupową.

Przykład: Sprzedajesz suplementy dla grupy wiekowej 60+

W takim przypadku musisz zaprojektować proces zakupowy, podzielony na kilka prostych kroków. Dlaczego? Ponieważ wszystkie informacje w jednym kroku, to może być zbyt dużo na raz dla tej grupy docelowej.
Dlatego przykładowe kroki w tym procesie mogą wyglądać tak:

1. Zaloguj się/Zarejestruj się
2. Podaj swoje dane
3. Wybierz dostawę
4. Wybierz formę płatności

Przeczytaj również nasz artykuł od czego warto zacząć zmiany UX w sklepie internetowym.

Po wdrożeniu UX i UI prowadź testy A/B

Musisz zdecydować, czy zaczynasz od nowego projektu sklepu internetowego, czy wykorzystujesz to, co już dobrze funkcjonuje u konkurencji. Dobrym zwyczajem jest inspirowanie się, a później badanie i poprawianie.

Warto zainspirować się od konkurencji, która jest już liderem. Pamiętaj, inspirowanie nie oznacza kopiowanie.

Jeśli chcesz przyciągnąć do siebie użytkownika np. używającego na co dzień Allegro. Warto wdrożyć podobne rozmieszczenie elementów i funkcjonalności w Twoim sklepie. Na początku możesz więc wykorzystać to, co świetnie działa u konkurencji, a potem używać testów A/B i stopniowo wdrażać małe zmiany, by osiągnąć wyniki jeszcze lepsze niż Twój wzór.

Są również pewne normy i ogólnie stosowane praktyki, które każdy UX designer powinien znać, oraz które nabył w trakcie pracy z klientami. Są nawet strony jak Goodui, na których UX designerzy dzielą się rezultatami swoich testów A/B.

My w Tebim korzystamy z bazy dobrych praktyk w Ecommerce, która zawiera ponad 300 punktów, które sprawdzamy podczas audytu UX, czy tworzenia nowego szablonu sklepu internetowego.

Nie można jednak zapomnieć, że Twój sklep ma unikalną grupę docelową i oczywiście na starcie warto zaufać wiedzy i doświadczeniu UX designera, ale później to tylko testy A/B i ankiety zadowolenia klientów pomogą Tobie osiągnąć intuicyjny design sklepu, zadowolenie klientów i w efekcie tego, najwyższą konwersję sprzedaży.

Jak to jest z UX w Prestashop?

Załóżmy, że na swojej stronie masz koszyk zakupowy podzielony na 3 etapy, ale zastanawiasz się, czy może lepiej mieć jeden etap w Twoim przypadku. W Prestashop stworzenie sobie takiego porównania jest problematyczne. Prestashop nie ma gotowych narzędzi, które pozwolą Ci w łatwy sposób przeprowadzić takie testy. Części frontowe, np. przyciski „dodaj do koszyka”, można w łatwy sposób sprawdzić. Jednak w procesie zakupowym jest to już bardziej kłopotliwe. Zależy więc, czy chodzi o warstwę wizualną, frontową w sklepie internetowym, np. wyświetlenie banneru, czy o część procesu zakupowego, jakim jest koszyk zakupowy.

Pamiętaj! Nawet jeśli wprowadzisz coś, co Tobie lub osobie wdrażającej wydaje się najlepsze, to i tak powinieneś to testować.

Co to jest UI?

UI to skrót od User Interfejs. Przez zły UI możesz mieć złe doświadczenia w sklepie internetowym. Proces UI zachodzi już po UX. Jeśli pominiesz projektowanie UI, to designer może stworzyć produkt nie tyle pod klienta docelowego, a pod siebie. Ale co to jest UI? UI jest warstwą wizualną w sklepie internetowym. Polega na nadaniu makiecie stworzonej na etapie UX części wizualnej, np. odpowiedniemu pokolorowaniu przycisków, dodaniu odpowiedniej szaty graficznej. Jednym z przykładów sklepów PrestaShop, w których wdrażaliśmy UX i UI design jest Brodrene.

Różnice między UI a UX w Ecommerce

W procesie UX zaplanujesz, w którym miejscu na Twoim sklepie będzie wyszukiwarka, a w którym miejscu filtry. W procesie UI nadasz odpowiedni cień do przycisków, pokolorujesz przyciski, nadasz odpowiednią szatę graficzną swojemu sklepowi itp. Oczywiście dość mocno to upraszczam. Bo na przykład kolejnym krokiem na etapie UI będzie zgodność z księgą znaku, ale o tym  może kiedy indziej. UI to pokolorowanie makiet, nadanie designu makiet, które były zaprojektowane na etapie UX.

Po zakończonym etapie UI, designer UX powinien sprawdzić, czy to, co zostało stworzone, jest poprawne i zgodne z wcześniej wyznaczonymi założeniami. Na tym etapie można też dokonać pewnych korekt.

1. W Ecommerce częściej poprawiamy UX, czy UI? Co ma większy wpływ na konwersję na sklepie internetowym?

Gdy masz już funkcjonujący sklep z jakąś szatą graficzną, to już samo poprawienie UX może dać mu bardzo dużo. Przykładowo, jeśli masz zaprojektowany przycisk „SZUKAJ” i chodzi tylko o zmianę jego położenia, by był bardziej widoczny, to ta zmiana da Ci najwięcej.
Może się też zdarzyć tak, że trzeba zmienić położenie poszczególnych elementów i będzie potrzebny do tego oddzielny projekt UI. Na przykład musisz przenieść filtr z lewej belki nad listę produktową. Będzie to trzeba odpowiednio zaprojektować.

Pamiętaj, że to wszystko zależy od konkretnej sytuacji.

2. Czy możemy rozdzielić te dwa procesy?
   

W pewnych sytuacjach tak, jednak dobrze, by jeden proces szedł w parze z drugim. Możesz je rozdzielić i pozmieniać pewne elementy, gdy sklep już istnieje i funkcjonuje. Natomiast w momencie wdrażania i projektowania nowego sklepu, UX i UI jest równie ważne.
Jeśli jesteś na etapie projektowania UI, to musisz mieć bazę do tego, czyli chociażby makietę, tworzoną na etapie UX.

Podsumowanie – UI i UX w Ecommerce

Dzięki temu artykułowi wiesz już, co to jest UX oraz UI, jednak powtórzmy to jak najprościej:

• UX – na tym etapie poznajesz użytkownika i jego potrzeby, projektujesz funkcjonalności.
• UI – nadanie warstwy wizualnej całości Twojej koncepcji. Mówiąc kolokwialnie, pokolorowanie i ozdobienie.