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

E-commerce, UX | UI

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. Poniżej zamieszczam kilka najczęstszych błędy przy projektowaniu sklepu internetowego. Czego należy się wystrzegać, a na co zwracać szczególną uwagę?

1. Brak wiedzy kto jest Klientem e-sklepu

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 (często niemałe), 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 – 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. 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 🙂

2. 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 nam 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 efekcie wizualnym niż na użyteczności. Niesłusznie. Należy zadać sobie pytanie: czy sklep ma być “ładny” czy dochodowy?

Pamiętaj:

  • 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 🙂 Przykładowe biblioteki wzorców projektowych znajdziesz tutajtutaj i tutaj

3. 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.

Pamiętaj:

  • zdjęcie powinno skupić się 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ą zdjęcia bo kilku megowe obrazy (zwłaszcza w większej ilości) wpłyną na czas ładownia serwisu.

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

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

Obok zdjęć to właśnie content, czyli treści jest tym co głównie interesuje 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).

Pamiętaj:

  • 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?

5. Błędna nawigacja

Sklep internetowy to jedna z najbardziej rozbudowanych struktur w internecie. Dlatego tak ważna jest prawidłowo skonstruowana nawigacja, rozumiana 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:

  • dobierz nawigację do potrzeb sklepu. W jednym przypadku bardziej sprawdzi się menu poziome, w innym pionowe;
  • 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.

6. 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ć, a 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 Jonsem przedzierającym się w gąszczu pajęczyn kolejnych pól formularza nie wiedząc dokąd ta droga go doprowadzi.

Pamiętaj:

  • umieszczaj tylko te pola formularza, które są niezbędne;
  • 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, aby klient wiedział co go czeka lub umieść całość na onepage’u;
  • 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”.

7. Nieintuicyjne umieszczenie kluczowych elementów

Nic tak nie dezorientuje użytkownika jak niemożność 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.

Pamiętaj:

  • podstawowe elementy powinny być zawsze łatwo dostępne i widoczne dla użytkownika;
  • nie zostawiaj 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 walcz 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.

8. 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.

Pamiętaj:

  • 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ą.

Jak szybko znajdziesz komunikat i pole, którego dotyczy?:)

9. Rozmiar ma znaczenie? Tak.

Zapominanie przy projektowaniu o urządzeniach mobilnych to kluczowy błąd, który mocno ogranicza rozwój i sprzedaż e-sklepu. Ponad 46% 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:

  • a raczej nie zapominaj 🙂 o wersjach 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;
  • przemyśl dobrze przede wszystkim wyświetlanie i umiejscowienie kluczowych elementów, jak menu, koszyk, rejestracja, wyszukiwarka, układ strony produktu czy formularz procesu zakupowego.

10. 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.

Pamiętaj:

  • 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 przebudowany całej architektury strony, będą pozwalały na wprowadzenie pewnych zmian, 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ą.

Udostępnij na:

Madzia Ciołkowska

>