Successfully reported this slideshow.

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

894 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Kupować szybko, sprawnie i przyjemnie, czyli nowe trendy i rozwiązania w webusability<br />Anna Liszewska<br />JanmediaInteractive<br />
  2. 2. Plan<br />Co mówią badania – co zrobić, by sklep sprzedawał jeszcze lepiej?<br />
  3. 3. Wyniki badań<br />Które obszary strony przyciągają wzrok?<br />
  4. 4. Wyniki badań<br />Główne wyniki<br /><ul><li>Podczas przeglądania strony fiksacje skupiają się na górnym lewym obszarze.
  5. 5. Podczas poszukiwania informacji fiksacje znajdują się najczęściej
  6. 6. w środkowej – lewej części ekranu.
  7. 7. Niezależnie od zadania trzecia część strony miała małe fiksacje albo w ogóle albo wcale.</li></li></ul><li>Wyniki badań<br />Skrolowanie i Paginacja<br /><ul><li>Długie teksty powinny być podzielone na sekcje.
  8. 8. Użytkownicy mogą lepiej zrozumieć tekst jeżeli sekcje są zaprezentowane na oddzielnych stronach – niż na jednej przewijanej.
  9. 9. Przewijanie – wpływa negatywnie na uczenie się.
  10. 10. Zwłaszcza u osób ze słabymi zdolnościami do zapamiętywania.</li></li></ul><li>Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  11. 11. Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  12. 12. Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  13. 13. Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  14. 14. Wyniki badań<br />Czy twarze przyciągają wzrok?<br /><ul><li>Są sytuacje, kiedy ludzie zwracają uwagę na twarz, ale występują one głównie podczas przeglądania strony.
  15. 15. Nawet, gdy zdjęcia twarzy są odpowiednio dopasowane to mogą mieć negatywny wpływ na odbiór treści przez ekspertów.
  16. 16. Użytkownicy zorientowani na zadanie prawdopodobnie nie będą wierzyć, że informacja przez nich poszukiwana jest powiązana z twarzą.
  17. 17. 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.</li></li></ul><li>Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  18. 18. Wyniki badań<br />Czy twarze przyciągają wzrok?<br />
  19. 19. Wyniki badań<br />Jak oznaczać wymagane pola?<br />Czy jest jakaś alternatywa do (*) asterysku w przypadku pól wymaganych?<br />
  20. 20. Wyniki badań<br />Jak oznaczać wymagane pola?<br />
  21. 21. Wyniki badań<br />Jak oznaczać wymagane pola?<br />
  22. 22. Wyniki badań<br />Jak oznaczać wymagane pola?<br />Warto dodać wyróżnienie kolorem pola obowiązkowego.<br />Jednak, ze względu na możliwość ślepoty na kolory należy zastosować kolor tylko jako wyznacznik dodatkowy.<br />
  23. 23. Wyniki badań<br />Etykiety w formularzach<br />Średni czas trwania przeskoku <br />170ms – 240ms<br />Średni czas trwania <br />przeskoku 50ms<br />Średni czas trwania przeskoku <br />500ms<br /><ul><li>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.
  24. 24. Jeżeli etykiety po lewej stronie są konieczne, lepiej wyrównać etykiety do prawej</li></li></ul><li><ul><li>Hotmail – pogrubione nagłówki
  25. 25. eBay – podkreślone kolorem i cieniem
  26. 26. Użytkownicy poświęcają więcej uwagi podkreślonym nagłówkom</li></ul>Wyniki badań<br />Optymalizacja formularzy<br />
  27. 27. Wyniki badań<br />Optymalizacja formularzy<br /><ul><li>Warto wprowadzić dynamiczną informację zwrotną.
  28. 28. Informacja zwrotna powinna znajdować się przy polach, których dotyczy, a nie pod spodem.
  29. 29. 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ą.</li></li></ul><li>Wyniki badań<br />Duże menu rozwijane (mega drop-down)<br />
  30. 30. Wyniki badań<br />Duże menu rozwijane (mega drop-down)<br /><ul><li>Mega-dropdowny są użyteczne zarówno dla aplikacji jak i stron internetowych.
  31. 31. Możliwość grupowania i formatowania opcji tak, aby wesprzeć „znajdowalność” (findability)i ułatwić zrozumienie zawartości.
  32. 32. Wszystkie dostępne opcje są widoczne bez przewijania więc użytkownicy nie muszą polegać na pamięci krótkoterminowej.
  33. 33. Możliwość wyświetlenia dodatkowych informacji po najechaniu (tooltipy).
  34. 34. Możliwość dodawania obrazków.</li></li></ul><li>Wyniki badań<br />Duże menu rozwijane (mega drop-down)<br /><ul><li>Aby zwiększyć dostępność, jako minimum, należy górne menu zrobić klikalne.
  35. 35. Ważne: menu powinny być mimo wszystko proste.</li></li></ul><li>Wyniki badań<br />Podkreślenie odnośników<br />
  36. 36. Wyniki badań<br />Podkreślenie odnośników<br /><ul><li>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.
  37. 37. Jednak dla zadań, w których odpowiedź była na stronie, użytkownicy byli bardziej skuteczni, gdy odnośniki były niepodkreślone.
  38. 38. Jeżeli tekst jest dużo ważniejszy niż odnośniki prawdopodobnie lepiej ich nie podkreślać.</li></li></ul><li>Wyniki badań<br />Idealne pole wyszukiwania jest szerokie na 27 znaków<br /> 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ń.<br />
  39. 39. Wyniki badań<br />Linia zanurzenia (przewijanie)<br />W połowie lat ’90 uznano, że użytkownicy nie będą przewijać stron internetowych.<br />„wszystkie najważniejsze informacje muszą znajdować się powyżej linii zanurzenia, w innym przypadku będą całkowicie niezauważane przez internautów.”<br /> W roku 1997 Jacob Nielsen unieważnił swój przewodnik dotyczący budowania stron tak, aby nie wymagały skrolowania.<br />Ale „długie” strony nadal są odbierane jako problematyczne. <br /> 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.<br />
  40. 40. Wyniki badań<br />Linia zanurzenia (przewijanie)<br />
  41. 41. Wyniki badań<br />Projektowanie formularzy<br />
  42. 42. Wyniki badań<br />Formularze<br />Lepiej używać pojedynczego pola dla numerów telefonów czy kodów pocztowych.<br /> Użytkownicy łatwo gubią się podczas wpisywania pól, do których dochodzą numery takie jak kody pocztowe czy numery telefonów<br />eBay 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.<br />
  43. 43. Wyniki badań<br />Serwisy mobilne<br />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. <br /> Wyniki<br /><ul><li>Ekran tradycyjny: 39.18%
  44. 44. Ekran mobilny: 18.93%</li></ul> Użytkownicy widzą mniej na mniejszym ekranie, do tego muszą więcej poruszać się po stronie by zdobyć potrzebne informacje. <br />
  45. 45. Wyniki badań<br />Biała przestrzeń ułatwia zrozumienie strony<br />Pusta przestrzeń:<br /><ul><li>dzieli stronę,
  46. 46. daje miejsce na „oddech”,
  47. 47. umożliwia grupowanie elementów razem - poprzez zmniejszanie miejsca pomiędzy nimi i zwiększenie miejsca pomiędzy innymi elementami.</li></ul>Używanie białych miejsc pomiędzy paragrafami oraz w marginesach zwiększyło zrozumienie tekstu o 20%. <br />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”.<br />
  48. 48. Wyniki badań<br />
  49. 49. Klienci zapłacą mniej za "buciki" niż za "buty”.  <br /> Używanie zdrobnień w opisie produktów może zmniejszyć wielkość, wartość oraz satysfakcję.<br />Wyniki badań<br />Ostrożnie ze zdrobnieniami<br />
  50. 50. Wyniki badań<br />Media społecznościowe<br />Ponad dwa razy więcej osób +55 odwiedza strony serwisów społecznościowych przy użyciu swojego telefonu (USA).<br />
  51. 51. Wyniki badań<br />Media społecznościowe<br />Aktywni użytkownicy mediów społecznościowych są wpływowi również offline.<br />
  52. 52. Wyniki badań<br />Źródła<br />
  53. 53. Dziękuję za uwagę <br />Anna Liszewska<br />JanmediaInteractive<br />I zapraszam 17 listopada do Wrocławia na <br />

×