1. Radosław Taraszka
Usability and UX

2. „Engineer make things. We
make people love them”
– Karl Fast

3. 5 elements of usability
1.Learnability – how?
2.Efficiency – wow!
3.Memorability - ok
4.Errors - what?
5.Satisfaction – yeah!

4. Learnability

5. Efficiency

6. Memorability

7. Errors
http://wallofawesome.pagodabox.com/one-of-the-best-404-pages-ever/

8. Satisfaction
Usa Today

9. Satisfaction
Usa Today

10. Relationship between usability and UX (almost)….
http://www.jpprufino.com/2008/08/ux-studies-usability-and-user-experience-part-ii/

11. …true relationship between usability and UX
http://www.neospot.se/usability-vs-user-experience/

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. Jak ugotowad zupę?
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

14. Rozwiązanie?
The Design of Everyday Things, Donald A. Norman

15. Rozwiązanie?
The Design of Everyday Things, Donald A. Norman

16. Mapowanie
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

17. Mapowanie
The Design of Everyday Things, Donald A. Norman

18. Examples of good UX - microemotions
The White Stuff’s

19. Examples of good UX – social proof
Expedia

20. Examples of good UX – info about system status
Boxee

21. Examples of good UX – suggestion
Make Me A Cocktai

22. Examples of good UX – adaptability
adaptability
Google maps - Hawaii

23. Examples of good UX – better search engine
Meetup

24. Examples of good UX – understanding
Vimeo

25. Examples of good UX – understanding
Amsterdam Museum

26. Examples of good UX – persuasion
http://www.tui.pl

27. Examples of good UX – persuasion

28. Examples of good UX – Luke, use the… data
Ebay

29. Radosłąw Taraszka
Testowanie i
analizowanie

30. Testowanie

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. Analiza danych

33. A/B Tests
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/

34. A/B Tests
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/

35. Analiza danych

36. A/B Tests
+95%
http://visualwebsiteoptimizer.com/split-testing-blog/human-landing-page-increase-conversion-rate/

37. A/B w Mall.cz
http://visualwebsiteoptimizer.com/split-testing-blog/larger-productimages-increase-conversion-rate/
+9,46%

38. Radosław Taraszka
Tworzenie
interaktywnego
produktu

39. Cyfrowy produkt
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

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. Dobry interfejs odpowiada
na każdą interakcję
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

42. Konwencja?

43. Komunikaty systemowe
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

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. 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. 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. Radosław Taraszka
Nawigowanie

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. 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. Wyszukiwarka

51. Wyszukiwarka - prosta
Gov.uk

52. Wyszukiwarka - złożona
Tripadvisor

53. Wyszukiwarka – główny element
Verif

54. Rozwijane menu
Menu rozwijane umożliwia wygodny wybór kraju

55. Akordeonowe menu

Szybka metoda przeglądania

Od 2 do 10 pozycji na drugim poziomie

Do 2 poziomów

56. Jesteś tutaj

Działa na zasadzie „jesteś tutaj” na mapie

Stosowane najczęściej w menu

57. Zakładki

Ludzie je rozumieją
Ograniczenie ilości
Mało widoczny 2 poziom

Trzeba dodatkowo mocno wyróżniad

58. Zakładki
BBC

59. Zakładki
Sport.pl

60. Dropdown
Nettuts+

61. Dropdown
Gateway

62. Mega dropdown
Sony store

63. Mega dropdown
Empik.com

64. Mega dropdown
Engadet

65. Mega dropdown
USAA

66. Lepsze lewe menu

67. Lepsze lewe menu

68. Filtrowanie
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

69. Filtrowanie
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

70. Radosław Taraszka
Badania usability

71. Metody badawcze
Usability Engineering, JAKOB NIELSEN

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. 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. 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. Click tracking
Crazy Egg

76. Eye-tracking

77. Eyetracking na mobile
http://www.slideshare.net/uservision/user-experience-in-action

78. Google Analytics

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. Ilu użytkowników?

81. Pay-off ratio
Usability Engineering, JAKOB NIELSEN

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. 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. A po tym wszystkim…

85. Tak, tak- analiza danych 

86. Radosław Taraszka
Projektowanie

87. Waterfall
http://project.samwho.co.uk/images/waterfall-model1.jpg

88. Projektowanie równoległe
i iteracyjne
Usability Engineering, JAKOB NIELSEN

89. Scrum
http://www.maxxor.com/software-development-process

90. Lean
http://www.agilearts.nl/the-lean-agile-connection/

91. Lean

92. Sortowanie kart
http://www.slideshare.net/uservision/user-experience-in-action

93. Szkicuj…

94. Szkicuj…
http://sketchtoy.com/

95. Szkicuj…

96. Przepływ
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

97. Prototypy
Usability Engineering, JAKOB NIELSEN

98. Visual Language Studies
About Face 3. The Essentials of Interaction Design
Alan Cooper, Robert Reimann, and Dave Cronin

99. Radosław Taraszka
Responsive Design

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. Responsive Design
http://upload.wikimedia.org/wikipedia/commons/6/6a/Boston_Glo
be_responsive_website.jpg

102. Fluid Grids
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

103. Fluid Grids
http://www.alistapart.com/articles/fluid-images/

104. Media Queries






320px
480px
600px
768px
900px
1200px
http://mediaqueri.es/

105. Media Queries
http://mediaqueri.es/

106. Media Queries
http://mediaqueri.es/

107. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

108. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

109. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

110. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

111. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

112. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

113. Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

114. Przykład RWD
United Pixelworks

115. Radosław Taraszka
User-Centered Design