Mobil UX design

2,819 views

Published on

A MOME ID User interface design tanfolyamon elhangzott előadás mobil környezetről, felhasználókról és mobil felületek tervezéséről.

Published in: Design

Mobil UX design

  1. 1. Mobil UX design Kollin Zoltán ! MOME ID 2013
  2. 2. USER INTERFACE DESIGNER TANFOLYAM http://momeid.mome.hu/ 2013. november 5.
  3. 3. HELLO Kollin Zoltán! ux designer @ mito
  4. 4. A mobilról lesz ma szó. felhasználókról natív appokról és mobil webről használhatóságról felülettervezésről követendő példákról
  5. 5. A mobil felhasználó
  6. 6. Tartalomfogyasztás mobilon
  7. 7. Nem csak méretben különbözik
  8. 8. Hanem például kontextusában is Fél szemmel Fél kézzel Menet közben Egy ujjal
  9. 9. Ugyanakkor: “In Google’s annual survey of mobile users, they found that 60% of smartphone use takes place in the home.” ! http://uxmag.com/articles/six-mobile-myths
  10. 10. Mi a felhasználó célja?
  11. 11. Ugyanaz, mint amikor a számítógépe előtt ül.
  12. 12. Információkeresés! pl. Google Maps Státuszkövetés! pl. Facebook Munka / feladat! pl. E-mail Unaloműzés! pl. Angry Birds
  13. 13. A lényeg érdekli
  14. 14. A kevesebb sokszor több
  15. 15. ‣ GPS ‣ Kamera ‣ Giroszkóp ‣ Accelerometer A mobil nem korlátoz. Sőt. ‣ Iránytű ‣ Multi-touch ‣ NFC ‣ Ujjlenyomat-olvasó ‣ Hangvezérlés ‣ Light sensor ‣ Proximity sensor
  16. 16. Natív app vagy mobil web?
  17. 17. Natív app Használhatod a telefon teljes funkcionalitását! Push notifikáció, in-app purchase! Jobb lesz a teljesítmény! Állandó login! De! Tovább tart és drágább a fejlesztés! Minden platformra külön el kell készíteni! Bonyolultabb az update
  18. 18. Mobil web Olcsóbb, gyorsabb, rugalmasabb! Egy helyen történik a fejlesztés! Keresőoptimalizálhatod! De
 Nem natív :)
  19. 19. ján A tt lo lva o ny má s Luke Wroblewski! Mobile First
  20. 20. Mobil ergonómia
  21. 21. Direkt manipuláció és gesztusok
  22. 22. Intuitív, de máshogy használjuk
  23. 23. Nehezebb “célozni”! Nagyobb tappintható terület 
 és white space kell Nincs ! egérkurzor
  24. 24. Látszódjon, hogy “kattintható”! Button Button Nincs ! hover Tooltipek és kinyíló menük újragondolása
  25. 25. Kerüld a kétirányú scrollt! Legyen egyértelmű, ha folytatódik Scroll helyett swipe
  26. 26. Vizuális visszajelzések! Animációk! Gombok “pressed” állapota Nincs fizikai feedback
  27. 27. Arányaiban nagyobb szövegméret! Könnyen olvasható tipográfia! Tömör, tagolt szövegek Kisebb felület, kisebb pixelek
  28. 28. Gépelni is teljesen más rajta
  29. 29. Az a bizonyos hüvelykujj
  30. 30. Az a bizonyos hüvelykujj A könnyen elérhető területek
  31. 31. Nem csak egyféleképpen tarthatod
  32. 32. A használatban is vannak trendek Az a bizonyos hüvelykujj
  33. 33. A használatban is vannak trendek Az a bizonyos hüvelykujj
  34. 34. ló a Az a bizonyos hüvelykujj as lv iv n ján A to lot Android iOS Windows Phone Design guideline-ok
  35. 35. Mobile UI tervezés
  36. 36. Lineáris, egy oszlopos képernyőstruktúra
  37. 37. Legfontosabb a tartalom
  38. 38. A navigáció csak második
  39. 39. Információs architektúra tervezés
  40. 40. Navigáció típusok Tabok Egyértelmű legnépszerűbb tartalom Fix hierarchia Több szint mély struktúra
  41. 41. Navigáció típusok Dashboard Sekély információs architektúra Egyenlő prioritás a tartalmak között A nyitóoldal “feláldozása”
  42. 42. Navigáció típusok “Hamburger” Rejtett menü Minden felületről elérhető Rugalmasan bővíthető
  43. 43. Tabok Dashboard “Hamburger”
  44. 44. Popover Gesztus ???
  45. 45. Gesztusok, mint navigáció
  46. 46. Mobil form design tippek
  47. 47. Dobj ki mindent, ami nem létszükséglet
  48. 48. Egyszerűsített regisztráció
  49. 49. Mezőcimkék felül vagy a mezőben
  50. 50. Használj megfelelő mezőtípusokat
  51. 51. Használd ki a mobil adottságait
  52. 52. Nem csak checkboxok vannak
  53. 53. Default értékek
  54. 54. Tippek és segítség
  55. 55. iv n ján A to lot as lv ló a http://pttrns.com/
  56. 56. Részletek
  57. 57. Animáció
  58. 58. Feedback
  59. 59. Feedback
  60. 60. “Félrekattintottál vagy komoly?”
  61. 61. Első használat
  62. 62. Tour
  63. 63. Edukáció menet közben
  64. 64. Amikor nincs még tartalom
  65. 65. Splash screen
  66. 66. Gesztus, másként
  67. 67. Szövegezés
  68. 68. Amikor mindenre gondolnak
  69. 69. iv n ján A to lot as lv ló a http://littlebigdetails.com/
  70. 70. Drótváz tervezés
  71. 71. Drótváz (wireframe)
  72. 72. Grafikai design
  73. 73. Wireframe Grafikai terv Képernyőszerkezet A pontos megjelenés:! Navigáció Színek Tartalomstruktúra Formák A megjelenített információk Grafikai elemek Interaktív funkciók működése Tipográfia Az ezek közti arányok, kapcsolatok, hangsúlyok Vizuális stílus
  74. 74. Wireframe Grafikai terv
  75. 75. Wireframe Grafikai terv
  76. 76. Wireframe Grafikai terv
  77. 77. Low fidelity
  78. 78. High fidelity
  79. 79. Flow-k és felületek
  80. 80. Eszközök
  81. 81. Axure
  82. 82. Miért készíts először wireframe-et? Hogy a működésre, ne a megjelenésre koncentrálj. Hogy a grafikailag jelentéktelennek tűnő kérdéseket is alaposan átgondold. Hogy gyorsabban tudd validálni. Hogy könnyebben tudj módosítani.
  83. 83. Drótvázból prototípus
  84. 84. Mielőtt rajzolni kezdesz, ! ismerd meg… a funkcionalitást a tartalmakat a technikai környezetet a felhasználó igényeit a struktúrát
  85. 85. Köszönöm a figyelmet!

×