Kupować szybko, sprawnie i przyjemnie, czyli nowe trendy i rozwiązania w web usability

Anna LiszewskaJanmedia Interactive

Plan

Co mówią badania – co zrobić, by sklep sprzedawał jeszcze lepiej?

Które obszary strony przyciągają wzrok?Wyniki badań

Główne wyniki• Podczas przeglądania strony fiksacje skupiają się na górnym lewym

obszarze.• Podczas poszukiwania informacji fiksacje znajdują się najczęściej • w środkowej – lewej części ekranu.• Niezależnie od zadania trzecia część strony miała małe fiksacje albo w

ogóle albo wcale.

Wyniki badań

Skrolowanie i Paginacja• Długie teksty powinny być podzielone na sekcje.• Użytkownicy mogą lepiej zrozumieć tekst jeżeli sekcje są

zaprezentowane na oddzielnych stronach – niż na jednej przewijanej.• Przewijanie – wpływa negatywnie na uczenie się.• Zwłaszcza u osób ze słabymi zdolnościami do zapamiętywania.

Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

• Są sytuacje, kiedy ludzie zwracają uwagę na twarz, ale występują one głównie podczas przeglądania strony.

• Nawet, gdy zdjęcia twarzy są odpowiednio dopasowane to mogą mieć negatywny wpływ na odbiór treści przez ekspertów.

• Użytkownicy zorientowani na zadanie prawdopodobnie nie będą wierzyć, że informacja przez nich poszukiwana jest powiązana z twarzą.

• Dodatkowo badania eyetrackingowe pokazały, że podczas wykonywania tych zadań fiksacja wzroku na twarzy była niewielka, udowadniając niewielką przydatność zdjęć twarzy w tych warunkach.

Czy twarze przyciągają wzrok? Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

Czy twarze przyciągają wzrok? Wyniki badań

Jak oznaczać wymagane pola?

Czy jest jakaś alternatywa do (*) asterysku w przypadku pól wymaganych?

Wyniki badań

Jak oznaczać wymagane pola?Wyniki badań

Jak oznaczać wymagane pola?Wyniki badań

Warto dodać wyróżnienie kolorem pola obowiązkowego.Jednak, ze względu na możliwość ślepoty na kolory należy zastosować kolor tylko jako wyznacznik dodatkowy.

Jak oznaczać wymagane pola?Wyniki badań

• Umieszczenie etykiet nad polem działało lepiej w większości przypadków – użytkownicy nie muszą skupiać się na tekście i na etykietach oddzielnie.

• Jeżeli etykiety po lewej stronie są konieczne, lepiej wyrównać etykiety do prawej

Średni czas trwania przeskoku 500ms

Średni czas trwania przeskoku 170ms – 240ms

Średni czas trwania przeskoku 50ms

Etykiety w formularzachWyniki badań

• Hotmail – pogrubione nagłówki• eBay – podkreślone kolorem i cieniem• Użytkownicy poświęcają więcej uwagi podkreślonym nagłówkom

Optymalizacja formularzyWyniki badań

• Warto wprowadzić dynamiczną informację zwrotną.

• Informacja zwrotna powinna znajdować się przy polach, których dotyczy, a nie pod spodem.

• Dla dłuższych formularzy należy rozważyć wprowadzenie nagłówków przy użyciu koloru i cienia – istnieje większa szansa, że użytkownicy je przeczytają.

Optymalizacja formularzyWyniki badań

Duże menu rozwijane (mega drop-down)Wyniki badań

• Mega-dropdowny są użyteczne zarówno dla aplikacji jak i stron internetowych.

• Możliwość grupowania i formatowania opcji tak, aby wesprzeć „znajdowalność” (findability)i ułatwić zrozumienie zawartości.

• Wszystkie dostępne opcje są widoczne bez przewijania więc użytkownicy nie muszą polegać na pamięci krótkoterminowej.

• Możliwość wyświetlenia dodatkowych informacji po najechaniu (tooltipy).

• Możliwość dodawania obrazków.

Duże menu rozwijane (mega drop-down)Wyniki badań

• Aby zwiększyć dostępność, jako minimum, należy górne menu zrobić klikalne.

