O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ux & hybrid app

960 visualizações

Publicada em

My presentation on maintaining ux in hybrid app on llc dhakas first event

  • Entre para ver os comentários

Ux & hybrid app

  1. 1. UX & Hybrid App The challenge of going mobile
  2. 2. First Up!Why?
  3. 3. Cars
  4. 4. Bad experiences ! They stick with you! Get to your nerves
  5. 5. Good experiences ! They stick with you too
  6. 6. Happy Customers, HappyYou 
  7. 7. Face the Challenge
  8. 8. Interactions , Interactions
  9. 9. Android Touch Double touchSwipe or drag Long press drag Long press developer.android.com
  10. 10. Android Double touch drag Pinch close Pinch Open developer.android.com
  11. 11. iOS
  12. 12. iOS Patentlyapple
  13. 13. quojs.tapquo.com
  14. 14. Notifications http://plugins.cordova.io/#/package/de.appplant.cordova.plugin.local-notification
  15. 15. Measurements That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px). How you seen it on your pc
  16. 16. Measurements Suppose 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 )
  17. 17. 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 )
  18. 18. 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)
  19. 19. 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
  20. 20. Other things that makes difference • Splashscreen. • Actionbar/Toolbar. • Navigation way. • Using the best possible screen realestate
  21. 21. Will build one app and build it to all platform
  22. 22. Bad idea !/Way more to think off/ too much Challenge
  23. 23. Building Native things => easy. Less to think about
  24. 24. Tools I don’t recommend this one Intel's App Framework
  25. 25. Some apps to look onto • Flipboard ( they made it cross platform ) • Instagram • Health • BBC • Exfm • Rormix • Fruitsalad • twist • IGN Dominate
  26. 26. Ahmad Firoz Visual Designer & Student ahmadfiroz@outlook.com ahmadfiroz.com

×