1. MOBILE FIRST
Tervezzünk Mobilra!
Góré Dániel | 2012.02.28. SzegedTech Meetup

2. Főbb pontok
• Miért Mobil?
• Tervezzünk Mobilra!
• Technológiák
• Lehetőségek
• Tervezési irányelvek

3. Miért Mobil?

4. A kezdetekben
• WAP
• Kezdetleges, esetlen
• PDA

5. 2007

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. 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. 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. Tervezzünk mobilra!

10. De merre induljunk el?

11. • Ismerjük meg az ügyfelet
• Ismerjük meg a céljait

12. ?
• Mit használ?
• Mire használja?
• Mikor használja?
• Hol használja?

13. Mobile First

14. Kis képernyőméret
• Kis képernyőméret
• Változó arányok
• Változó pixel sűrűség (ppi)

15. Kis képernyőméret
Mobil oldalak Weboldalak
min. 320*480 min. 1024*768

16. Mobile First
• Inkább lehetőség mint probléma
• Felesleges elemek megtalálása
• Struktúrális átalakítás

17. Mobile First
• Cél és funkciók meghatározása
• Google Analytics
• Mobilról hogyan használják az
oldalunkat?

19. Változás a felhasználásban
• Teljesen más felhasználói szokások
• Felhasználás
• helye
• időpontja
• menete

21. One Eye One Thumb

24. 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

25. Technológiák

26. Natív?
Webapp?
Reszponzív?

27. Natív alkalmazások
• Teljesítmény
• Funkcionalitás
• Több platform esetén drága és
időigényes

28. Natív alkalmazások
• Android (Java)
• iOS (XCode)
• Windows Mobile (C#)

29. Native App Platformok
• PhoneGap
• Titanium
• Adobe AIR

30. 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

31. Mobile App Frameworks
• jQTouch
• jQuery Mobile
• Sencha Touch

32. Responsive Design

33. Responsive Design
• Eltérő képernyőméretek
• Eltérő felhasználói szokások
• Mobile | Tablet | Desktop | TV

34. Responsive Design
• Eszközök meghatározás
• Tartalmi meghatározása
• Break Pointok meghatározása
• Design megtervezése

35. 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

36. Lehetőségek

37. Okostelefon
• Mobil Internet
• GPS
• Alkalmazások
• Kép, video és hangrögzítés
• Wifi & Bluethoot

38. Lokalizálás
• GPS
• Wifi
• Adótorony (háromszögelés)
• IP tartomány

39. Tájolás & Gyorsulás
• Telefon elfordítása
• Telefon megdöntése (tilt scroll)
• Rázások

40. Tájolás & Gyorsulás

41. Érintés
• Hagyományos mozdulatok
• Multi Touch

43. Érintés
• Formák
• Szimbólumok

44. Natural User Interface
• CLI - GUI - NUI
• Direkt, intuitív
• Nem igényel semmilyen egyéb eszközt
(post-WIMP)
• Navigációs akciók

46. NFC
• Telefon - Telefon
között
• Telefon - Tag
• Fizetési rendszerek
• Wifi regisztráció,
Social Media

47. Proximity
• Közelben tartózkodó tárgyakkal
automatikus kapcsolat
• Folyamatos Bluetooth vagy Wifi
kapcsolat

48. Tervezési irányelvek

49. Content First
• Tartalom a navigáció előtt
• Kevés az idő
• Gyorsan kell az információ

50. Content First
• Tegyük a tartalmat előtérbe
• Rejtsük el a navigációt
• Visszalépés (eszközfüggő)

51. Struktúra
• Alkalmazkodjunk ahhoz ahogy a
felhasználók használják a mobilunkat
• Keresés
• Navigáció

52. Struktúra
• Natív elemek figyelembe vétele
• Tartalmi megjelenítések
• Lehetőség szerint ne térjünk el tőlük

54. 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

55. Interakció
• Hol érintkezünk?
• Nehezen illetve könnyen elérhető
pontok
• iPhone vs nagyobb kijelzők

56. Galaxy
iPhone 4
S II
3,5 inch
4,21 inch
http://dcurt.is/2011/10/03/3-point-5-inches/

58. Szöveges Interakciók
• Szerkesztés
• Kiválasztás

59. Objektum Interakciók
• Létrehozás
• Törlés
• Duplikálás

60. 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

61. Ha nincs touch
• Aktív elemek kiemelése
• :hover, :focus

62. Input formok
• Legelterjedtebb elem, amely
interaktivitást biztosít mobilon
• Formok fontossága
• Twitter 40%-a mobilról jön

63. 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

64. http://blog.retronyms.com/2009/12/exploring-android-ui-os-conventions.html

65. Input formok
• Új standardok
• HTML5 (url, email, number)
• autocapitalize, autocorrect
• Input maszkok

66. Teljesítmény
• Hiába csúcstelefon, ha lassú a hálózat
• Kevesebb adat = gyorsabb válasz

67. 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

68. Köszönöm a figyelmet!
Email: goredani@gmail.com Twitter: @gored