Mobile First | Hogyan tervezzünk mobilra?

1,726 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,726
On SlideShare
0
From Embeds
0
Number of Embeds
113
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile First | Hogyan tervezzünk mobilra?

  1. 1. MOBILE FIRSTTervezzünk Mobilra!Góré Dániel | 2012.02.28. SzegedTech Meetup
  2. 2. Főbb pontok• Miért Mobil?• Tervezzünk Mobilra!• Technológiák• Lehetőségek• Tervezési irányelvek
  3. 3. Miért Mobil?
  4. 4. A kezdetekben• WAP• Kezdetleges, esetlen• PDA
  5. 5. 2007
  6. 6. Valami megváltozott• Mobile Web Experience• Érintőképernyő, 3G• App Store & Android Market etc.• Egyszerűbb fejlesztés• Széleskörű publikáció
  7. 7. Mobil növekedés• 2012 előznek az okostelefonok• Több internet képes mobil mint bármilyen más eszköz• Növekednek a mobil elérések
  8. 8. Mobil növekedés• Mail (web: -6% mobil: +36%)• Paypal: 10 millió dollár forgalom mobilról• eBay: 2010: 2 milliárd dolláros forgalom
  9. 9. Tervezzünk mobilra!
  10. 10. De merre induljunk el?
  11. 11. • Ismerjük meg az ügyfelet• Ismerjük meg a céljait
  12. 12. ?• Mit használ?• Mire használja?• Mikor használja?• Hol használja?
  13. 13. Mobile First
  14. 14. Kis képernyőméret• Kis képernyőméret• Változó arányok• Változó pixel sűrűség (ppi)
  15. 15. Kis képernyőméretMobil oldalak Weboldalakmin. 320*480 min. 1024*768
  16. 16. Mobile First• Inkább lehetőség mint probléma• Felesleges elemek megtalálása• Struktúrális átalakítás
  17. 17. Mobile First• Cél és funkciók meghatározása• Google Analytics• Mobilról hogyan használják az oldalunkat?
  18. 18. Változás a felhasználásban• Teljesen más felhasználói szokások• Felhasználás • helye • időpontja • menete
  19. 19. One Eye One Thumb
  20. 20. London Tube• Eltér a felhasználás helye• Cél megértése, funkciók tisztázása• Telefon lehetőségeinek kihasználása
  21. 21. Technológiák
  22. 22. Natív? Webapp? Reszponzív?
  23. 23. Natív alkalmazások• Teljesítmény• Funkcionalitás• Több platform esetén drága és időigényes
  24. 24. Natív alkalmazások• Android (Java)• iOS (XCode)• Windows Mobile (C#)
  25. 25. Native App Platformok• PhoneGap• Titanium• Adobe AIR
  26. 26. Mobile Apps• Szinte bármelyik rendszeren elfutnak• Olcsóbb a fejlesztés• Korlátozott hozzáférés a telefonhoz• Jobban támaszkodik a netes kapcsolatra
  27. 27. Mobile App Frameworks • jQTouch • jQuery Mobile • Sencha Touch
  28. 28. Responsive Design
  29. 29. Responsive Design• Eltérő képernyőméretek• Eltérő felhasználói szokások• Mobile | Tablet | Desktop | TV
  30. 30. Responsive Design• Eszközök meghatározás• Tartalmi meghatározása• Break Pointok meghatározása• Design megtervezése
  31. 31. Responsive Design• Eltérő körülmények• Eltérő vezérlés• Kéz | Egér | Távirányító• Nincs tökéletes UX átfedés
  32. 32. Lehetőségek
  33. 33. Okostelefon• Mobil Internet• GPS• Alkalmazások• Kép, video és hangrögzítés• Wifi & Bluethoot
  34. 34. Lokalizálás• GPS• Wifi• Adótorony (háromszögelés)• IP tartomány
  35. 35. Tájolás & Gyorsulás• Telefon elfordítása• Telefon megdöntése (tilt scroll)• Rázások
  36. 36. Tájolás & Gyorsulás
  37. 37. Érintés• Hagyományos mozdulatok• Multi Touch
  38. 38. Érintés• Formák• Szimbólumok
  39. 39. Natural User Interface • CLI - GUI - NUI • Direkt, intuitív • Nem igényel semmilyen egyéb eszközt (post-WIMP) • Navigációs akciók
  40. 40. NFC• Telefon - Telefon között• Telefon - Tag• Fizetési rendszerek• Wifi regisztráció, Social Media
  41. 41. Proximity• Közelben tartózkodó tárgyakkal automatikus kapcsolat• Folyamatos Bluetooth vagy Wifi kapcsolat
  42. 42. Tervezési irányelvek
  43. 43. Content First• Tartalom a navigáció előtt• Kevés az idő• Gyorsan kell az információ
  44. 44. Content First• Tegyük a tartalmat előtérbe• Rejtsük el a navigációt• Visszalépés (eszközfüggő)
  45. 45. Struktúra• Alkalmazkodjunk ahhoz ahogy a felhasználók használják a mobilunkat• Keresés• Navigáció
  46. 46. Struktúra• Natív elemek figyelembe vétele• Tartalmi megjelenítések• Lehetőség szerint ne térjünk el tőlük
  47. 47. Interakció• Interakciós elemek méretei• Apple: 44ppi• Android: 48ppi• Windows 7: 7-9 mm• Elemek között legalább 2 mm távolság
  48. 48. Interakció• Hol érintkezünk?• Nehezen illetve könnyen elérhető pontok• iPhone vs nagyobb kijelzők
  49. 49. GalaxyiPhone 4 S II 3,5 inch 4,21 inch http://dcurt.is/2011/10/03/3-point-5-inches/
  50. 50. Szöveges Interakciók • Szerkesztés • Kiválasztás
  51. 51. Objektum Interakciók• Létrehozás• Törlés• Duplikálás
  52. 52. Navigációs Interakciók • Scroll • Gyorsabb scroll • Navigációs Pontok • Fejléc - Lábléc http://www.alistapart.com/d/organizing-mobile/4-15.png
  53. 53. Ha nincs touch• Aktív elemek kiemelése• :hover, :focus
  54. 54. Input formok• Legelterjedtebb elem, amely interaktivitást biztosít mobilon• Formok fontossága• Twitter 40%-a mobilról jön
  55. 55. Input formok• Integrált felhasználóbarát elemek• Figyeljünk a méretek betartására (7-9mm)• Adjunk meg alap értékeket• Figyeljünk a nem érintőképernyős eszközökre is
  56. 56. http://blog.retronyms.com/2009/12/exploring-android-ui-os-conventions.html
  57. 57. Input formok• Új standardok• HTML5 (url, email, number)• autocapitalize, autocorrect• Input maszkok
  58. 58. Teljesítmény• Hiába csúcstelefon, ha lassú a hálózat• Kevesebb adat = gyorsabb válasz
  59. 59. Teljesítmény• Spriteok egy fájlban• CSS és Js fájlok tömörítése• Felesleges kódrészletek eltávolítása• HTML5 Application Cache• CSS3 technikák
  60. 60. Köszönöm a figyelmet!Email: goredani@gmail.com Twitter: @gored

×