Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Usability i UX - podstawy

2.440 Aufrufe

Veröffentlicht am

  • Login to see the comments

Usability i UX - podstawy

  1. 1. Radosław Taraszka Usability and UX
  2. 2. „Engineer make things. We make people love them” – Karl Fast
  3. 3. 5 elements of usability 1.Learnability – how? 2.Efficiency – wow! 3.Memorability - ok 4.Errors - what? 5.Satisfaction – yeah!
  4. 4. Learnability
  5. 5. Efficiency
  6. 6. Memorability
  7. 7. Errors http://wallofawesome.pagodabox.com/one-of-the-best-404-pages-ever/
  8. 8. Satisfaction Usa Today
  9. 9. Satisfaction Usa Today
  10. 10. Relationship between usability and UX (almost)…. http://www.jpprufino.com/2008/08/ux-studies-usability-and-user-experience-part-ii/
  11. 11. …true relationship between usability and UX http://www.neospot.se/usability-vs-user-experience/
  12. 12. Related areas to UX           Project Managemenet User Research Usability Evaluation Infomraction Architecture User Interface Design Interaction Design Visual Design Content Strategy Accessability Web Analytics User Experience
  13. 13. Jak ugotowad zupę? About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  14. 14. Rozwiązanie? The Design of Everyday Things, Donald A. Norman
  15. 15. Rozwiązanie? The Design of Everyday Things, Donald A. Norman
  16. 16. Mapowanie About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  17. 17. Mapowanie The Design of Everyday Things, Donald A. Norman
  18. 18. Examples of good UX - microemotions The White Stuff’s
  19. 19. Examples of good UX – social proof Expedia
  20. 20. Examples of good UX – info about system status Boxee
  21. 21. Examples of good UX – suggestion Make Me A Cocktai
  22. 22. Examples of good UX – adaptability adaptability Google maps - Hawaii
  23. 23. Examples of good UX – better search engine Meetup
  24. 24. Examples of good UX – understanding Vimeo
  25. 25. Examples of good UX – understanding Amsterdam Museum
  26. 26. Examples of good UX – persuasion http://www.tui.pl
  27. 27. Examples of good UX – persuasion
  28. 28. Examples of good UX – Luke, use the… data Ebay
  29. 29. Radosłąw Taraszka Testowanie i analizowanie
  30. 30. Testowanie
  31. 31. Typy testów  Jakościowe – użytecznośd  SurveyMonkey, CrazyEgg, TechSmith Morae, WebSort, Opiniac.com  Ilościowe – analityka  Google Analytics, Omniture, Gemius, Coremetrics  Eksperymenty – testy a/b, wielowymiarowe  Visual Website Optymizer, Google Website Optimize  Konkurencja – dane ilościowe i jakościowe, porównania  Alexa, Quantcast, Compete.com, Hitwise, BDN, Manubia
  32. 32. Analiza danych
  33. 33. A/B Tests http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
  34. 34. A/B Tests http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
  35. 35. Analiza danych
  36. 36. A/B Tests +95% http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/
  37. 37. A/B w Mall.cz http://visualwebsiteoptimizer.com/split-testing-blog/larger-productimages-increase-conversion-rate/ +9,46%
  38. 38. Radosław Taraszka Tworzenie interaktywnego produktu
  39. 39. Cyfrowy produkt About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  40. 40. Ewolucja w tworzeniu produktów cyfrowych Decyzje o produkcie: formie i interakcji podejmowane PRZED fazą WYKONANIA About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  41. 41. Dobry interfejs odpowiada na każdą interakcję About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  42. 42. Konwencja?
  43. 43. Komunikaty systemowe About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  44. 44. Komunikaty systemowe  Jeśli aplikacja wykryła błąd, dlaczego go nie naprawi?  Możesz zniszczyd dwa „pudełka”, które jest wartościowe?  Co się stanie gdy klikniesz „cancel”? About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  45. 45. Konstruktywne komunikaty  Czy komunikaty są poprawne? Czy tłumaczą co się stało? Czy wskazują miejsce problemu? Czy podają rozwiązanie problemu? Czy jeśli proszą o wpisanie danych, podają ich format?
  46. 46. Konstruktywne komunikaty Na stronach korporacje.pekao.com.pl wyszukiwarka po nie znalezieniu poszukiwanej frazy proponuje skorzystanie z mapy strony lub skontaktowanie się w celu uzyskania potrzebnych informacji.
  47. 47. Radosław Taraszka Nawigowanie
  48. 48. Nawigacja  Lewa nawigacja jest ignorowana. Szczególnie gdy jest długa.  Użytkownicy lubią Content Poziomą, dużą nawigację Linki w okolicach tytułu
  49. 49. Drugi poziom nawigacji  Problematyczny z natury rzeczy bo.. po pierwszym kliku użytkownicy koncentrują się na treści. nawigacja 2 poziomu zawsze słabo widoczna. dopiero gdy użytkownik nic nie znajdzie w treści to zaczyna szukad dookoła – jeśli trafi na coś przed nawigacją 2 poziomu to może jej nie zauważyd.
  50. 50. Wyszukiwarka
  51. 51. Wyszukiwarka - prosta Gov.uk
  52. 52. Wyszukiwarka - złożona Tripadvisor
  53. 53. Wyszukiwarka – główny element Verif
  54. 54. Rozwijane menu Menu rozwijane umożliwia wygodny wybór kraju
  55. 55. Akordeonowe menu  Szybka metoda przeglądania  Od 2 do 10 pozycji na drugim poziomie  Do 2 poziomów
  56. 56. Jesteś tutaj  Działa na zasadzie „jesteś tutaj” na mapie  Stosowane najczęściej w menu
  57. 57. Zakładki  Ludzie je rozumieją Ograniczenie ilości Mało widoczny 2 poziom  Trzeba dodatkowo mocno wyróżniad
  58. 58. Zakładki BBC
  59. 59. Zakładki Sport.pl
  60. 60. Dropdown Nettuts+
  61. 61. Dropdown Gateway
  62. 62. Mega dropdown Sony store
  63. 63. Mega dropdown Empik.com
  64. 64. Mega dropdown Engadet
  65. 65. Mega dropdown USAA
  66. 66. Lepsze lewe menu
  67. 67. Lepsze lewe menu
  68. 68. Filtrowanie About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  69. 69. Filtrowanie About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  70. 70. Radosław Taraszka Badania usability
  71. 71. Metody badawcze Usability Engineering, JAKOB NIELSEN
  72. 72. Dlaczego badad?    Projektant nie jest w stanie spojrzed na witrynę jak jej użytkownik. Im częściej testujesz tym mniejsze koszty, szybciej wykrywasz problemy użytkowników. Koniecznośd zatrudnienia reprezentatywnej grupy użytkowników nie jest tak istotna jak mogłoby się wydawad. Większośd osób w ten sam sposób postrzega serwisy WWW i ma podobne problemy.
  73. 73. Analiza ekspercka   W tej metodzie ekspert lub grupa ekspertów ocenia zgodnośd poszczególnych elementów serwisu z wytycznymi usability. Każdy znaleziony problem jest priorytetowany (zazwyczaj 3 poziomy) a następnie opisywany (najczęściej z sugestią jak go rozwiązad). Zalecane jest użycie przynajmniej 2 ekspertów (analityków). Wyniki ich pracy zostają scalone do jednego raportu.
  74. 74. Heurystyki Nielsen & Molich 1.Pokazuj status systemu. 2.Zachowaj zgodnośd pomiędzy systemem a rzeczywistością. 3.Daj użytkownikowi pełną kontrolę. 4.Trzymaj się standardów i zachowaj spójnośd. 5.Zapobiegaj błędom. 6.Pozwalaj wybierad zamiast zmuszad do pamiętania. 7.Zapewnij elastycznośd i efektywnośd. 8.Dbaj o estetykę i umiar. 9.Zapewnij skuteczną obsługę błędów. 10.Zadbaj o pomoc i dokumentację. Źródło: 1.Nielsen, J., and Landauer, T. K. 1993. A mathematical model of the finding of usability problems. Proceedings ACM/IFIP INTERCHI'93 Conference (Amsterdam, The Netherlands, April 24-29), 206-213. 2.Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256. 3.Nielsen, J. 1992. Finding usability problems through heuristic evaluation. Proceedings ACM CHI'92 Conference (Monterey, CA, May 3-7), 373-380. 4.Examining User Expectations for the Location of Common E-Commerce Web Objects
  75. 75. Click tracking Crazy Egg
  76. 76. Eye-tracking
  77. 77. Eyetracking na mobile http://www.slideshare.net/uservision/user-experience-in-action
  78. 78. Google Analytics
  79. 79. Badania z użytkownikami     Pierwsi użytkownicy zazwyczaj odkrywają najwięcej błędów. Jakob Nielsen i Tom Landauer wykazali, że testowanie z 5 użytkownikami pozwala na wykrycie 85% problemów dotyczących funkcjonalności witryn. Zatrudnianie większej ilości użytkowników nie gwarantuje liniowego wzrostu liczny wykrytych błędów. Zamiast jednego testu z 8 użytkownikami lepiej przeprowadzid dwie tury testów z 3 użytkownikami. Najczęściej duże błędu zasłaniają te mniejsze i dopiero usunięcie ich i przeprowadzeni drugiej tury pozwala na odkrycie mniejszych błędów. W teście bierze udział także osoba przeprowadzająca test i obserwator.
  80. 80. Ilu użytkowników?
  81. 81. Pay-off ratio Usability Engineering, JAKOB NIELSEN
  82. 82. Typy testów z użytkownikami   Zrozumied witrynę – pokazujesz witrynę użytkownikowi a następnie sprawdzasz czy zrozumieli sposób zorganizowania informacji, nawigację i koncepcję witryny Wykonanie czynności – użytkownik pracuje z serwisem Zadania zamknięte Zadania otwarte
  83. 83. Jak testowad?   Najpierw spróbuj samemu wykonad zadania testowe. Bądź uprzejmy i dbaj o poczucie własnej wartości użytkowników. Testujesz strony, nie ludzi.  Zachęcaj do głośnego myślenia.  Jeśli nie wiesz co myśli użytkownik – zapytaj o to.  Nie udzielaj wskazówek dotyczących tego jak mają postępowad.  Wydawaj proste i klarowne polecenia.  Bezpośrednio po sesji rób notatki.  Uprzedź użytkownika, że: Będzie nagrywany Nie będziesz w trakcie testu odpowiadad na jego pytania Wynagrodzenie nie zależy od wyniku testów
  84. 84. A po tym wszystkim…
  85. 85. Tak, tak- analiza danych 
  86. 86. Radosław Taraszka Projektowanie
  87. 87. Waterfall http://project.samwho.co.uk/images/waterfall-model1.jpg
  88. 88. Projektowanie równoległe i iteracyjne Usability Engineering, JAKOB NIELSEN
  89. 89. Scrum http://www.maxxor.com/software-development-process
  90. 90. Lean http://www.agilearts.nl/the-lean-agile-connection/
  91. 91. Lean
  92. 92. Sortowanie kart http://www.slideshare.net/uservision/user-experience-in-action
  93. 93. Szkicuj…
  94. 94. Szkicuj… http://sketchtoy.com/
  95. 95. Szkicuj…
  96. 96. Przepływ About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  97. 97. Prototypy Usability Engineering, JAKOB NIELSEN
  98. 98. Visual Language Studies About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  99. 99. Radosław Taraszka Responsive Design
  100. 100. Grid w projektowaniu  Usability — szybsza nauka używania dzięki konsekwecji pozycjonowania elementów na ekranie.  Ascetycznośd i uporządkowanie  Efektywnośd – standardyzacja layoutu przyspiesza korzystanie z jego funkcji About Face 3. The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin
  101. 101. Responsive Design http://upload.wikimedia.org/wikipedia/commons/6/6a/Boston_Glo be_responsive_website.jpg
  102. 102. Fluid Grids http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
  103. 103. Fluid Grids http://www.alistapart.com/articles/fluid-images/
  104. 104. Media Queries       320px 480px 600px 768px 900px 1200px http://mediaqueri.es/
  105. 105. Media Queries http://mediaqueri.es/
  106. 106. Media Queries http://mediaqueri.es/
  107. 107. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  108. 108. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  109. 109. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  110. 110. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  111. 111. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  112. 112. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  113. 113. Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514
  114. 114. Przykład RWD United Pixelworks
  115. 115. Radosław Taraszka User-Centered Design

×