mobile first ux

Download Mobile first ux

Post on 29-Nov-2014

321 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Mobile First

TRANSCRIPT

  • 1. Mobile First Presenter: Baidurjya Sinha (Tatan) Innovation and UX Strategist Designing Apps with the Mobile UX focus
  • 2. Insights Why we need mobile focus Mobile is not Desktop Why people use mobile How people use mobile Mobile Ergonomics Touch Interac>ons Mobile Design Strategy Design PaAerns Designing a scalable app
  • 3. Why Mobile..?
  • 4. Mobile facts 6B connec>ons today 10B connec>ons in 2016
  • 5. Paypal Mobile payments 2009 - $141 million 2010 - $750 million 2011 - $4 billion 2012 - $14 billion 2013- $20+ billion
  • 6. ebay Mobile purchase 2009 - $600 million 2010 - $2 billion 2011 - $5 billion
  • 7. Mobile is not Desktop
  • 8. Desktop
  • 9. Components
  • 10. Work sta>on
  • 11. Laptop
  • 12. Components
  • 13. Laptop in oce
  • 14. Laptop at home
  • 15. Mobile
  • 16. Components
  • 17. Mobile at oce
  • 18. Mobile at home
  • 19. Mobile in car
  • 20. Where people use mobile?
  • 21. Every where
  • 22. Facts 84% at Home 80% during misc. >mes 74% wai>ng in lines 64% during work
  • 23. Why people use Mobile..?
  • 24. People use mobile to. Do Micro-Task
  • 25. ..and to Do urgent repe>>ve task when bored
  • 26. Common Tasks using Mobile Calling Look up or Search Explore and Play Check Status and updates Create ,Edit, submit
  • 27. Data usage PC v/s Mobile >me Data Volume Data Volume >me
  • 28. How people use mobile..?
  • 29. Ergonomics
  • 30. Touch Accessibility
  • 31. Tablets and Phablets
  • 32. Core Gestures Tap Drag Double Tap Flick Pinch Close Pinch Open Press Press & Tap Rotate Press & Drag 2 nger Press & Drag 2 nger Rotate 2 nger Rotate
  • 33. Target Size
  • 34. Ok , so what is the take..?
  • 35. Oh! We agree Mobile is denitely dierent from desktop Mobile Design is dierent from desktop The form factors are dierent
  • 36. So do we have some UI paAerns..?
  • 37. Common Mobile UI PaAerns Hub and Spoke Nested Doll Bento Box Tabbed Filtered
  • 38. Hub and Spoke
  • 39. Nested Doll
  • 40. Bento Box
  • 41. Tabbed
  • 42. Filtered
  • 43. Challenge :Dierent Screen Size and resolu>ons?
  • 44. Screen Size
  • 45. What should be my Design strategy ?
  • 46. Design Philosophy Responsive Adap>ve
  • 47. Design Strategy Mobile rst Mobile First and then scale up
  • 48. Ok Mobile First. What more we need to consider ?
  • 49. Content rst Naviga>on second Minimum Nav and Max Content Focus on what is most i