UI/UX

2,019 views

Published on

Moje slides k prezentaci o User Interface a User Experience na konferenci iDevcamp 2010.

@robinraszka
http://tapmates.com

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,019
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
53
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

UI/UX

  1. 1. UI/UX Robin Raszka @robinraszka www.tapmates.com Tuesday, June 22, 2010
  2. 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. 3. UI User Interface Tuesday, June 22, 2010
  4. 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. 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. 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. 7. Mac-like Tuesday, June 22, 2010
  8. 8. WinStrom Flexibee Tuesday, June 22, 2010
  9. 9. Mac-like 10 (nepsaných) pravidel pro design UI pro iOS apps Tuesday, June 22, 2010
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Demo Not-Mac-like design Tuesday, June 22, 2010
  20. 20. Pastefire Tuesday, June 22, 2010
  21. 21. Quadratic Master (Lukáš Petr) Tuesday, June 22, 2010
  22. 22. Quadratic Master (Lukáš Petr) Tuesday, June 22, 2010
  23. 23. Kamery Praha (Lukáš Petřík) Tuesday, June 22, 2010
  24. 24. Demo Mac-like design Tuesday, June 22, 2010
  25. 25. Twitter (Tweetie) Tuesday, June 22, 2010
  26. 26. Reeder Tuesday, June 22, 2010
  27. 27. Pastebot Tuesday, June 22, 2010
  28. 28. Design process Postup při návrhu designu UI pro iOS apps Tuesday, June 22, 2010
  29. 29. Design process Postup při návrhu designu UI pro iOS apps Wireframes Tuesday, June 22, 2010
  30. 30. Wireframes Nástroje pro tvorbu Tuesday, June 22, 2010
  31. 31. Low-tech Ruční práce Tuesday, June 22, 2010
  32. 32. Low-tech Ruční práce Tužka a papír Tuesday, June 22, 2010
  33. 33. Low-tech Ruční práce Tužka a papír iPhone UI Stencil Kit Tuesday, June 22, 2010
  34. 34. Low-tech Ruční práce Tužka a papír iPhone UI Stencil Kit Notepod Tuesday, June 22, 2010
  35. 35. High-tech Drag and drop drop Tuesday, June 22, 2010
  36. 36. High-tech Drag and drop drop Photoshop Tuesday, June 22, 2010
  37. 37. High-tech Drag and drop drop Photoshop Interface Builder Tuesday, June 22, 2010
  38. 38. High-tech Drag and drop drop Photoshop Interface Builder OmniGraffle Tuesday, June 22, 2010
  39. 39. Design process Postup při návrhu designu UI pro iOS apps Wireframes Tuesday, June 22, 2010
  40. 40. Design process Postup při návrhu designu UI pro iOS apps Wireframes Design Tuesday, June 22, 2010
  41. 41. Tuesday, June 22, 2010
  42. 42. Tuesday, June 22, 2010
  43. 43. Design process Postup při návrhu designu UI pro iOS apps Wireframes Design Tuesday, June 22, 2010
  44. 44. Design process Postup při návrhu designu UI pro iOS apps Wireframes Design Fine-Tuning Tuesday, June 22, 2010
  45. 45. Fine-Tuning [export fromPsd] != [Application sendToAppstore] Nakreslená aplikace ve Photoshopu rozhodně neznamená, že práce designera končí! Tuesday, June 22, 2010
  46. 46. Fine-Tuning [export fromPsd] != [Application sendToAppstore] Nakreslená aplikace ve Photoshopu rozhodně neznamená, že práce designera končí! Tuesday, June 22, 2010
  47. 47. UX User Experience Tuesday, June 22, 2010
  48. 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. 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. 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. 51. Tuesday, June 22, 2010
  52. 52. Tuesday, June 22, 2010
  53. 53. Kua, tohle je fakt cool! 10 důležitých rad pro lepší UX iOS app Tuesday, June 22, 2010
  54. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 67. “The age of features is dead; Welcome to the age of User Experience.” — Aral Balkan, @aral Tuesday, June 22, 2010
  68. 68. Otázky? @robinraszka www.tapmates.com Tuesday, June 22, 2010

×