mobile first | hogyan tervezzünk mobilra?

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

Köszönöm a figyelmet!

Email: goredani@gmail.com Twitter: @gored