• Home
  • <
  • Blog
  • <
  • 10 błędów UX/UI w e-commerce, czyli jak skrzywdzić klienta e-sklepu?

UX | UI, E-commerce

28 sierpnia, 2017

Czas czytania:  minuty

10 błędów UX/UI w e-commerce, czyli jak skrzywdzić klienta e-sklepu?

Madzia Ciołkowska

Funkcjonalność, intuicyjność, a kiedy mowa o sklepie internetowym współczynnik konwersji – to główne wyznaczniki tego, czy witryna “działa”. Chyba każdy z nas, kto robił zakupy w internecie, może bez problemu wskazać sklepy, gdzie przebiegało to bez problemu, i takie gdzie po przejściu ścieżki od znalezienia produktu do finalizacji zakupów czuł się jak po zdobyciu Mount Everestu. Przedstawimy listę kilku najczęstszych błędów przy projektowaniu sklepu internetowego. Czego należy się wystrzegać, a na co zwracać szczególną uwagę?

Kto jest klientem dla projektanta w branży e-commerce? Można byłoby założyć, że jest nim właściciel sklepu, który przychodzi z potrzebą zaprojektowania lub przebudowy serwisu. W końcu to on zleca, pokrywa koszty, wymaga i ostatecznie zatwierdza projekt. W taką pułapkę mylnego wyobrażenia o odbiorcy łatwo wpaść i zapomnieć, kto tak naprawdę jest klientem sklepu internetowego. A klientami tymi są użytkownicy. Projekty e-commerce powinny ułatwiać użytkownikom dokonywanie zakupów, stąd konieczność poznania grupy docelowej projektowanego sklepu. Inaczej będziemy projektować sklep dla przyszłych mam, inaczej dla miłośników crossfitu.

Pamiętaj:

  • poznaj grupę docelową sklepu internetowego, brand personę marki. Nie bój się zapytać właściciela sklepu, kto jest jego klientem, w końcu ma o tym największą wiedzę;
  • dobierz kolory, fonty, a nawet charakter ikon do grupy docelowej. Nie “przemycaj” koniecznie pastelowego różu w sklepach typowo dedykowanych mężczyznom.

Tworzenie przeszkód i kierowanie się tylko wyglądem

Chyba każdy projektant, nie tylko działający w sferze e-commerce, chciałby, aby jego projekty miały efekt “łał”. Większość klientów zlecających stworzenie lub przeprojektowanie sklepu internetowego, także chce, aby efekt spełniał jego oczekiwania estetyczne. To powoduje, że projektanci skupiają się często bardziej na aspekcie wizualnym niż na użyteczności. Niesłusznie. Należy zadać sobie pytanie: czy sklep ma ładnie wyglądać, czy być dochodowy?

Warto skupić się na kilku sprawach:

  • kieruj się funkcjonalnością i użytecznością serwisu. Jeśli coś jest wygodniejsze dla użytkownika, ale np. mniej estetyczne dla klienta, który zleca projekt – zawsze wybieraj wartość dla użytkownika. Ostatecznie, zawsze będzie to z korzyścią dla właściciela sklepu;
  • postaw na minimalizm. Przeładowane graficznie strony, jeśli dodasz do tego mało funkcjonalne rozmieszczenie kluczowych elementów, będą źle odbierane przez użytkowników;
  • korzystaj z gotowych rozwiązań i nie szukaj “na siłę”. Bądź unikalny, ale jeśli użytkownicy są przyzwyczajeni do menu na urządzeniach mobilnych w lewym górnym rogu, nie rób go na siłę w prawym dolnym.

Niewystarczająca jakość zdjęć

W dużym uproszczeniu możemy powiedzieć, że w sklepie internetowym sprzedajemy “zdjęciem”. Użytkownik nie ma możliwości fizycznego kontaktu z produktem. Jeśli zabierzemy mu jeszcze część wizualną – najpewniej poszuka innego sklepu. Oczywiście wszystko zależy od asortymentu. Inaczej podchodzimy do sprzedaży części zamiennej pralki, a inaczej do letniej sukienki. Niemniej, dobre jakościowo zdjęcie, oddające zalety produktu, na neutralnym tle to zawsze dobry wybór.

Wybierając zdjęcia, pamiętaj:

  • powinno się ono skupić głównie na ekspozycji produktu;
  • tło powinno być neutralne. Jeśli produkt przedstawiony jest w ciekawej scenerii kosztem ekspozycji, pamiętaj, aby dodatkowo dołączyć zdjęcie samego produktu;
  • jakość a wielkość zdjęcia. Zdjęcie produktu nie może być zbyt małe, ale nie przesadzaj też z wielkością, bo kilku megabajtowe obrazy (zwłaszcza w większej ilości) wpłyną na czas ładownia serwisu.

Jak myślisz, które zdjęcie lepiej pokazuje produkt?

Content is king? Nie zawsze – przeładowanie treściami albo ich brak

