Ania Liszewska opowiadała o tym jak "Kupować szybko, sprawnie i przyjemnie, czyli nowe trendy i rozwiązania w web usability" na konferencji Internet Beta 2011

1. Kupowad szybko, sprawnie
i przyjemnie, czyli nowe trendy
i rozwiązania w web usability
Anna Liszewska
Janmedia Interactive

2. Plan
Co mówią badania – co zrobid, by sklep sprzedawał jeszcze lepiej?

3. Wyniki badao
Które obszary strony przyciągają wzrok?

4. Główne wyniki Wyniki badao
• 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ęśd strony miała małe fiksacje albo w
ogóle albo wcale.

5. Skrolowanie i Paginacja Wyniki badao
• Długie teksty powinny byd podzielone na sekcje.
• Użytkownicy mogą lepiej zrozumied 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.

6. Czy twarze przyciągają wzrok?
Wyniki badao

7. Czy twarze przyciągają wzrok?
Wyniki badao

8. Czy twarze przyciągają wzrok?
Wyniki badao

9. Czy twarze przyciągają wzrok?
Wyniki badao

10. Czy twarze przyciągają wzrok?
Wyniki badao
• 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ą
mied negatywny wpływ na odbiór treści przez ekspertów.
• Użytkownicy zorientowani na zadanie prawdopodobnie nie będą
wierzyd, że informacja przez nich poszukiwana jest powiązana z
twarzą.
• Dodatkowo badania eyetrackingowe pokazały, że podczas
wykonywania tych zadao fiksacja wzroku na twarzy była niewielka,
udowadniając niewielką przydatnośd zdjęd twarzy w tych
warunkach.

11. Czy twarze przyciągają wzrok?
Wyniki badao

12. Czy twarze przyciągają wzrok?
Wyniki badao

13. Wyniki badao
Jak oznaczad wymagane pola?
Czy jest jakaś alternatywa do (*) asterysku w przypadku pól wymaganych?

14. Wyniki badao
Jak oznaczad wymagane pola?

15. Wyniki badao
Jak oznaczad wymagane pola?

16. Wyniki badao
Jak oznaczad wymagane pola?
Warto dodad wyróżnienie kolorem pola obowiązkowego.
Jednak, ze względu na możliwośd ślepoty na kolory należy zastosowad
kolor tylko jako wyznacznik dodatkowy.

17. Wyniki badao
Etykiety w formularzach
Średni czas trwania przeskoku Średni czas trwania Średni czas trwania
500ms przeskoku przeskoku 50ms
170ms – 240ms
• Umieszczenie etykiet nad polem działało lepiej w większości przypadków –
użytkownicy nie muszą skupiad się na tekście i na etykietach oddzielnie.
• Jeżeli etykiety po lewej stronie są konieczne, lepiej wyrównad etykiety do
prawej

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

19. Wyniki badao
Optymalizacja formularzy
• Warto wprowadzid dynamiczną informację zwrotną.
• Informacja zwrotna powinna znajdowad się przy polach, których dotyczy,
a nie pod spodem.
• Dla dłuższych formularzy należy rozważyd wprowadzenie nagłówków
przy użyciu koloru i cienia – istnieje większa szansa, że użytkownicy je
przeczytają.

20. Wyniki badao
Duże menu rozwijane (mega drop-down)

21. Wyniki badao
Duże menu rozwijane (mega drop-down)
• Mega-dropdowny są użyteczne zarówno dla
aplikacji jak i stron internetowych.
• Możliwośd grupowania i formatowania opcji tak,
aby wesprzed „znajdowalnośd” (findability)
i ułatwid zrozumienie zawartości.
• Wszystkie dostępne opcje są widoczne bez
przewijania więc użytkownicy nie muszą polegad
na pamięci krótkoterminowej.
• Możliwośd wyświetlenia dodatkowych informacji
po najechaniu (tooltipy).
• Możliwośd dodawania obrazków.

22. Wyniki badao
Duże menu rozwijane (mega drop-down)
• Aby zwiększyd dostępnośd, jako minimum, należy górne menu zrobid
klikalne.
• Ważne: menu powinny byd mimo wszystko proste.

23. Podkreślenie odnośników Wyniki badao

24. Podkreślenie odnośników Wyniki badao
• Dla zadao, w których użytkownicy mieli odnaleźd odnośnik – użytkownicy
odnieśli więcej sukcesów, gdy odnośniki były podkreślone.
• Jednak dla zadao, 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ślad.

25. Wyniki badao
Idealne pole wyszukiwania jest szerokie na 27 znaków
Przeciętne pole wyszukiwania jest szerokie na 18 znaków. 27% zapytao podczas
badao było za długie. Zwiększenie boksu do 27 znaków pozwoliłoby zmieścid 90%
zapytao.

26. Linia zanurzenia (przewijanie) Wyniki badao
W połowie lat ’90 uznano, że użytkownicy nie będą przewijad stron
internetowych.
„wszystkie najważniejsze informacje muszą znajdowad 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śd przerwania czynności
czytania.

27. Linia zanurzenia (przewijanie) Wyniki badao

28. Projektowanie formularzy Wyniki badao

29. Wyniki badao
Formularze
Lepiej używad 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ów
eBay posiada dwa pola na numer telefonu, jedno pole to kod
międzynarodowy. Użytkownicy nie wiedzą w jaki sposób wpisad numer
telefonu – najdłuższe fiksacje na pierwszym członie numeru.

30. Wyniki badao
Serwisy mobilne
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 poruszad się po stronie by zdobyd
potrzebne informacje.

31. Wyniki badao
Biała przestrzeo ułatwia zrozumienie strony
Pusta przestrzeo:
• 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 poprzed zwiększenie satysfakcji oraz poprawienie „doświadczenia”.

32. Wyniki badao

33. Wyniki badao
Ostrożnie ze zdrobnieniami
Klienci zapłacą mniej za "buciki" niż za "buty”.
Używanie zdrobnieo w opisie produktów może zmniejszyd wielkośd,
wartośd oraz satysfakcję.

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

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

36. Wyniki badao
Źródła

37. Dziękuję za uwagę 
Anna Liszewska
Janmedia Interactive
I zapraszam 17 listopada do Wrocławia na