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