Understanding mobile

1. UNDERSTANDING
MOBILE DESIGN PATTERNS
ERIK LARSSON, PLEXICAL
@ERIKLARSSON

2. plexical
PLEXICAL.COM

4. DEFAULT THINKING

6. We look at the present through
a rearview mirror;
we march backwards into the future
Marshall McLuhan

7. MOBILE DESIGN PATTERNS
1. CONSTRAINTS
2. CAPABILITIES
3. ORGANIZATION
4. TOUCH

8. 1. CONSTRAINTS

9. 1. CONSTRAINTS

10. 1. CONSTRAINTS/SCREEN SIZE
CONSTRAINTS
SCREEN SIZE

11. 1. CONSTRAINTS/SCREEN SIZE
1024X768

12. 1. CONSTRAINTS/SCREEN SIZE
320
X
480

13. 1. CONSTRAINTS/SCREEN SIZE
-80% LESS
SCREEN REAL ESTATE

14. 1. CONSTRAINTS/SCREEN SIZE
FOCUS IS ABOUT SAYING NO

15. 1. CONSTRAINTS/SCREEN SIZE

16. 1. CONSTRAINTS/SCREEN SIZE

17. 1. CONSTRAINTS/SCREEN SIZE

18. 1. CONSTRAINTS/SCREEN SIZE

19. 1. CONSTRAINTS/SCREEN SIZE
KEEP IT SIMPLE STUPID

20. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
CONSTRAINTS
NETWORKS &
PERFORMANCE

21. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
1 MB

22. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
USE IMAGE SPRITES TO GROUP
MULTIPLE IMAGES INTO ONE

23. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
BUNDLE AND MINIFY
JS AND CSS FILES

24. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
USE MICRO JS-LIBRARIES
INSTEAD OF THE BIG ONES
(I'M LOOKING AT YOU JQUERY)

25. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
SCRAP BLOATED CSS GRID
SYSTEM AND WRITE YOUR OWN

26. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
INVESTIGATE GREAT NEW
CAPABILITIES SUCH AS CANVAS
AND APPCACHE

27. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
REDUCE THE NEED OF IMAGES
AND USE CSS3 NOW!

28. 1. CONSTRAINTS/NETWORKS & PERFORMANCE
SPEED IS IMPORTANT

29. 1. CONSTRAINTS/LOCATION
LOCATION

30. 1. CONSTRAINTS/LOCATION

31. 1. CONSTRAINTS/LOCATION
84% USE THEM AT HOME
80% USE THEM DURING MISC DOWNTIME
74% USE THEM WHILE WAITING
69% USE THEM WHILE SHOPPING
64% USE THEM AT WORK
62% USE THEM WHILE WATCHING TV
47% USE THEM DURING THEIR COMMUTE.

32. 1. CONSTRAINTS/LOCATION
ONE EYEBALL AND ONE THUMB

33. 1. CONSTRAINTS/LOCATION

34. 1. CONSTRAINTS/TIME
CONSTRAINTS
TIME

35. 1. CONSTRAINTS/TIME

36. 1. CONSTRAINTS/TIME

37. 1. CONSTRAINTS/TIME
VS

38. 1. CONSTRAINTS/TIME
MOBILE APPS NEED TO ALIGN
WITH SHORTER BURSTS OF USAGE.

39. 1. CONSTRAINTS/TIME
JUST-IN-TIME APPS
LASER-FOCUSED APPS THAT PROVIDE
USERS WITH QUICK, UPDATED AND
RELEVANT INFORMATION
THROUGHOUT THE DAY

40. CONSTRAINTS
SCREEN SIZE
NETWORKS & PERFORMANCE
LOCATION
TIME

41. 2. CAPABILITIES

42. 2. CAPABILITIES/LOCATION DETECTION
CAPABILITIES
LOCATION DETECTION

43. 2. CAPABILITIES/LOCATION DETECTION

44. 2. CAPABILITIES/LOCATION DETECTION

45. 2. CAPABILITIES/LOCATION DETECTION

46. 2. CAPABILITIES/LOCATION DETECTION

47. 2. CAPABILITIES/LOCATION DETECTION

48. 2. CAPABILITIES/LOCATION DETECTION

49. CAPABILITIES
DEVICE ORIENTATION/
ACCELEROMETER

50. 2. CAPABILITIES/DEVICE ORIENTATION

51. 2. CAPABILITIES/DEVICE ORIENTATION

52. CAPABILITIES
TOUCH INTERFACE

53. 2. CAPABILITIES/TOUCH

54. 2. CAPABILITIES/TOUCH

55. 2. CAPABILITIES/TOUCH

56. 2. CAPABILITIES/TOUCH

57. CAPABILITIES
LOCATION DETECTION
DEVICE ORIENTATION
TOUCH INTERFACE

58. 3. ORGANIZATION

59. 3. ORGANIZATION
UNDERSTAND HOW AND WHY PEOPLE
USE THEIR MOBILE DEVICES
PRIORITIZE CONTENT RATHER THAN NAVIGATION
PROVIDE RELEVANT OPTIONS FOR EXPLORATION
SAY NO TO MAINTAIN FOCUS AND CLARITY

60. ORGANIZATION
MOBILE BEHAVIORS

61. 3. ORGANIZATION/MOBILE BEHAVIORS
LOOKUP/FIND (URGENT INFO, LOCAL):
I NEED AN ANSWER TO SOMETHING NOW
OFTEN RELATED TO MY CURRENT LOCATION IN THE WORLD.

62. 3. ORGANIZATION/MOBILE BEHAVIORS
EXPLORE/PLAY (BORED, LOCAL):
I HAVE SOME TIME TO KILL AND JUST WANT
A FEW IDLE TIME DISTRACTIONS.

63. 3. ORGANIZATION/MOBILE BEHAVIORS
CHECK IN/STATUS (REPEAT/MICRO-TASKING):
SOMETHING IMPORTANT TO ME KEEPS CHANGING OR
UPDATING AND I WANT TO STAY ON TOP OF IT.

64. 3. ORGANIZATION/MOBILE BEHAVIORS
EDIT/CREATE
(URGENT CHANGE/MICRO-TASKING):
I NEED TO GET SOMETHING DONE NOW THAT CAN’T WAIT.

65. ORGANIZATION
CONTENT, NOT NAVIGATION

66. 3. ORGANIZATION/CONTENT, NOT NAVIGATION

67. 3. ORGANIZATION/CONTENT, NOT NAVIGATION

68. ORGANIZATION
OK, SO MAYBE SOME
NAVIGATION IS NEEDED...

69. 3. ORGANIZATION/OK, SO SOME NAVIGATION...

70. 3. ORGANIZATION/OK, SO SOME NAVIGATION...

71. 3. ORGANIZATION/OK, SO SOME NAVIGATION...

72. 3. ORGANIZATION/OK, SO SOME NAVIGATION...

73. ORGANIZATION: NATIVE VS MOBILE WEB
BACK BUTTONS

74. 3. ORGANIZATION/BACK BUTTONS

75. 3. ORGANIZATION/BACK BUTTONS

76. ORGANIZATION: NATIVE VS MOBILE WEB
FIXED BOTTOM BARS

77. 3. ORGANIZATION/FIXED BOTTOM BARS

78. 3. ORGANIZATION/FIXED BOTTOM BARS

79. ORGANIZATION
STAY FOCUSED

80. 3. ORGANIZATION/STAY FOCUSED

81. 3. ORGANIZATION/STAY FOCUSED

82. ORGANIZATION
MOBILE BEHAVIORS
CONTENT, NOT NAVIGATION
OK, SO SOME NAVIGATION
BACK BUTTONS
FIXED BOTTOM BARS

83. 4. DESIGN FOR TOUCH

84. ABOUT 47 PERCENT OF APP USERS SAY THEY ARE
MORE APT TO CLICK A MOBILE AD BY MISTAKE
THAN THEY DO ON PURPOSE

85. MAKE SURE YOUR TOUCH TARGETS ARE POSITIONED
CORRECTLY AND ARE OF CORRECT SIZE
YOU NEED TO CONNECT THE APPROPRIATE TOUCH
GESTURES TO THE OBJECTIVES OF YOUR APP OR WEBSITE

86. DESIGNING FOR TOUCH
TOUCH TARGET SIZE

87. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE
APPLE: 44X44 PTS
WINDOWS: 9MM WITH 2MM DISTANCE
MIT: 10-14MM

88. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE

89. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE

90. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE

91. 4. DESIGNING FOR TOUCH/TOUCH TARGET SIZE

92. DESIGNING FOR TOUCH
TOUCH POSITION

93. 4. DESIGNING FOR TOUCH/TOUCH POSITION

94. 4. DESIGNING FOR TOUCH/TOUCH POSITION

95. DESIGNING FOR TOUCH
CORE TOUCH GESTURES

96. 4. DESIGNING FOR TOUCH/CORE GESTURES

97. DESIGN FOR TOUCH
TOUCH TARGET SIZE
TOUCH TARGET POSITION
TOUCH CORE GESTURES

98. 1. CONSTRAINTS

99. 2. CAPABILITIES

100. 3. ORGANIZATION

101. 4. DESIGN FOR TOUCH

102. Q&A

103. THANK YOU!