Moje slides k prezentaci o User Interface a User Experience na konferenci iDevcamp 2010. @robinraszka http://tapmates.com

1. UI/UX
Robin Raszka
@robinraszka
www.tapmates.com
Tuesday, June 22, 2010

2. Co je to UI? Co je to UX?
I have no idea what you’re talking about...
...so here is a bunny with a pancake on its head.
Tuesday, June 22, 2010

3. UI
User Interface
Tuesday, June 22, 2010

4. UI
User Interface
UI je souhrn způsobů, jakými uživatelé ovlivňují chování strojů,
zařízení, nebo počítačových programů, žen.
Tuesday, June 22, 2010

5. UI
User Interface
UI je souhrn způsobů, jakými uživatelé ovlivňují chování strojů,
zařízení, nebo počítačových programů, žen.
vstupy od uživatele, kterými se prostředí ovládá
Tuesday, June 22, 2010

6. UI
User Interface
UI je souhrn způsobů, jakými uživatelé ovlivňují chování strojů,
zařízení, nebo počítačových programů, žen.
vstupy od uživatele, kterými se prostředí ovládá
výstupy, které prezentují výsledky uživatelových vstupů
Tuesday, June 22, 2010

7. Mac-like
Tuesday, June 22, 2010

8. WinStrom Flexibee
Tuesday, June 22, 2010

9. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
Tuesday, June 22, 2010

10. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
Tuesday, June 22, 2010

11. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
Tuesday, June 22, 2010

12. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
Tuesday, June 22, 2010

13. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
Tuesday, June 22, 2010

14. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
5. nativní UI objekty
Tuesday, June 22, 2010

15. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
5. nativní UI objekty
6. minimum in-screen objektů
Tuesday, June 22, 2010

16. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
5. nativní UI objekty
6. minimum in-screen objektů
7. žádné nastavení
Tuesday, June 22, 2010

17. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
5. nativní UI objekty
6. minimum in-screen objektů
7. žádné nastavení
8. nenořit uživatele hluboko do aplikace
Tuesday, June 22, 2010

18. Mac-like
10 (nepsaných) pravidel pro design UI pro iOS apps
1. vlastnit iPhone či jiné zařízení s iOS
2. studovat HIG a aplikace v AppStore
3. mít cit pro design a detaily
4. jedna obrazovka by měla obsahovat jednu “věc”
5. nativní UI objekty
6. minimum in-screen objektů
7. žádné nastavení
8. nenořit uživatele hluboko do aplikace
9. dostatek whitespace a vhodné velikosti objektů
Tuesday, June 22, 2010

19. Demo
Not-Mac-like design
Tuesday, June 22, 2010

20. Pastefire
Tuesday, June 22, 2010

21. Quadratic Master (Lukáš Petr)
Tuesday, June 22, 2010

22. Quadratic Master (Lukáš Petr)
Tuesday, June 22, 2010

23. Kamery Praha (Lukáš Petřík)
Tuesday, June 22, 2010

24. Demo
Mac-like design
Tuesday, June 22, 2010

25. Twitter (Tweetie)
Tuesday, June 22, 2010

26. Reeder
Tuesday, June 22, 2010

27. Pastebot
Tuesday, June 22, 2010

28. Design process
Postup při návrhu designu UI pro iOS apps
Tuesday, June 22, 2010

29. Design process
Postup při návrhu designu UI pro iOS apps
Wireframes
Tuesday, June 22, 2010

30. Wireframes
Nástroje pro tvorbu
Tuesday, June 22, 2010

31. Low-tech
Ruční práce
Tuesday, June 22, 2010

32. Low-tech
Ruční práce
Tužka a papír
Tuesday, June 22, 2010

33. Low-tech
Ruční práce
Tužka a papír iPhone UI Stencil Kit
Tuesday, June 22, 2010

34. Low-tech
Ruční práce
Tužka a papír iPhone UI Stencil Kit Notepod
Tuesday, June 22, 2010

35. High-tech
Drag and drop drop
Tuesday, June 22, 2010

36. High-tech
Drag and drop drop
Photoshop
Tuesday, June 22, 2010

37. High-tech
Drag and drop drop
Photoshop Interface Builder
Tuesday, June 22, 2010

38. High-tech
Drag and drop drop
Photoshop Interface Builder OmniGraffle
Tuesday, June 22, 2010

