Android Design: Beyond the Guidelines

Slide 1

Slide 1 text

BEYOND THE GUIDELINES Kevin Grant Creating character and identity in your Android applications Thursday, November 7, 13

Slide 2

Slide 2 text

Thursday, November 7, 13

Slide 3

Slide 3 text

Thursday, November 7, 13

Slide 4

Slide 4 text

It’s still awesome Thursday, November 7, 13

Slide 5

Slide 5 text

It’s still awesome tumblr.com/jobs Thursday, November 7, 13

Slide 6

Slide 6 text

Thursday, November 7, 13

Slide 7

Slide 7 text

Thursday, November 7, 13

Slide 8

Slide 8 text

Problem All basic apps look the same Thursday, November 7, 13

Slide 9

Slide 9 text

Problem All basic apps look the same Thursday, November 7, 13

Slide 10

Slide 10 text

All holo apps look the same Thursday, November 7, 13

Slide 11

Slide 11 text

‣ Default styles are easy to implement All holo apps look the same Thursday, November 7, 13

Slide 12

Slide 12 text

‣ Default styles are easy to implement ‣ ActionBar is really hard to customize All holo apps look the same Thursday, November 7, 13

Slide 13

Slide 13 text

‣ 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

Slide 14

Slide 14 text

Weak Branding (these could all be the same) News New York Times Circa Currents Thursday, November 7, 13

Slide 15

Slide 15 text

News Strong Branding Flipboard Pulse Thursday, November 7, 13

Slide 16

Slide 16 text

Users wants results, not rules Thursday, November 7, 13

Slide 17

Slide 17 text

Users wants results, not rules Thursday, November 7, 13

Slide 18

Slide 18 text

‣ Creativity is rewarded Users wants results, not rules Thursday, November 7, 13

Slide 19

Slide 19 text

‣ Creativity is rewarded ‣ “Generally ﬁt” into ecosystem is enough Users wants results, not rules Thursday, November 7, 13

Slide 20

Slide 20 text

‣ Creativity is rewarded ‣ “Generally ﬁt” into ecosystem is enough ‣ Don’t listen to Android design trolls Users wants results, not rules Thursday, November 7, 13

Slide 21

Slide 21 text

“Don’t port your iOS design to android” Thursday, November 7, 13

Slide 22

Slide 22 text

“Don’t port your iOS design to android” This doesn’t mean design should not be a priority Thursday, November 7, 13

Slide 23

Slide 23 text

Going to cover 3 topics today Thursday, November 7, 13

Slide 24

Slide 24 text

Going to cover 3 topics today ‣ Say YES to your designers Thursday, November 7, 13

Slide 25

Slide 25 text

Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL Thursday, November 7, 13

Slide 26

Slide 26 text

Going to cover 3 topics today ‣ Say YES to your designers ‣ Make your applications WHIMSICAL ‣ Be a DESIGN LEADER Thursday, November 7, 13

Slide 27

Slide 27 text

SAYING YES Designers send payments to [email protected] Section 1 Thursday, November 7, 13

Slide 28

Slide 28 text

SAYING YES Designers send payments to [email protected] Section 1 PROBABLY DO THAT Thursday, November 7, 13

Slide 29

Slide 29 text

Thursday, November 7, 13

Slide 30

Slide 30 text

Wouldn’t it be great if... Thursday, November 7, 13

Slide 31

Slide 31 text

Wouldn’t it be great if... What do you think about... Thursday, November 7, 13

Slide 32

Slide 32 text

Wouldn’t it be great if... What do you think about... How hard would it be to... Thursday, November 7, 13

Slide 33

Slide 33 text

Thursday, November 7, 13

Slide 34

Slide 34 text

Don’t be that guy Thursday, November 7, 13

Slide 35

Slide 35 text

‣ Designers aren’t here to ruin the product or everyone’s lives (just yours) Don’t be that guy Thursday, November 7, 13

Slide 36

Slide 36 text

