ux & hybrid app
DESCRIPTION
My presentation on maintaining ux in hybrid app on llc dhakas first eventTRANSCRIPT
![Page 1: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/1.jpg)
UX & Hybrid App
The challenge of going mobile
![Page 2: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/2.jpg)
First Up! Why?
![Page 3: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/3.jpg)
Cars
![Page 4: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/4.jpg)
Bad experiences !
They stick with you! Get to your nerves
![Page 5: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/5.jpg)
Good experiences !
They stick with you too
![Page 6: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/6.jpg)
Happy Customers, Happy You
![Page 7: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/7.jpg)
Face the Challenge
![Page 8: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/8.jpg)
![Page 9: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/9.jpg)
Interactions , Interactions
![Page 10: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/10.jpg)
Android
Touch Double touch
Swipe or drag
Long press dragLong
press
developer.android.com
![Page 11: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/11.jpg)
Android
Double touch drag
Pinch closePinch
Open
developer.android.com
![Page 12: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/12.jpg)
iOS
![Page 13: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/13.jpg)
iOS
Patentlyapple
![Page 14: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/14.jpg)
![Page 15: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/15.jpg)
quojs.tapquo.com
![Page 16: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/16.jpg)
Notificationshttp://plugins.cordova.io/#/package/de.appplant.cordova.plugin.local-notification
![Page 17: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/17.jpg)
Measurements
That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px).
How you seen it on your pc
![Page 18: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/18.jpg)
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 )
![Page 19: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/19.jpg)
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 )
![Page 20: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/20.jpg)
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)
![Page 21: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/21.jpg)
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
![Page 22: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/22.jpg)
Other things that makes difference
• Splashscreen.• Actionbar/Toolbar.• Navigation way. • Using the best possible screen realestate
![Page 23: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/23.jpg)
Will build one app and build it to all platform
![Page 24: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/24.jpg)
Bad idea !/ Way more to think off/ too much Challenge
![Page 25: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/25.jpg)
Building Native things => easy. Less to think about
![Page 26: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/26.jpg)
Tools
I don’t recommend this one
Intel's App Framework
![Page 27: Ux & hybrid app](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b742a84a7959796e8b45dc/html5/thumbnails/27.jpg)
Some apps to look onto
• Flipboard ( they made it cross platform ) • Instagram• Health• BBC• Exfm• Rormix• Fruitsalad• twist• IGN Dominate