Mobile first ux
-
Upload
tatan-sinha -
Category
Design
-
view
323 -
download
1
description
Transcript of Mobile first ux
Mobile First
Presenter: Baidurjya Sinha (Tatan) Innovation and UX Strategist
Designing Apps with the Mobile UX focus
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
Why Mobile…..?
Mobile facts
• 6B connec>ons today • 10B connec>ons in 2016
Paypal Mobile payments
• 2009 -‐ $141 million • 2010 -‐ $750 million • 2011 -‐ $4 billion • 2012 -‐ $14 billion • 2013-‐ $20+ billion
ebay Mobile purchase
• 2009 -‐ $600 million • 2010 -‐ $2 billion • 2011 -‐ $5 billion
Mobile is not Desktop
Desktop
Components
Work sta>on
Laptop
Components
Laptop in office
Laptop at home
Mobile
Components
Mobile at office
Mobile at home
Mobile in car
Where people use mobile………?
Every where
Facts
• 84% at Home • 80% during misc. >mes • 74% wai>ng in lines • 64% during work
Why people use Mobile…..?
People use mobile to….
• Do Micro-‐Task
……..and to
• Do urgent repe>>ve task when bored
Common Tasks using Mobile
• Calling • Look up or Search • Explore and Play • Check Status and updates • Create ,Edit, submit
Data usage PC v/s Mobile
>me
Data Volume
Data Volume
>me
How people use mobile..?
Ergonomics
Touch Accessibility
Tablets and Phablets
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
Target Size
Ok , so what is the take…..?
Oh! We agree…
• Mobile is definitely different from desktop • Mobile Design is different from desktop • The form factors are different
So do we have some UI paAerns…..?
Common Mobile UI PaAerns
• Hub and Spoke • Nested Doll • Bento Box • Tabbed • Filtered
Hub and Spoke
Nested Doll
Bento Box
Tabbed
Filtered
Challenge :Different Screen Size and resolu>ons?
Screen Size
What should be my Design strategy ?
Design Philosophy
• Responsive • Adap>ve
Design Strategy
• Mobile first – Mobile First and then scale up
Ok Mobile First. What more we need to consider ?
Content first Naviga>on second – Minimum Nav and Max Content – Focus on what is most important
Bad Design-‐ Naviga>on First
NAV
Worse – Naviga>on First
NAV
Facebook Mobile 2013
Facebook Mobile 2012
Facebook Mobile 2011
Facebook Mobile 2009
Transforma>on
Naviga>on First Content First
Transforma>on