mobile first | hogyan tervezzünk mobilra?
TRANSCRIPT
MOBILE FIRST Tervezzünk Mobilra!
Góré Dániel | 2012.02.28. SzegedTech Meetup
Főbb pontok
• Miért Mobil?
• Tervezzünk Mobilra!
• Technológiák
• Lehetőségek
• Tervezési irányelvek
Miért Mobil?
A kezdetekben
• WAP
• Kezdetleges, esetlen
• PDA
2007
Valami megváltozott
• Mobile Web Experience
• Érintőképernyő, 3G
• App Store & Android Market etc.
• Egyszerűbb fejlesztés
• Széleskörű publikáció
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
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
Tervezzünk mobilra!
De merre induljunk el?
• Ismerjük meg az ügyfelet
• Ismerjük meg a céljait
• Mit használ?
• Mire használja?
• Mikor használja?
• Hol használja? ?
Mobile First
Kis képernyőméret
• Kis képernyőméret
• Változó arányok
• Változó pixel sűrűség (ppi)
Mobil oldalak
min. 320*480
Weboldalak
min. 1024*768
Kis képernyőméret
Mobile First
• Inkább lehetőség mint probléma
• Felesleges elemek megtalálása
• Struktúrális átalakítás
Mobile First
• Cél és funkciók meghatározása
• Google Analytics
• Mobilról hogyan használják az oldalunkat?
Változás a felhasználásban
• Teljesen más felhasználói szokások
• Felhasználás
• helye
• időpontja
• menete
One Eye One Thumb
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
Technológiák
Natív?
Webapp?
Reszponzív?
Natív alkalmazások
• Teljesítmény
• Funkcionalitás
• Több platform esetén drága és időigényes
Natív alkalmazások
• Android (Java)
• iOS (XCode)
• Windows Mobile (C#)
Native App Platformok
• PhoneGap
• Titanium
• Adobe AIR
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
Mobile App Frameworks
• jQTouch
• jQuery Mobile
• Sencha Touch
Responsive Design
• Eltérő képernyőméretek
• Eltérő felhasználói szokások
• Mobile | Tablet | Desktop | TV
Responsive Design
• Eszközök meghatározás
• Tartalmi meghatározása
• Break Pointok meghatározása
• Design megtervezése
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
Responsive Design
Lehetőségek
Okostelefon
• Mobil Internet
• GPS
• Alkalmazások
• Kép, video és hangrögzítés
• Wifi & Bluethoot
Lokalizálás
• GPS
• Wifi
• Adótorony (háromszögelés)
• IP tartomány
Tájolás & Gyorsulás
• Telefon elfordítása
• Telefon megdöntése (tilt scroll)
• Rázások
Tájolás & Gyorsulás
Érintés
• Hagyományos mozdulatok
• Multi Touch
Érintés
• Formák
• Szimbólumok
Natural User Interface
• CLI - GUI - NUI
• Direkt, intuitív
• Nem igényel semmilyen egyéb eszközt (post-WIMP)
• Navigációs akciók
NFC• Telefon - Telefon
között
• Telefon - Tag
• Fizetési rendszerek
• Wifi regisztráció, Social Media
NFC
Proximity
• Közelben tartózkodó tárgyakkal automatikus kapcsolat
• Folyamatos Bluetooth vagy Wifi kapcsolat
Tervezési irányelvek
Content First
• Tartalom a navigáció előtt
• Kevés az idő
• Gyorsan kell az információ
Content First
• Tegyük a tartalmat előtérbe
• Rejtsük el a navigációt
• Visszalépés (eszközfüggő)
Struktúra
• Alkalmazkodjunk ahhoz ahogy a felhasználók használják a mobilunkat
• Keresés
• Navigáció
Struktúra
• Natív elemek figyelembe vétele
• Tartalmi megjelenítések
• Lehetőség szerint ne térjünk el tőlük
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
• Hol érintkezünk?
• Nehezen illetve könnyen elérhető pontok
• iPhone vs nagyobb kijelzők
Interakció
iPhone 43,5 inch
GalaxyS II
4,21 inch
http://dcurt.is/2011/10/03/3-point-5-inches/
Szöveges Interakciók
• Szerkesztés
• Kiválasztás
Objektum Interakciók
• Létrehozás
• Törlés
• Duplikálás
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
• Aktív elemek kiemelése
• :hover, :focus
Ha nincs touch
Input formok
• Legelterjedtebb elem, amely interaktivitást biztosít mobilon
• Formok fontossága
• Twitter 40%-a mobilról jön
• 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
Input formok
http://blog.retronyms.com/2009/12/exploring-android-ui-os-conventions.html
Input formok
• Új standardok
• HTML5 (url, email, number)
• autocapitalize, autocorrect
• Input maszkok
Teljesítmény
• Hiába csúcstelefon, ha lassú a hálózat
• Kevesebb adat = gyorsabb válasz
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
