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

Transforma>on

Naviga>on First Content First

Transforma>on

Mobile first ux

Design

Transcript of Mobile first ux