‣ 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

Slide 37

Slide 37 text

‣ 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

Slide 38

Slide 38 text

Example Can we increase the padding between the home icon and the back carrot? Thursday, November 7, 13

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Example Can we add a cool flippy animation to our dialogs to make them feel like cards? Thursday, November 7, 13

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Note to Designers Thursday, November 7, 13

Slide 48

Slide 48 text

Note to Designers ‣ We probably say no too often Thursday, November 7, 13

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

(me) Thursday, November 7, 13

Slide 54

Slide 54 text

Architecture Thursday, November 7, 13

Slide 55

Slide 55 text

‣ HorizontalListView (Special touch interception for GingerBread) Architecture Thursday, November 7, 13

Slide 56

Slide 56 text

‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List Architecture Thursday, November 7, 13

Slide 57

Slide 57 text

‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher Architecture Thursday, November 7, 13

Slide 58

Slide 58 text

‣ HorizontalListView (Special touch interception for GingerBread) ‣ Added as a Header to List ‣ CustomViewSwitcher ‣ Generates child views Architecture Thursday, November 7, 13

Slide 59

Slide 59 text

‣ 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

Slide 60

Slide 60 text

‣ 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

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Issues Always animating Thursday, November 7, 13

Slide 65

Slide 65 text

‣ Since main screen is a ViewPager, the Animations were always running Issues Always animating Thursday, November 7, 13

Slide 66

Slide 66 text

‣ Since main screen is a ViewPager, the Animations were always running ‣ Animation implementation breaking other unrelated animations Issues Always animating Thursday, November 7, 13

Slide 67

Slide 67 text

‣ 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

Slide 68

Slide 68 text

‣ 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

Slide 69

Slide 69 text

Slide 70

Slide 70 text

The code sucks Thursday, November 7, 13

Slide 71

Slide 71 text

The code sucks Doesn’t matter, still works Thursday, November 7, 13

Slide 72

Slide 72 text

Whimsy Section 2 Thursday, November 7, 13

Slide 73

Slide 73 text

Creative block? Thursday, November 7, 13

Slide 74

Slide 74 text

Get drunk. Thursday, November 7, 13

Slide 75

Slide 75 text

There is nothing fun about holo Thursday, November 7, 13

Slide 76

Slide 76 text

Your app should be fun There is nothing fun about holo Thursday, November 7, 13

Slide 77

Slide 77 text

Use Colors Vine Rdio Thursday, November 7, 13

Slide 78

Slide 78 text

Do unexpected things Yelp Thursday, November 7, 13

Slide 79

Slide 79 text

Do unexpected things Yelp Foursquare (iOS, but it’s still awesome) Thursday, November 7, 13

Slide 80

Slide 80 text

Add meaningful animations Pinterest Circa Thursday, November 7, 13

Slide 81

Slide 81 text

Add meaningful animations Pinterest Circa Thursday, November 7, 13

Slide 82

Slide 82 text

Add meaningful animations Pinterest Circa (Check out 4.4 ListViewWindowCompat) Thursday, November 7, 13

Slide 83

Slide 83 text

Add meaningless animations Snapchat Thursday, November 7, 13

Slide 84

Slide 84 text

Why? its fun. We like to be delighted Thursday, November 7, 13

Slide 85

Slide 85 text

Screen Action Items Thursday, November 7, 13

Slide 86

Slide 86 text

- Actionable items outside of the ActionBar Screen Action Items Thursday, November 7, 13

Slide 87

Slide 87 text

- Actionable items outside of the ActionBar - Unique experience of blending your passive content Screen Action Items Thursday, November 7, 13

Slide 88

Slide 88 text

- Actionable items outside of the ActionBar - Unique experience of blending your passive content - Provide unique branding Screen Action Items Thursday, November 7, 13

Slide 89

Slide 89 text

- 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

Slide 90

Slide 90 text

Screen Action Items can be difﬁcult to integrate into existing code bases. Use case questions must be answered: How’d we do it? Thursday, November 7, 13