Obok zdjęć to właśnie content, czyli treści głównie interesują użytkowników. Ponadto musimy pamiętać, że przeważająca większość zapytań w Google ma formę tekstową. Zatem pod kątem pozycjonowania sklepu, a co za tym idzie łatwości znalezienia go przez użytkowników, treść ma ogromną wartość. Czy myślenie o contencie na etapie projektu ma w ogóle sens? Przecież przygotowując projekt zdarza się, że nie mamy gotowych opisów produktów, informacji o sklepie. Często z pomocą przychodzi lorem ipsum, ale coraz częściej mówi się, że to nie wystarczające rozwiązanie. Coś, co ładnie wygląda na projekcie w formie przykładowego tekstu, nie zawsze po zderzeniu z rzeczywistością będzie równie dobre (np. przy dwa razy dłuższym tekście lub wypunktowaniu).

Jak sobie z tym poradzić?

  • na etapie projektu poproś właściciela sklepu o przykładowy, najlepiej jak najbardziej rozbudowany, opis produktu wraz z parametrami – pozwoli Ci to lepiej zaplanować przestrzeń;
  • pamiętaj o miejscu dla tekstu na ważnych z punktu widzenia SEO stronach –- np. stronach kategorii;
  • nie traktuj stron informacyjnych “po macoszemu”. Warto dobrze zaprojektować kilka kluczowych podstron np. kontaktu czy form zwrotu i dostawy, z którymi użytkownik będzie miał styczność;
  • Google ocenia głównie treści widoczne dla użytkowników. Unikaj zatem ukrywania istotnych z punktu widzenia SEO tekstów. Istotne teksty nie powinny pojawiać się np. po najechaniu na ikonkę.

Niby wszystko, co potrzebne do kupienia produktu jest, a jednak czegoś brakuje. Wiesz czego?

Błędna nawigacja

Sklep internetowy to jedna z najbardziej rozbudowanych struktur w internecie. Dlatego tak ważna jest prawidłowo skonstruowana nawigacja. Rozumiemy ją jako poruszanie się pomiędzy kolejnymi podstronami, czyli menu, drzewa kategorii, ale także filtry czy wyszukiwarka. Mimo że to tak ważny z punktu użyteczności element, wciąż popełniamy sporo błędów w tym obszarze. Do najczęstszych można zaliczyć duplikację linków z menu głównego w stopce, czy niedostosowanie menu do potrzeb drzewa kategorii.

Pamiętaj więc, aby:

  • dobrać nawigację do potrzeb sklepu. W jednym przypadku bardziej sprawdzi się menu poziome, w innym pionowe;
  • być elastycznym. Drzewo kategorii może ulec zmianie. Nie twórz sklepu “na sztywno” – pamiętaj, że kategorię mogą się zmniejszyć lub zwiększyć wraz z rozwojem sklepu.

Zawiłe formularze

Chyba nikt z nas nie przepada za wypełnianiem pól formularza. A jeśli tych pól jest naprawdę wiele, albo nie wiemy, co dokładnie powinniśmy wpisać, albo komunikat o błędzie jest tak lakoniczny, że trzeba zgadywać co wpisać? Koszmar dla większości użytkowników. Nikt z nas nie lubi być Indiana Jonesem przedzierającym się w gąszczu pajęczyn kolejnych pól formularza nie wiedząc, dokąd ta droga go doprowadzi.

Aby uniknąć tego błędu:

  • umieszczaj tylko niezbędne pola formularza;
  • przyciski i etykiety nazywaj zawsze w prosty i zrozumiały sposób;
  • oznacz prawidłowo błędy i ich charakter;
  • proces zakupowy podziel na kroki lub umieść całość na onepage’u, aby klient wiedział co go czeka;
  • daj możliwość zakupów bez rejestracji – wielu klientów wciąż nie przepada za zakładaniem konta i wiązaniem się ze sklepem “na stałe”.

Nieintuicyjne umieszczenie kluczowych elementów

Nic tak nie dezorientuje użytkownika, jak niemożliwość znalezienia podstawowych elementów sklepu w celu przejrzenia oferty czy złożenia zamówienia. Wyobraź sobie, że spędzasz jakiś czas, wybierasz interesujące Cię produkty, ustawiasz parametry, a potem zastanawiasz się co zrobić, żeby je kupić. Zadaniem projektanta e-commerce jest ułatwiać zakupy, sprawiać, aby sklep był przyjazny w odbiorze dla użytkownika. Elementy koszyka, logowania, wyboru języka, wyszukiwarki czy menu muszą być bardzo dogłębnie przemyślane i zaprojektowane tak, aby klient sklepu intuicyjnie mógł w nie kliknąć i przejść do finalizacji zamówienia.