• Ważne: menu powinny być mimo wszystko proste.

Duże menu rozwijane (mega drop-down)Wyniki badań

Podkreślenie odnośników Wyniki badań

• Dla zadań, w których użytkownicy mieli odnaleźć odnośnik – użytkownicy odnieśli więcej sukcesów, gdy odnośniki były podkreślone.

• Jednak dla zadań, w których odpowiedź była na stronie, użytkownicy byli bardziej skuteczni, gdy odnośniki były niepodkreślone.

• Jeżeli tekst jest dużo ważniejszy niż odnośniki prawdopodobnie lepiej ich nie podkreślać.

Podkreślenie odnośników Wyniki badań

Idealne pole wyszukiwania jest szerokie na 27 znaków

Przeciętne pole wyszukiwania jest szerokie na 18 znaków. 27% zapytań podczas badań było za długie. Zwiększenie boksu do 27 znaków pozwoliłoby zmieścić 90% zapytań.

Wyniki badań

Linia zanurzenia (przewijanie)

W połowie lat ’90 uznano, że użytkownicy nie będą przewijać stron internetowych.„wszystkie najważniejsze informacje muszą znajdować się powyżej linii zanurzenia, w innym przypadku będą całkowicie niezauważane przez internautów.”

W roku 1997 Jacob Nielsen unieważnił swój przewodnik dotyczący budowania stron tak, aby nie wymagały skrolowania.

Ale „długie” strony nadal są odbierane jako problematyczne.

Z drugiej jednak strony okazuje się, że użytkownicy chętniej czytają artykuły w całości, przewijając je. Stronicowanie – konieczność przerwania czynności czytania.

Wyniki badań

Linia zanurzenia (przewijanie) Wyniki badań

Projektowanie formularzy Wyniki badań

Lepiej używać pojedynczego pola dla numerów telefonów czy kodów pocztowych.Użytkownicy łatwo gubią się podczas wpisywania pól, do których dochodzą numery takie jak kody pocztowe czy numery telefonóweBay posiada dwa pola na numer telefonu, jedno pole to kod międzynarodowy. Użytkownicy nie wiedzą w jaki sposób wpisać numer telefonu – najdłuższe fiksacje na pierwszym członie numeru.

Wyniki badańFormularze

Przeprowadzono badanie, gdzie użytkownicy wypełniali test zamknięty podczas czytania polityki prywatności zarówno na tradycyjnym ekranie jak i na ekranie wielkości iPhona.

Wyniki• Ekran tradycyjny: 39.18%• Ekran mobilny: 18.93%

Użytkownicy widzą mniej na mniejszym ekranie, do tego muszą więcej poruszać się po stronie by zdobyć potrzebne informacje.

Wyniki badańSerwisy mobilne

Biała przestrzeń ułatwia zrozumienie strony

Pusta przestrzeń:• dzieli stronę, • daje miejsce na „oddech”, • umożliwia grupowanie elementów razem - poprzez zmniejszanie miejsca

pomiędzy nimi i zwiększenie miejsca pomiędzy innymi elementami.

Używanie białych miejsc pomiędzy paragrafami oraz w marginesach zwiększyło zrozumienie tekstu o 20%. Dobry layout nawet, jeżeli nie zmniejszy ilości błędów w danym wypadku, to i tak pomoże poprzeć zwiększenie satysfakcji oraz poprawienie „doświadczenia”.

Wyniki badań

Wyniki badań

Klienci zapłacą mniej za "buciki" niż za "buty”. Używanie zdrobnień w opisie produktów może zmniejszyć wielkość, wartość oraz satysfakcję.

Wyniki badańOstrożnie ze zdrobnieniami

Ponad dwa razy więcej osób +55 odwiedza strony serwisów społecznościowych przy użyciu swojego telefonu (USA).

Wyniki badańMedia społecznościowe

Aktywni użytkownicy mediów społecznościowych są wpływowi również offline.

Wyniki badańMedia społecznościowe

Wyniki badańŹródła

Dziękuję za uwagę Anna LiszewskaJanmedia Interactive

I zapraszam 17 listopada do Wrocławia na