proces zakupowy - badania eyetracking

27

Upload: eyetracking

Post on 26-May-2015

2.138 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Proces zakupowy - badania eyetracking
Page 2: Proces zakupowy - badania eyetracking

Wnioski z badań eyetrackingowych przeprowadzonych w trakcie realizacji przez użytkowników kolejnych kroków procesu zakupowego w sklepie internetowym

Page 3: Proces zakupowy - badania eyetracking

Opis badania

Badane sklepy to Toys4Boys i Świat Książki

Badania miały charakter eksploracyjny.

Próba badanych wynosiła 10 osób. Każdy z uczestników badania mógł dowolnie wybrał produkty, które chce kupić.

Page 4: Proces zakupowy - badania eyetracking

Według statystyk 59,8% użytkowników przerywa proces zakupowy i nigdy go nie kończy*

Głównymi obszarami, które zostały poddane badaniu były:

• Opcje i informacje w koszyku• Nawigacja w procesie zakupowym,• Czytelność umieszczanych opisów,• Informacje o kosztach dostawy i płatności,• Działanie formularzy.

Page 5: Proces zakupowy - badania eyetracking

Koszyk

• Widoczność objaśnień i pomocy• Mechanizmy kontynuacji zakupów

Page 6: Proces zakupowy - badania eyetracking

Objaśnienia w usprawnianiu procesu decyzyjnego

„Informacja: Koszyk”

• Duża ilość tekstu• Nie przyciąga uwagi

Mało pomocna?

„Jak korzystać z koszyka”

źródło: Ideacto, Eyetracking

Koszyk

Toys4Boys

Page 7: Proces zakupowy - badania eyetracking

Objaśnienia w usprawnianiu procesu decyzyjnego

źródło: Ideacto, Eyetracking

Koszyk

Świat Książki

Page 8: Proces zakupowy - badania eyetracking

Siła czytelnej nawigacji

„Przyciski nawigacji”

• Odpowiednio dobrane usprawniają proces podejmowania decyzji• Koncentracja na właściwych elementach

źródło: Ideacto, Eyetracking

Koszyk

Page 9: Proces zakupowy - badania eyetracking

Siła czytelnej nawigacji

Koszyk

Okno safari

Page 10: Proces zakupowy - badania eyetracking

KoszykInformacja o czasie dostawy powoduje nieznaczny wzrost konwersji

źródło: Ideacto, Eyetracking

Page 11: Proces zakupowy - badania eyetracking

KoszykWnioski

• Do ikon dodawaj opisy.

• Stosuj użyteczne nagłówki, czyli wyjaśnij jednoznacznie treść, której dotyczą.

• Do ważnych tekstów dodawaj ikony, które przyciągają uwagę.

• Skracaj i upraszczaj teksty.

• Nadawaj priorytety przyciskom, aby ułatwić użytkownikom nawigowanie.

Page 12: Proces zakupowy - badania eyetracking

Produkty polecane, rekomendowane

• Widoczność produktów rekomendowanych, polecanych• Wpływ na wypełnianie formularza podczas procesu zakupowego

Page 13: Proces zakupowy - badania eyetracking

Elementy zbędne i nieprzydatne

„Top 10” przy procesie zakupowym

• (Na szczęście?) nie odwraca uwagi• Jeśli ma być przydatne, może warto dodać np. ceny produktów?

źródło: Ideacto, Eyetracking

Produkty polecane, rekomendowane

Page 14: Proces zakupowy - badania eyetracking

Produkty polecane, rekomendowane

Page 15: Proces zakupowy - badania eyetracking

Produkty polecane, rekomendowane

Podsumowanie

• Pamiętaj, że elementy dodatkowe (produkty rekomendowane i inne) widoczne w procesie mogą rozpraszać i odciągać wzrok użytkowników.

• Zdecyduj na którym kroku należało by zrezygnować z widoczności dystraktorów

Page 16: Proces zakupowy - badania eyetracking

Promocje i prezenty

• Widoczność promocji, kuponów, zniżek

Page 17: Proces zakupowy - badania eyetracking

Nietrafiona, czy niewidzialna promocja?

„Promocja - Prezent od Toys4Boys”• A gdzie patrzy użytkownik?• Czy przeczytał warunki?

