1.
Mobile First
Presenter:
Baidurjya Sinha (Tatan)
Innovation and UX Strategist
Designing Apps with the Mobile UX focus
This presentation is owned by Baidurjya Sinha and not to be reproduced without his permission

2.
What we will cover
• Why are we here
• Mobile is not Desktop but Desktop is Mobile
• Accesibility
• Touch gestures
• Challenges and Design strategy
• UX delivery Channels
• Screen sizes
• App Types
• Other Considerations
• Basic UI patterns

3.
Why Mobile…..?

4.
Mobile facts
• 6B connections today
• 10B connections 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
• 2012 - $ 13 billion
• 2013 - $ 20 billion

7.
Mobile is not Desktop

8.
Desktop

9.
Components

10.
Work station

11.
Laptop

12.
Components

13.
Laptop in office

14.
Laptop at home

15.
Mobile

16.
Components

17.
Mobile at office

18.
Mobile at home

19.
Mobile in car

20.
Where people use
mobile………?

21.
Every where

22.
Facts
• 84% at Home
• 80% during misc. times
• 74% waiting in lines
• 64% during work

23.
Why people use
Mobile…..?

24.
People use mobile to….
• Do Micro-Task

25.
……..and to
• Do urgent repetitive 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
time
Data Volume
Data Volume
time

28.
How people use mobile..?

29.
Ergonomics

30.
Touch Accessibility

31.
Android

32.
IOS

33.
Windows

34.
Tablets and Phablets

35.
Core Gestures
Tap DragDouble Tap Flick
Pinch Close Pinch Open Press Press & Tap Rotate
Press & Drag 2 finger Press & Drag 2 finger Rotate 2 finger Rotate

36.
Target Size

37.
Ok , so what is the
take…..?

38.
Oh! We agree…
• Mobile is definitely different from desktop
• Mobile Design is different from desktop
• The form factors are different

39.
Mobile is not Desktop but
Desktop is Mobile

40.
Desktop with Finger Touch

41.
Challenge and Strategy ?

42.
Challenge: UX Delivery
Channel

43.
UX Delivery Channels
• Single Channel
• Multichannel
– Separate Channels
– Omni Channel

44.
Single Channel
Separate Channels Omni Channel
Multi Channel
Single and Multi Channel UX

45.
Challenge :Different
Screen Size and
Resolutions

46.
Brief History of Phones
Iphone
Iphone 5
SG SIV
SG Note 3
3.5 4 5 5.7
SG SIII
4.8 5.3
SG Note 2
5.5
SG Note

47.
Screen Size

48.
Design Strategy
• Mobile first
– Mobile First and then scale up

49.
What are the Types of
Apps?

50.
Mobile App types
• Web app
– Responsive
– Adaptive
• Hybrid
• Native

51.
Web-Hybrid-Native
Web Hybrid Native

52.
Responsive (Fluid Layout)

53.
Adaptive (Multiple Layouts)

54.
Other Design
Considerations?

55.
Content first Navigation second
– Minimum Nav and Max Content
– Focus on what is most important

56.
Bad Design- Navigation First
NAV

57.
Worse – Navigation First
NAV

58.
Facebook Mobile 2013

59.
Facebook Mobile 2012

60.
Facebook Mobile 2011

61.
Facebook Mobile 2009

62.
Transformation
Navigation First Content First

63.
Transformation

64.
So do we have some UI
patterns…..?

65.
Common Mobile UI Patterns
• Hub and Spoke
• Nested Doll
• Bento Box
• Tabbed
• Filtered

66.
Hub and Spoke

67.
Nested Doll

68.
Bento Box

69.
Tabbed

70.
Filtered

71.
Good resources
• Smashing Magazine
• Android website
• Iphone Website
• Windows Website
• UI patterns gallery – Theresa Neil

72.
References
• A Book Apart – Mobile First – Luke W
• Mobile Design Pattern Gallery – Theresa Neil

73.
Profile : http://www.linkedin.com/in/tatan
Email : tatan.sinha@gmail.com