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