Slide 91

Slide 91 text

Screen Action Items can be difﬁcult 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

Slide 92

Slide 92 text

Screen Action Items can be difﬁcult 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

Slide 93

Slide 93 text

Screen Action Items can be difﬁcult 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

Slide 94

Slide 94 text

Slide 95

Slide 95 text

How’d we do it? Thursday, November 7, 13

Slide 96

Slide 96 text

- Create Views Dynamically How’d we do it? Thursday, November 7, 13

Slide 97

Slide 97 text

- Create Views Dynamically - Add Views to DecorView for maximum flexibility How’d we do it? Thursday, November 7, 13

Slide 98

Slide 98 text

- Create Views Dynamically - Add Views to DecorView for maximum flexibility (getWindow().getDecorView()) How’d we do it? Thursday, November 7, 13

Slide 99

Slide 99 text

- 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

Slide 100

Slide 100 text

- 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

Slide 101

Slide 101 text

What can I do today? Thursday, November 7, 13

Slide 102

Slide 102 text

Add fun press states! What can I do today? Thursday, November 7, 13

Slide 103

Slide 103 text

Growing Press State Thursday, November 7, 13

Slide 104

Slide 104 text

Growing Press State Mileage may vary based on how you want to detect “move outside” Thursday, November 7, 13

Slide 105

Slide 105 text

Growing Press State continued Thursday, November 7, 13

Slide 106

Slide 106 text

Growing Press State continued Use more than 2 values Thursday, November 7, 13

Slide 107

Slide 107 text

Growing Press State continued Use more than 2 values Use Different interpolators Thursday, November 7, 13

Slide 108

Slide 108 text

Thursday, November 7, 13

Slide 109

Slide 109 text

Cooler Transitions What can I do today? Thursday, November 7, 13

Slide 110

Slide 110 text

Dialog Themed Activitys and Popup Components to reduce Navigation Remorse What can I do today? Facebook Tumblr Thursday, November 7, 13

Slide 111

Slide 111 text

Action Animations make me feel special What can I do today? Google+ Tumblr Thursday, November 7, 13

Slide 112

Slide 112 text

Don’t be a follower BE A DESIGN LEADER Section 3 Thursday, November 7, 13

Slide 113

Slide 113 text

Everything we have started as someones idea Thursday, November 7, 13

Slide 114

Slide 114 text

Everything we have started as someones idea ‣ ViewPager Thursday, November 7, 13

Slide 115

Slide 115 text

Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom Thursday, November 7, 13

Slide 116

Slide 116 text

Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items Thursday, November 7, 13

Slide 117

Slide 117 text

Everything we have started as someones idea ‣ ViewPager ‣ Double-Tap to zoom ‣ Slide to dismiss list-items ‣ Pretty much everything Thursday, November 7, 13

Slide 118

Slide 118 text

Navigation Drawer Remember when this was socially unacceptable? Thursday, November 7, 13

Slide 119

Slide 119 text

Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer Thursday, November 7, 13

Slide 120

Slide 120 text

Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design Thursday, November 7, 13

Slide 121

Slide 121 text

Navigation Drawer Remember when this was socially unacceptable? ‣ Junk Drawer / Trash Drawer ‣ Sloppy Design ‣ Doing it wrong Thursday, November 7, 13

Slide 122

Slide 122 text

Now it’s a leading navigation style Thursday, November 7, 13

Slide 123

Slide 123 text

Now it’s a leading navigation style ESPN ScoreCenter Thursday, November 7, 13

Slide 124

Slide 124 text

Now it’s a leading navigation style ESPN ScoreCenter Foursquare Thursday, November 7, 13

Slide 125

Slide 125 text

Now it’s a leading navigation style ESPN ScoreCenter Foursquare Facebook Thursday, November 7, 13

Slide 126

Slide 126 text

Now it’s a leading navigation style ESPN ScoreCenter Foursquare Facebook Spotify Thursday, November 7, 13

