Download - Ux & hybrid app
UX & Hybrid App
The challenge of going mobile
First Up! Why?
Cars
Bad experiences !
They stick with you! Get to your nerves
Good experiences !
They stick with you too
Happy Customers, Happy You
Face the Challenge
Interactions , Interactions
Android
Touch Double touch
Swipe or drag
Long press dragLong
press
developer.android.com
Android
Double touch drag
Pinch closePinch
Open
developer.android.com
iOS
iOS
Patentlyapple
quojs.tapquo.com
Notificationshttp://plugins.cordova.io/#/package/de.appplant.cordova.plugin.local-notification
Measurements
That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px).
How you seen it on your pc
MeasurementsSuppose your pc has a depth of 160px per inch which we call 160DPI Screen. Dpi= Dot per inch. Androids are usually have more DPI(260-640DPI). Your icon -
~160 DPI (Feels ok )
~240 DPI ( Bit small but ok )
~ 640DPI (Aw!can’t see it :o )
Possible Solutions?
• Vector!!! Maybe!! But How smartphones will understand what to show ?• The web works with pixels but phones cant work with
this thing only because of large pixel density.• We need density independent unit for that purpose.• DP = DIP = Density Independent Pixel. ( Used for all type of
graphics)• SP = SIP = Scale Independent Pixel. ( Used for fonts )
Measurements
• 2:3:6:8 Scaling Ratio• MDPI= 1x (~160 DPI)• HDPI=1.5x(~240DPI)• XHDPI= 2x(~320DPI)• XXHDPI= 3x(~480DPI)• XXXHDPI=4x(~640DPI)
• Example:• 48*48px(~160DPI)• 72*72px(~240DPI)• 96*96px(~320DPI)• 144*144px(~480DPI)• 192*192px(~640DPI)
Icons
• They are like doors.• Start Big, If possible vector.• Common names are easy to implement• Optimize with Optipng/pngcrush• http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html
Other things that makes difference
• Splashscreen.• Actionbar/Toolbar.• Navigation way. • Using the best possible screen realestate
Will build one app and build it to all platform
Bad idea !/ Way more to think off/ too much Challenge
Building Native things => easy. Less to think about
Tools
I don’t recommend this one
Intel's App Framework
Some apps to look onto
• Flipboard ( they made it cross platform ) • Instagram• Health• BBC• Exfm• Rormix• Fruitsalad• twist• IGN Dominate