Android Design: Beyond the Guidelines

With Android Design guidelines becoming more robust and easier to implement, it's easy to have your application's design lost in a homogenized sea of "Holo Themed" user interfaces.

When is it ok to break away from the Design Guidelines? In this session, we will examine and showcase examples where developers have "thought outside the box" and implemented beautiful interfaces and animations that create captivating and unique experiences for their users.

We will also discuss how to achieve some of these design features in your own applications by looking at common patterns for a variety of designs that will leave your users delightfully surprised and help you push the boundaries of Android's paradigms in the future.

Note: Most images are animated gifs, but unfortunately will not animate in this format.

Transcript

1. BEYOND THE GUIDELINES Kevin Grant Creating character and identity in your Android applications Thursday, November 7, 13
2. Thursday, November 7, 13
3. Thursday, November 7, 13
4. It’s still awesome Thursday, November 7, 13
5. It’s still awesome tumblr.com/jobs Thursday, November 7, 13
6. Thursday, November 7, 13
7. Thursday, November 7, 13
8. Problem All basic apps look the same Thursday, November 7, 13
9. Problem All basic apps look the same Thursday, November 7, 13
10. All holo apps look the same Thursday, November 7, 13
11. ‣ Default styles are easy to implement All holo apps look the same Thursday, November 7, 13
12. ‣ Default styles are easy to implement ‣ ActionBar is really hard to customize All holo apps look the same Thursday, November 7, 13
13. ‣ Default styles are easy to implement ‣ ActionBar is really hard to customize ‣ Deviation isn’t encouraged All holo apps look the same Thursday, November 7, 13
14. Weak Branding (these could all be the same) News New York Times Circa Currents Thursday, November 7, 13
15. News Strong Branding Flipboard Pulse Thursday, November 7, 13
16. Users wants results, not rules Thursday, November 7, 13
17. Users wants results, not rules Thursday, November 7, 13
18. ‣ Creativity is rewarded Users wants results, not rules Thursday, November 7, 13
19. ‣ Creativity is rewarded ‣ “Generally fit” into ecosystem is enough Users wants results, not rules Thursday, November 7, 13
20. ‣ Creativity is rewarded ‣ “Generally fit” into ecosystem is enough ‣ Don’t listen to Android design trolls Users wants results, not rules Thursday, November 7, 13
21. “Don’t port your iOS design to android” Thursday, November 7, 13
22. “Don’t port your iOS design to android” This doesn’t mean design should not be a priority Thursday, November 7, 13
23. Going to cover 3 topics today Thursday, November 7, 13
24. Going to cover 3 topics today ‣ Say YES to your designers Thursday, November 7, 13
25. Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL Thursday, November 7, 13
26. Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL ‣ Be a DESIGN LEADER Thursday, November 7, 13
27. SAYING YES Designers send payments to kevingrant5@gmail.com Section 1 Thursday, November 7, 13
28. SAYING YES Designers send payments to kevingrant5@gmail.com Section 1 PROBABLY DO THAT Thursday, November 7, 13
29. Thursday, November 7, 13
30. Wouldn’t it be great if... Thursday, November 7, 13
31. Wouldn’t it be great if... What do you think about... Thursday, November 7, 13
32. Wouldn’t it be great if... What do you think about... How hard would it be to... Thursday, November 7, 13
33. Thursday, November 7, 13
34. Don’t be that guy Thursday, November 7, 13
35. ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) Don’t be that guy Thursday, November 7, 13
36. ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) ‣ Most of the time, they’re requests are reasonable, it just requires extra work Don’t be that guy Thursday, November 7, 13
37. ‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) ‣ Most of the time, they’re requests are reasonable, it just requires extra work ‣ If your designer asks you to move a pixel, YOU ASK HOW HIGH. Don’t be that guy Thursday, November 7, 13
38. Example Can we increase the padding between the home icon and the back carrot? Thursday, November 7, 13
39. Example Can we increase the padding between the home icon and the back carrot? Ugh, Google designed it this way for a reason No Thursday, November 7, 13
40. Example Can we increase the padding between the home icon and the back carrot? Ugh, Google designed it this way for a reason No I’m sure there’s something we can do, I’ll get back to you Yes! Thursday, November 7, 13
41. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. Thursday, November 7, 13
42. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. You can’t really change the color of action bar text programmatically. No Thursday, November 7, 13
43. Example Can we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray. You can’t really change the color of action bar text programmatically. No Sure! It’s not as straightforward as just changing the color, but we can create a custom view and use that instead. Yes! Thursday, November 7, 13
44. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? Thursday, November 7, 13
45. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? Unfortunately, animating dialogs isn’t supported very well and there isn’t much we can do. No Thursday, November 7, 13
46. Example Can we add a cool flippy animation to our dialogs to make them feel like cards? Unfortunately, animating dialogs isn’t supported very well and there isn’t much we can do. No Hmm that could be tricky!, We can style an Activity to look like a dialog and use Activity Transitions Yes! Thursday, November 7, 13
47. Note to Designers Thursday, November 7, 13
48. Note to Designers ‣ We probably say no too often Thursday, November 7, 13
49. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) Thursday, November 7, 13
50. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) ‣ We’re afraid to work on things that have unpredictable deadlines Thursday, November 7, 13
51. Note to Designers ‣ We probably say no too often ‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported) ‣ We’re afraid to work on things that have unpredictable deadlines ‣ Work with your project managers to make sure that developers feel comfortable making design risks that might end up not being used Thursday, November 7, 13
52. Case Study - Trending Tag Can we have these little boxes, and inside the boxes, new posts come in from the left and right, kind of like the Windows live tiles? Thursday, November 7, 13
53. (me) Thursday, November 7, 13
54. Architecture Thursday, November 7, 13
55. ‣ HorizontalListView (Special touch interception for GingerBread) Architecture Thursday, November 7, 13
56. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List Architecture Thursday, November 7, 13
57. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher Architecture Thursday, November 7, 13
58. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views Architecture Thursday, November 7, 13
59. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state Architecture Thursday, November 7, 13
60. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag Architecture Thursday, November 7, 13
61. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views Architecture Thursday, November 7, 13
62. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views ‣ Stateless Architecture Thursday, November 7, 13
63. ‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views ‣ Manages animations and state ‣ Manages header tag ‣ 7 types of child views ‣ Stateless ‣ Manages it’s own design Architecture Thursday, November 7, 13
64. Issues Always animating Thursday, November 7, 13
65. ‣ Since main screen is a ViewPager, the Animations were always running Issues Always animating Thursday, November 7, 13
66. ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations Issues Always animating Thursday, November 7, 13
67. ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled Issues Always animating Thursday, November 7, 13
68. ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled ‣ always animating even if not visible Issues Always animating Thursday, November 7, 13
69. ‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations ‣ Header Views are never recycled ‣ always animating even if not visible ‣ Hurts scroll performance Issues Always animating Thursday, November 7, 13
70. The code sucks Thursday, November 7, 13
71. The code sucks Doesn’t matter, still works Thursday, November 7, 13
72. Whimsy Section 2 Thursday, November 7, 13
73. Creative block? Thursday, November 7, 13
74. Get drunk. Thursday, November 7, 13
75. There is nothing fun about holo Thursday, November 7, 13
76. Your app should be fun There is nothing fun about holo Thursday, November 7, 13
77. Use Colors Vine Rdio Thursday, November 7, 13
78. Do unexpected things Yelp Thursday, November 7, 13
79. Do unexpected things Yelp Foursquare (iOS, but it’s still awesome) Thursday, November 7, 13
80. Add meaningful animations Pinterest Circa Thursday, November 7, 13
81. Add meaningful animations Pinterest Circa Thursday, November 7, 13
82. Add meaningful animations Pinterest Circa (Check out 4.4 ListViewWindowCompat) Thursday, November 7, 13
83. Add meaningless animations Snapchat Thursday, November 7, 13
84. Why? its fun. We like to be delighted Thursday, November 7, 13
85. Screen Action Items Thursday, November 7, 13
86. - Actionable items outside of the ActionBar Screen Action Items Thursday, November 7, 13
87. - Actionable items outside of the ActionBar - Unique experience of blending your passive content Screen Action Items Thursday, November 7, 13
88. - Actionable items outside of the ActionBar - Unique experience of blending your passive content - Provide unique branding Screen Action Items Thursday, November 7, 13
89. - Actionable items outside of the ActionBar - Unique experience of blending your passive content - Provide unique branding - Great place to have “fun” Screen Action Items Thursday, November 7, 13
90. Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: How’d we do it? Thursday, November 7, 13
91. Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? How’d we do it? Thursday, November 7, 13
92. Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? How’d we do it? Thursday, November 7, 13
93. Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? - Every Activity (or fragment)? How’d we do it? Thursday, November 7, 13
94. Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered: - Shoud view always be present? - Hide on select or scroll? - Every Activity (or fragment)? - Moveable? How’d we do it? Thursday, November 7, 13
95. How’d we do it? Thursday, November 7, 13
96. - Create Views Dynamically How’d we do it? Thursday, November 7, 13
97. - Create Views Dynamically - Add Views to DecorView for maximum flexibility How’d we do it? Thursday, November 7, 13
98. - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) How’d we do it? Thursday, November 7, 13
99. - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) - If targeting API < 11, position using left / top margins How’d we do it? Thursday, November 7, 13
100. - Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) - If targeting API < 11, position using left / top margins - If targeting API >= 11, can position using setX / setY or using animators How’d we do it? Thursday, November 7, 13
101. What can I do today? Thursday, November 7, 13
102. Add fun press states! What can I do today? Thursday, November 7, 13
103. Growing Press State Thursday, November 7, 13
104. Growing Press State Mileage may vary based on how you want to detect “move outside” Thursday, November 7, 13
105. Growing Press State continued Thursday, November 7, 13
106. Growing Press State continued Use more than 2 values Thursday, November 7, 13
107. Growing Press State continued Use more than 2 values Use Different interpolators Thursday, November 7, 13
108. Thursday, November 7, 13
109. Cooler Transitions What can I do today? Thursday, November 7, 13
110. Dialog Themed Activitys and Popup Components to reduce Navigation Remorse What can I do today? Facebook Tumblr Thursday, November 7, 13
111. Action Animations make me feel special What can I do today? Google+ Tumblr Thursday, November 7, 13
112. Don’t be a follower BE A DESIGN LEADER Section 3 Thursday, November 7, 13
113. Everything we have started as someones idea Thursday, November 7, 13
114. Everything we have started as someones idea ‣ ViewPager Thursday, November 7, 13
115. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom Thursday, November 7, 13
116. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items Thursday, November 7, 13
117. Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items ‣ Pretty much everything Thursday, November 7, 13
118. Navigation Drawer Remember when this was socially unacceptable? Thursday, November 7, 13
119. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer Thursday, November 7, 13
120. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design Thursday, November 7, 13
121. Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design ‣ Doing it wrong Thursday, November 7, 13
122. Now it’s a leading navigation style Thursday, November 7, 13
123. Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13
124. Now it’s a leading navigation style ESPN ScoreCenter Foursquare Thursday, November 7, 13
125. Now it’s a leading navigation style ESPN ScoreCenter Foursquare Facebook Thursday, November 7, 13
126. Now it’s a leading navigation style ESPN ScoreCenter Foursquare Facebook Spotify Thursday, November 7, 13
127. In Every Google App Thursday, November 7, 13
128. In Every Google App Thursday, November 7, 13
129. But what if I want to change it a bit Thursday, November 7, 13
130. But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13
131. But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13
132. Until Google does it, then it’s fine Thursday, November 7, 13
133. Until Google does it, then it’s fine Thursday, November 7, 13
134. Pull To Refresh Remember when this was considered bad design for Android? Thursday, November 7, 13
135. Now it’s a behavior all users expect show images of all the apps Text Twitter Foursquare Path Thursday, November 7, 13
136. Now it’s a behavior all users expect show images of all the apps Text Twitter Foursquare Path (the booger) Thursday, November 7, 13
137. And Google added it into all of their products No official support yet =( Gmail Google+ Drive Thursday, November 7, 13
138. How does Chrome even fit in? Thursday, November 7, 13
139. How does Chrome even fit in? I dunno, but it’s awesome Thursday, November 7, 13
140. What does this all mean? Thursday, November 7, 13
141. What does this all mean? Do something awesome Thursday, November 7, 13
142. What does this all mean? Do something awesome (but don’t use lens flares) Thursday, November 7, 13
143. Swipe Back (stolen from iOS7) Thursday, November 7, 13
144. Thursday, November 7, 13
145. iOS != Bad Thursday, November 7, 13
146. Even though I like to pretend it does iOS != Bad Thursday, November 7, 13
147. Thursday, November 7, 13
148. Design for a tiny hand. Thursday, November 7, 13
149. Design for a tiny hand. Thursday, November 7, 13
150. - Up Button too far away Design for a tiny hand. Thursday, November 7, 13
151. - Up Button too far away - Back button provides no context Design for a tiny hand. Thursday, November 7, 13
152. - Up Button too far away - Back button provides no context - Why not? Design for a tiny hand. Thursday, November 7, 13
153. Swipe Back Thursday, November 7, 13
154. How’d we do it Thursday, November 7, 13
155. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Thursday, November 7, 13
156. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView Thursday, November 7, 13
157. How’d we do it Before launching any activity, capture the bitmap of the current window and save it in image cache. Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView Open source coming soon! Thursday, November 7, 13
158. Whatever you do: Be consistent Thursday, November 7, 13
159. We Took our cues from Android... Thursday, November 7, 13
160. And went a bit further Thursday, November 7, 13
161. Wrapping up Thursday, November 7, 13
162. ‣ Say YES, it’s what makes our shit awesome Wrapping up Thursday, November 7, 13
163. ‣ Say YES, it’s what makes our shit awesome ‣ Be WHIMSICAL! Wrapping up Thursday, November 7, 13
164. ‣ Say YES, it’s what makes our shit awesome ‣ Be WHIMSICAL! ‣ Be a DESIGN LEADER and push beyond the guidelines Wrapping up Thursday, November 7, 13
165. “Good applications follow the guidelines, better applications challenge them.” Thursday, November 7, 13
166. Thank you! kevingrant@tumblr.com kevinthebigapple.tumblr.com @kevingrant5 Thursday, November 7, 13