Slide 127

Slide 127 text

In Every Google App Thursday, November 7, 13

Slide 128

Slide 128 text

In Every Google App Thursday, November 7, 13

Slide 129

Slide 129 text

But what if I want to change it a bit Thursday, November 7, 13

Slide 130

Slide 130 text

But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13

Slide 131

Slide 131 text

But what if I want to change it a bit Generates a lot of rage Thursday, November 7, 13

Slide 132

Slide 132 text

Until Google does it, then it’s ﬁne Thursday, November 7, 13

Slide 133

Slide 133 text

Until Google does it, then it’s ﬁne Thursday, November 7, 13

Slide 134

Slide 134 text

Pull To Refresh Remember when this was considered bad design for Android? Thursday, November 7, 13

Slide 135

Slide 135 text

Now it’s a behavior all users expect show images of all the apps Text Twitter Foursquare Path Thursday, November 7, 13

Slide 136

Slide 136 text

Now it’s a behavior all users expect show images of all the apps Text Twitter Foursquare Path (the booger) Thursday, November 7, 13

Slide 137

Slide 137 text

And Google added it into all of their products No ofﬁcial support yet =( Gmail Google+ Drive Thursday, November 7, 13

Slide 138

Slide 138 text

How does Chrome even ﬁt in? Thursday, November 7, 13

Slide 139

Slide 139 text

How does Chrome even ﬁt in? I dunno, but it’s awesome Thursday, November 7, 13

Slide 140

Slide 140 text

What does this all mean? Thursday, November 7, 13

Slide 141

Slide 141 text

What does this all mean? Do something awesome Thursday, November 7, 13

Slide 142

Slide 142 text

What does this all mean? Do something awesome (but don’t use lens flares) Thursday, November 7, 13

Slide 143

Slide 143 text

Swipe Back (stolen from iOS7) Thursday, November 7, 13

Slide 144

Slide 144 text

Thursday, November 7, 13

Slide 145

Slide 145 text

iOS != Bad Thursday, November 7, 13

Slide 146

Slide 146 text

Even though I like to pretend it does iOS != Bad Thursday, November 7, 13

Slide 147

Slide 147 text

Thursday, November 7, 13

Slide 148

Slide 148 text

Design for a tiny hand. Thursday, November 7, 13

Slide 149

Slide 149 text

Design for a tiny hand. Thursday, November 7, 13

Slide 150

Slide 150 text

- Up Button too far away Design for a tiny hand. Thursday, November 7, 13

Slide 151

Slide 151 text

- Up Button too far away - Back button provides no context Design for a tiny hand. Thursday, November 7, 13

Slide 152

Slide 152 text

- Up Button too far away - Back button provides no context - Why not? Design for a tiny hand. Thursday, November 7, 13

Slide 153

Slide 153 text

Swipe Back Thursday, November 7, 13

Slide 154

Slide 154 text

How’d we do it Thursday, November 7, 13

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

Slide 158

Slide 158 text

Whatever you do: Be consistent Thursday, November 7, 13

Slide 159

Slide 159 text

We Took our cues from Android... Thursday, November 7, 13

Slide 160

Slide 160 text

And went a bit further Thursday, November 7, 13

Slide 161

Slide 161 text

Wrapping up Thursday, November 7, 13

Slide 162

Slide 162 text

‣ Say YES, it’s what makes our shit awesome Wrapping up Thursday, November 7, 13

Slide 163

Slide 163 text

‣ Say YES, it’s what makes our shit awesome ‣ Be WHIMSICAL! Wrapping up Thursday, November 7, 13

Slide 164

Slide 164 text

‣ 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

Slide 165

Slide 165 text

“Good applications follow the guidelines, better applications challenge them.” Thursday, November 7, 13

Slide 166

Slide 166 text

Thank you! [email protected] kevinthebigapple.tumblr.com @kevingrant5 Thursday, November 7, 13