Mobile First

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

48. 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

49. Screen Size

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

51. What are the Types of
Apps?

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

53. Web-Hybrid-Native
Web Hybrid Native

54. Responsive (Fluid Layout)

55. Adaptive (Multiple Layouts)

56. Other Design
Considerations?

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

58. Bad Design- Navigation First
NAV

59. Worse – Navigation First
NAV

60. Facebook Mobile 2013

61. Facebook Mobile 2012

62. Facebook Mobile 2011

63. Facebook Mobile 2009

64. Transformation
Navigation First Content First

65. Transformation

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

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

68. Hub and Spoke

69. Nested Doll

70. Bento Box

71. Tabbed

72. Filtered

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

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

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