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

Ahmad FirozVisual Designer & Studentahmadfiroz@outlook.com

ahmadfiroz.com