39. Design process
Postup při návrhu designu UI pro iOS apps
Wireframes
Tuesday, June 22, 2010

40. Design process
Postup při návrhu designu UI pro iOS apps
Wireframes Design
Tuesday, June 22, 2010

41. Tuesday, June 22, 2010

42. Tuesday, June 22, 2010

43. Design process
Postup při návrhu designu UI pro iOS apps
Wireframes Design
Tuesday, June 22, 2010

44. Design process
Postup při návrhu designu UI pro iOS apps
Wireframes Design Fine-Tuning
Tuesday, June 22, 2010

45. Fine-Tuning
[export fromPsd] != [Application sendToAppstore]
Nakreslená aplikace ve
Photoshopu rozhodně
neznamená, že práce
designera končí!
Tuesday, June 22, 2010

46. Fine-Tuning
[export fromPsd] != [Application sendToAppstore]
Nakreslená aplikace ve
Photoshopu rozhodně
neznamená, že práce
designera končí!
Tuesday, June 22, 2010

47. UX
User Experience
Tuesday, June 22, 2010

48. UX
User Experience
UX jsou pocity (zážitky) uživatele při interakci s aplikací,
službou nebo produktem. Je to abstraktní pojem.
Tuesday, June 22, 2010

49. UX
User Experience
UX jsou pocity (zážitky) uživatele při interakci s aplikací,
službou nebo produktem. Je to abstraktní pojem.
lidé máji rádi krásný obal a ten i prodává
Tuesday, June 22, 2010

50. UX
User Experience
UX jsou pocity (zážitky) uživatele při interakci s aplikací,
službou nebo produktem. Je to abstraktní pojem.
lidé máji rádi krásný obal a ten i prodává
o celkovém prožitku uživatele rozhodují především velmi malé detaily
Tuesday, June 22, 2010

51. Tuesday, June 22, 2010

52. Tuesday, June 22, 2010

53. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
Tuesday, June 22, 2010

54. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
Tuesday, June 22, 2010

55. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
Tuesday, June 22, 2010

56. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
Tuesday, June 22, 2010

57. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
Tuesday, June 22, 2010

58. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
Tuesday, June 22, 2010

59. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
6. nepřenášet zvyky z jiných medií/OS
Tuesday, June 22, 2010

60. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
6. nepřenášet zvyky z jiných medií/OS
7. nejdřív zábava a pak práce
Tuesday, June 22, 2010

61. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
6. nepřenášet zvyky z jiných medií/OS
7. nejdřív zábava a pak práce
8. “opravdu je to nutné tam mít tenhle button?”
Tuesday, June 22, 2010

62. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
6. nepřenášet zvyky z jiných medií/OS
7. nejdřív zábava a pak práce
8. “opravdu je to nutné tam mít tenhle button?”
9. překvapte uživatele
Tuesday, June 22, 2010

63. Kua, tohle je fakt cool!
10 důležitých rad pro lepší UX iOS app
1. UX > množství funkcí
2. jednoduchost
3. detaily, detaily, detaily
4. texty, labels, typografie
5. nenutit uživatele přemýšlet
6. nepřenášet zvyky z jiných medií/OS
7. nejdřív zábava a pak práce
8. “opravdu je to nutné tam mít tenhle button?”
9. překvapte uživatele
10. nechte si poradit
Tuesday, June 22, 2010

64. Uživateli velmi oblíbená
app nemá tolik funkcí jako
konkureční app ale přesto
se prodává lépe.
Tuesday, June 22, 2010

65. Uživateli velmi oblíbená
app nemá tolik funkcí jako
konkureční app ale přesto
se prodává lépe.
Mezi uživateli je oblibená, protože
je jednoduchá na ovládání, vydává
zvuky a má strašně cool refresh.
Tuesday, June 22, 2010

66. Uživateli velmi oblíbená
app nemá tolik funkcí jako
konkureční app ale přesto
se prodává lépe.
Mezi uživateli je oblibená, protože
je jednoduchá na ovládání, vydává
zvuky a má strašně cool refresh.
Tuesday, June 22, 2010

67. “The age of features is dead;
Welcome to the age of User
Experience.”
— Aral Balkan, @aral
Tuesday, June 22, 2010

68. Otázky?
@robinraszka
www.tapmates.com
Tuesday, June 22, 2010