Nie zapomnij, by:

  • podstawowe elementy były zawsze łatwo dostępne i widoczne dla użytkownika;
  • unikać miejsca na domysły. „Co dalej”, „gdzie kliknąć”, „czy to wszystko”? Jeśli takie pytania zadaje sobie użytkownik, zdecydowanie coś poszło nie tak na etapie projektu;
  • nie walczyć z przyzwyczajeniami użytkowników. Zwłaszcza podstawowe elementy sklepu są mocno zakorzenione w podświadomości użytkowników i intuicyjnie będą ich szukać w określonych miejscach. Użytkownicy nie będą obwiniać się, że czegoś nie wiedzą. Oni OCZEKUJĄ łatwego, intuicyjnego funkcjonowania. Porażka w tym zakresie nie jest ich porażką, ale projektanta.

Niezauważalne i nieczytelne komunikaty

Komunikaty to coś, co może wprowadzić w konsternację. Np. w formularzu nie wystarczy wyświetlić błędu “niepoprawny format daty”. Warto, aby taki poprawny format pojawił się np. w formie przykładu. Kolejnym problemem jest “niezauważalność”. Jeśli komunikat nie będzie w kontrastującym z resztą strony kolorze lub nie będzie wyświetlał się obok błędu, jest bardzo duże prawdopodobieństwo, że umknie on użytkownikowi.

Jak temu zaradzić?

  • Komunikaty powinny być zwięzłe, jednoznaczne i zawsze sugerujące prawidłową odpowiedź ze strony użytkownika.
  • Muszą być widoczne – zarówno kolor, jak i umiejscowienie musi jednoznacznie wskazywać, czego dotyczą.

Dlaczego to ważne? Spróbuj znaleźć komunikat i pole, którego dotyczy.

Rozmiar ma znaczenie? Tak.

Zapominanie przy projektowaniu o urządzeniach mobilnych to kluczowy błąd, który mocno ogranicza rozwój i sprzedaż w e-sklepie. Ponad połowa ruchu w sieci pochodzi od użytkowników smartfonów. Jeżeli sklep nie jest responsywny albo nie posiada wersji mobilnej, to przegrywamy już na starcie. Brak wersji mobilnej lub responsywności to nie jedyny błąd. Często wersja mobilna, to próba skopiowania treści i funkcji jeden do jednego z wersją desktopową. Takie rozwiązanie na dłuższą metę, pod kątem UX/UI nie jest dobre. Pewne ograniczenia wynikające z wielkości ekranów tabletów czy smartfonów powodują, że wersje mobilne e-sklepu powinny być wyposażone przede wszystkim w bazowe funkcje, tak aby użytkownik w jak najprostszy sposób mógł się zapoznać z ofertą i dokonać finalizacji zakupów.

Pamiętaj:

  • o przygotowaniu wersji na urządzenia mobilne;
  • nie staraj się na siłę kopiować wersji desktopowej na wersje mobilne. Czasami mniej znaczy więcej. Zrezygnowanie z pewnych funkcji w wersjach mobilnych, może być wartością dodatnią dla odbioru serwisu jako całości;
  • o przemyślanym wyświetlaniu i umiejscowieniu kluczowych elementów, jak menu, koszyk, rejestracja, wyszukiwarka, układ strony produktu czy formularz procesu zakupowego.

Nie myślenie o rozwoju

Żaden sklep nie jest (a na pewno nie powinien) być zaprojektowany “raz na zawsze”. Konieczność zmian jest odzwierciedleniem rozwoju firmy, zatem trzymanie się sztywno myśli, że będzie 10 kategorii produktów, a w parametrach 5 kolorów jest z góry błędnym założeniem.

Miej na uwadze to, że nie jesteś w stanie przewidzieć wszystkiego. Nawet będąc wyposażonym w bardzo dobry brief projektu i mając sporo informacji o sprzedawanych produktach, nie jesteś w stanie przewidzieć przyszłości. Staraj się, aby projekt był w miarę możliwości elastyczny i modyfikowalny. Zaproponuj takie rozwiązania, które bez przebudowy całej architektury strony, będą pozwalały na wprowadzenie pewnych zmian, czy uaktualnień oferty.

E-commerce to ciągły rozwój, a co za tym idzie – również rozwój dostarczanych rozwiązań przez projektantów. „Błędów nie popełnia tylko ten, co nic nie robi”, ale niektórych z nich na pewno można – I TRZEBA! – się wystrzegać. Aby dobrze zrozumieć problemy e-commerce, trzeba mieć zawsze szerszy obraz całości. Obecnie przy projekcie sklepu internetowego potrzebna jest dogłębna znajomość produktu, nad którym pracujemy. Pozwoli to nie tylko uniknąć większości błędów, ale dostarczyć użytkownikom funkcjonalny, intuicyjny produkt, z którego chętnie skorzystają. Wyłapać takie błędy może pomóc audyt UX. Jeśli potrzebujesz pomocy z optymalizacją UX/UI swojego sklepu, skontaktuj się z nami!

Udostępnij na:

Madzia Ciołkowska

>