Přednáška na ČVUT, fakulta informačních technologiích na téma UX v praxi.

1. @MichalVojak
USER EXPERIENCE V PRAXI

2. NA ČEM DĚLÁME

3. NA ČEM DĚLÁME

4. OBSAH
Co je to UX
UX designer
Metody používané v praxi
Není potřeba vymýšlet vymyšlené
Fails

5. CO JE TO UX

6. “User experience je sada technik a metod které
lze použít pro návrh nějakého konkrétního
uživatelského rozhraní.”
Asociace UX

7. UX JE VŠUDE
OBCHODY, SILNICE, ZNAČKY, DVEŘE

11. Technologie
Uživatelé
Business
UX
CO SE TÍM CHÁPE V DIGITALU

12. UX není UI

14. “User interface je jako vtip, jakmile ho musíte
vysvětlovat, tak není dobrý.”
STARTUP VITAMINS

15. POUŽÍVANÉ TERMÍNY
UX, UI, CX, CRO, IA

16. UX DESIGNER

17. ČLOVĚK CO VYTVÁŘÍ UX JE V
PROJEKTU VŽDY
Majitel
Product owner
Grafik
FRONT-END developer
BACK-END developer
UX designer

18. HLAVNÍ NÁPLŇ UX DESIGNERA
Analyzovat data
Mluvit s uživateli
Sestavovat persony
Vytvářet informační architekturu
Vytvářet vizuální design
Kreslit skicy, wireframe a tvořit prototypy
Psát texty
Dělat uživatelské testování

19. JAK MÁ VYPADAT PROCES
TVORBY?

20. JAK MŮŽE VYPADAT TVORBA
APLIKACE
Vytvoření aplikace Ladění problémů Prodej aplikaceMyšlenka

21. JAK BY PROCES MĚL VYPADAT
Ověření myšlenky s
uživateli, zjištění potřeb
Vytvoření wireframe /
prototypu
Otestování s uživateliMyšlenka
Vytvoření aplikace Ladění problémů Prodej aplikace

22. DUAL TRACK AGILE

23. METODY POUŽÍVANÉ V PRAXI
Výzkum
Informační architektura
Interační design
Vizuální design

24. METODY POUŽÍVANÉ V PRAXI
Výzkum
Informační architektura
Interační design
Vizuální design

25. KVANTITA VS. KVALITA

26. ANALYTIKA

28. DATA ZE ZNÁMÝCH ZDROJŮ

29. DOTAZNÍKOVÉ ŠETŘENÍ

31. CÍLOVÁ SKUPINA A PERSONY

33. HLOUBKOVÉ ROZHOVORY

35. CARD SORTING

37. DESIGN STUDIO

39. DESIGN SPRINT

41. FOCUS GROUP

43. METODY POUŽÍVANÉ V PRAXI
Výzkum
Informační architektura
Interakční design
Vizuální design

44. Zdroj: https://mladypodnikatel.cz/informacni-architektura-webu-t26202

45. METODY POUŽÍVANÉ V PRAXI
Výzkum
Informační architektura
Interační design
Vizuální design

49. MOBILE FIRST

50. NÁSTROJE
balsamiq.com
axure.com
www.adobe.com/cz/products/xd.html
https://www.invisionapp.com

51. COPYWRITING

52. TEXTY NAVÁDÍ

53. MICROCOPY

54. UŽIVATELSKÉ TESTY

56. METODY POUŽÍVANÉ V PRAXI
Výzkum
Informační architektura
Interační design
Vizuální design

58. TLAČÍTKA

60. TESTOVÁNÍ VÝSLEDKU

63. NENÍ POTŘEBA VYMÝŠLET
VYMYŠLENÉ

64. material.io

65. Human Interface Guidelines

66. Bootstrap
(admin template)

67. FAILS

68. CO JE TOTO ZA IKONU?

69. JE TOHO HODNĚ

70. IKONY JE TĚŽKÉ POCHOPIT

71. PLACEHOLDER

72. DLOUHÉ POPISKY

73. WEB MAIL JAKO TYPE=“TEXT”

74. SLIDERS

75. DATEPICKER

76. • rozsáhlé seznamy
• není potřeba propagovat možnosti uvnitř
• je naprosto jasné, o co se jedná
PROBLÉMY SE SELECTBOXY

77. SELECT BOXY

78. TABY VE FORMULÁŘÍCH
I MIMO NĚ

79. VELIKOST AKČNÍ
PLOCHY

80. FLAT TLAČÍTKA

81. POZOR NA PŘEKRYTÍ
KLÁVESNICÍ

82. ZÁVĚREM
Nenavrhujte dle sebe, ale dle uživatelů.
Ptejte se klientů na jejich názor a zkušenosti.
Testujte si vaše návrhy, ideálně s cílovkou.

83. @MichalVojak
DĚKUJI ZA POZORNOST