źródło: Ideacto, Eyetracking

Promocje i prezenty

Page 18: Proces zakupowy - badania eyetracking

Nietrafiona, czy niewidzialna promocja?

źródło: Ideacto, Eyetracking

Promocje i prezenty

Toys 4 Boys

Militaria.pl

Page 19: Proces zakupowy - badania eyetracking

Formularze

• Reakcja użytkowników na błędy, np. błędnie wypełniony formularz• Redukowanie, ukrywanie pól formularza

Page 20: Proces zakupowy - badania eyetracking

Mylące okna

• Domyślny adres pobiera automatycznie dane adresowe z konta.• Opcjonalny, powinien być uzupełniony, gdy adres dostawy będzie inny niż domyślny.

źródło: Ideacto, Eyetracking

Formularze

Page 21: Proces zakupowy - badania eyetracking

Co się działo?

Użytkownik zaczął dopisywać dane do drugiego formularza • Zrezygnować, wygasić, dodać objaśnienie?

źródło: Ideacto, Eyetracking

Formularze

Page 22: Proces zakupowy - badania eyetracking

Formularzeźródło: Ideacto, Eyetracking

Page 23: Proces zakupowy - badania eyetracking

Wyrównywanie etykietDo prawej

Do lewej

Na górze

źródło: Ideacto, Eyetracking

Formularze

Toys 4 Boys

Czy to jest potrzebne?

Toys 4 Boys

Page 24: Proces zakupowy - badania eyetracking

FormularzeWnioski

• Stosuj zrozumiałe etykiety.

• Spraw, aby użytkownicy nie czuli się zdezorientowani działaniem funkcji. Informuj i uprzedzaj.

• W celu zmniejszenia czasu potrzebnego na wypełnianie formularza zastosuj etykiety nad polami formularza.

• Pola formularza najmniej przeszkadzają w czytaniu etykiet do lewej. Dlatego stosuj je, gdy ich zrozumienie jest ważne i gdy chcesz użytkowników trochę zmusić, aby skupili na nich swoją uwagę. Dodatkowo są dosyć przyjemne w percepcji, ze względu na swoje lewostronne wyrównanie, tworzące prostą linię.

• Gdy etykiety są mniej więcej równej długości, dosuń je do prawej strony, aby zmniejszyć dystans od pól do wpisywania.

• Staraj się zredukować odległość pól etykiet od pól do wpisywania.

Page 25: Proces zakupowy - badania eyetracking

Wnioski końcoweEtykiety i formularze • Stosuj zrozumiałe etykiety.

• Minimalizuj liczbę pól formularzy.

• Aby wyróżnić formularz i skupić na nim uwagę użytkowników możesz stosować delikatne jasne tło.

Nawigacja • Spraw, aby użytkownicy nie czuli się zdezorientowani działaniem funkcji, powinno być ono intuicyjne i przewidywalne.Informuj i uprzedzaj.

• Stosuj opisy ikon, zwłaszcza tych abstrakcyjnych.

•Nadaj priorytety przyciskom, aby ułatwić użytkownikom nawigowanie.

Page 26: Proces zakupowy - badania eyetracking

Wnioski końcowePłynność procesuzakupowego

• Unikaj elementów dodatkowych, które mogą rozpraszać i odciągać wzrok użytkowników.

• Pamiętaj, że prezentacja zawartości koszyka w kolejnych krokach procesu zakupowego rozprasza.

• Jasno i precyzyjnie projektuj kroki procesu zakupowego, tak aby użytkownik wiedział gdzie się znajduje i jaki krok jest ostateczny.

• Stosuj spójne i jasne nazwy dla poszczególnych kroków procesu zakupowego oraz przycisków.

Teksty• Do ważnych tekstów dodaj elementy graficzne, które przyciągną uwagę.

• Stosuj użyteczne nagłówki, czyli wyjaśnij jednoznacznie treść, której dotyczą.

• Skracaj i upraszczaj teksty.

• Pomoc i wszystkie dodatkowe informacje umieszczaj kontekstowo.

Page 27: Proces zakupowy - badania eyetracking

Jeśli są Państwo zainteresowani ofertą, lub uzyskaniem dodatkowych informacji prosimy o kontakt: www.eyetracking.pl