Android Design: Beyond the Guidelines
-
Upload
kevingrant5 -
Category
Design
-
view
1.108 -
download
3
description
Transcript of Android Design: Beyond the Guidelines
BEYOND THE GUIDELINES
Kevin Grant
Creating character and identity inyour Android applications
Thursday, November 7, 13
Thursday, November 7, 13
Thursday, November 7, 13
It’s still awesome
Thursday, November 7, 13
It’s still awesometumblr.com/jobs
Thursday, November 7, 13
Thursday, November 7, 13
Thursday, November 7, 13
ProblemAll basic apps look the same
Thursday, November 7, 13
ProblemAll basic apps look the same
Thursday, November 7, 13
All holo apps look the same
Thursday, November 7, 13
‣ Default styles are easy to implement
All holo apps look the same
Thursday, November 7, 13
‣ Default styles are easy to implement
‣ ActionBar is really hard to customize
All holo apps look the same
Thursday, November 7, 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
Weak Branding
(these could all be the same)
NewsNew York Times
Circa Currents
Thursday, November 7, 13
News Strong Branding
Flipboard Pulse
Thursday, November 7, 13
Users wants results, not rules
Thursday, November 7, 13
Users wants results, not rules
Thursday, November 7, 13
‣ Creativity is rewarded
Users wants results, not rules
Thursday, November 7, 13
‣ Creativity is rewarded
‣ “Generally fit” into ecosystemis enough
Users wants results, not rules
Thursday, November 7, 13
‣ Creativity is rewarded
‣ “Generally fit” into ecosystemis enough
‣ Don’t listen to Android design trolls
Users wants results, not rules
Thursday, November 7, 13
“Don’t port your iOS design to android”
Thursday, November 7, 13
“Don’t port your iOS design to android”
This doesn’t mean design should not be a priority
Thursday, November 7, 13
Going to cover 3 topics today
Thursday, November 7, 13
Going to cover 3 topics today
‣ Say YES to your designers
Thursday, November 7, 13
Going to cover 3 topics today
‣ Say YES to your designers
‣ Make your applications WHIMSICAL
Thursday, November 7, 13
Going to cover 3 topics today
‣ Say YES to your designers
‣ Make your applications WHIMSICAL
‣ Be a DESIGN LEADER
Thursday, November 7, 13
SAYING YES
Designers send payments to [email protected]
Section 1
PROBABLY DO THAT
Thursday, November 7, 13
Thursday, November 7, 13
Wouldn’t it be great if...
Thursday, November 7, 13
Wouldn’t it be great if...
What do you think about...
Thursday, November 7, 13
Wouldn’t it be great if...
What do you think about...
How hard would it be to...
Thursday, November 7, 13
Thursday, November 7, 13
Don’t be that guy
Thursday, November 7, 13
‣ Designers aren’t here to ruin the product or everyone’s lives (just yours)
Don’t be that guy
Thursday, November 7, 13
‣ 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
‣ 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
ExampleCan we increase the padding between the home icon and the back carrot?
Thursday, November 7, 13
ExampleCan 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
ExampleCan we increase the padding between the home icon and the back carrot?
Ugh, Google designed it this way for a reason
NoI’m sure there’s
something we can do, I’ll get back to you
Yes!
Thursday, November 7, 13
ExampleCan 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
ExampleCan 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
ExampleCan 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
ExampleCan we add a cool flippy animation to our dialogs to make them feel like cards?
Thursday, November 7, 13
ExampleCan 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
ExampleCan 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.
NoHmm that could be tricky!, We can style an Activity to
look like a dialog and use Activity Transitions
Yes!
Thursday, November 7, 13
Note to Designers
Thursday, November 7, 13
Note to Designers
‣ We probably say no too often
Thursday, November 7, 13
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
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
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
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
(me)Thursday, November 7, 13
Architecture
Thursday, November 7, 13
‣ HorizontalListView (Special touch interception for GingerBread)
Architecture
Thursday, November 7, 13
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
Architecture
Thursday, November 7, 13
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
Architecture
Thursday, November 7, 13
‣ HorizontalListView (Special touch interception for GingerBread)
‣ Added as a Header to List
‣ CustomViewSwitcher
‣ Generates child views
Architecture
Thursday, November 7, 13
‣ 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
‣ 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
‣ 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
‣ 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
‣ 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
IssuesAlways animating
Thursday, November 7, 13
‣ Since main screen is a ViewPager, the Animations were always running
IssuesAlways animating
Thursday, November 7, 13
‣ Since main screen is a ViewPager, the Animations were always running
‣ Animation implementation breaking other unrelated animations
IssuesAlways animating
Thursday, November 7, 13
‣ Since main screen is a ViewPager, the Animations were always running
‣ Animation implementation breaking other unrelated animations
‣ Header Views are never recycled
IssuesAlways animating
Thursday, November 7, 13
‣ 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
IssuesAlways animating
Thursday, November 7, 13
‣ 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
IssuesAlways animating
Thursday, November 7, 13
The code sucks
Thursday, November 7, 13
The code sucksDoesn’t matter, still works
Thursday, November 7, 13
WhimsySection 2
Thursday, November 7, 13
Creative block?
Thursday, November 7, 13
Get drunk.
Thursday, November 7, 13
There is nothing fun about holo
Thursday, November 7, 13
Your app should be fun
There is nothing fun about holo
Thursday, November 7, 13
Use ColorsVine Rdio
Thursday, November 7, 13
Do unexpected things
Yelp
Thursday, November 7, 13
Do unexpected things
Yelp Foursquare (iOS, but it’s still awesome)
Thursday, November 7, 13
Add meaningful animations
Pinterest Circa
Thursday, November 7, 13
Add meaningful animations
Pinterest Circa
Thursday, November 7, 13
Add meaningful animations
Pinterest Circa
(Check out 4.4 ListViewWindowCompat)
Thursday, November 7, 13
Add meaningless animations
Snapchat
Thursday, November 7, 13
Why?
its fun. We like to be delighted
Thursday, November 7, 13
Screen Action Items
Thursday, November 7, 13
- Actionable items outside of the ActionBar
Screen Action Items
Thursday, November 7, 13
- Actionable items outside of the ActionBar
- Unique experience of blending your passive content
Screen Action Items
Thursday, November 7, 13
- Actionable items outside of the ActionBar
- Unique experience of blending your passive content
- Provide unique branding
Screen Action Items
Thursday, November 7, 13
- 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
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
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
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
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
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
How’d we do it?
Thursday, November 7, 13
- Create Views Dynamically
How’d we do it?
Thursday, November 7, 13
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility
How’d we do it?
Thursday, November 7, 13
- Create Views Dynamically
- Add Views to DecorView for maximum flexibility (getWindow().getDecorView())
How’d we do it?
Thursday, November 7, 13
- 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
- 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
What can I do today?
Thursday, November 7, 13
Add fun press states!
What can I do today?
Thursday, November 7, 13
Growing Press State
Thursday, November 7, 13
Growing Press State
Mileage may vary based on how you want to
detect “move outside”
Thursday, November 7, 13
Growing Press State continued
Thursday, November 7, 13
Growing Press State continued
Use more than 2 values
Thursday, November 7, 13
Growing Press State continued
Use more than 2 values
Use Different interpolators
Thursday, November 7, 13
Thursday, November 7, 13
Cooler Transitions
What can I do today?
Thursday, November 7, 13
Dialog Themed Activitysand Popup Components to
reduce Navigation Remorse
What can I do today?
Facebook Tumblr
Thursday, November 7, 13
Action Animations make me feel special
What can I do today?Google+ Tumblr
Thursday, November 7, 13
Don’t be a follower
BE A DESIGN LEADERSection 3
Thursday, November 7, 13
Everything we have started as someones idea
Thursday, November 7, 13
Everything we have started as someones idea
‣ ViewPager
Thursday, November 7, 13
Everything we have started as someones idea
‣ ViewPager
‣ Double-Tap to zoom
Thursday, November 7, 13
Everything we have started as someones idea
‣ ViewPager
‣ Double-Tap to zoom
‣ Slide to dismiss list-items
Thursday, November 7, 13
Everything we have started as someones idea
‣ ViewPager
‣ Double-Tap to zoom
‣ Slide to dismiss list-items
‣ Pretty much everything
Thursday, November 7, 13
Navigation DrawerRemember when this was socially unacceptable?
Thursday, November 7, 13
Navigation DrawerRemember when this was socially unacceptable?
‣ Junk Drawer / Trash Drawer
Thursday, November 7, 13
Navigation DrawerRemember when this was socially unacceptable?
‣ Junk Drawer / Trash Drawer
‣ Sloppy Design
Thursday, November 7, 13
Navigation DrawerRemember when this was socially unacceptable?
‣ Junk Drawer / Trash Drawer
‣ Sloppy Design
‣ Doing it wrong
Thursday, November 7, 13
Now it’s a leading navigation style
Thursday, November 7, 13
Now it’s a leading navigation style
ESPN ScoreCenter
Thursday, November 7, 13
Now it’s a leading navigation style
ESPN ScoreCenter Foursquare
Thursday, November 7, 13
Now it’s a leading navigation style
ESPN ScoreCenter Foursquare Facebook
Thursday, November 7, 13
Now it’s a leading navigation style
ESPN ScoreCenter Foursquare Facebook Spotify
Thursday, November 7, 13
In Every Google App
Thursday, November 7, 13
In Every Google App
Thursday, November 7, 13
But what if I want to change it a bit
Thursday, November 7, 13
But what if I want to change it a bit
Generates a lot of rageThursday, November 7, 13
But what if I want to change it a bit
Generates a lot of rageThursday, November 7, 13
Until Google does it, then it’s fine
Thursday, November 7, 13
Until Google does it, then it’s fine
Thursday, November 7, 13
Pull To RefreshRemember when this was considered bad design
for Android?
Thursday, November 7, 13
Now it’s a behavior all users expect
show images of all the apps
Text
Twitter Foursquare Path
Thursday, November 7, 13
Now it’s a behavior all users expect
show images of all the apps
Text
Twitter Foursquare Path (the booger)
Thursday, November 7, 13
And Google added it into all of their productsNo official support yet =(
Gmail Google+ Drive
Thursday, November 7, 13
How does Chrome even fit in?
Thursday, November 7, 13
How does Chrome even fit in?
I dunno, but it’sawesome
Thursday, November 7, 13
What does this all mean?
Thursday, November 7, 13
What does this all mean?
Do something awesome
Thursday, November 7, 13
What does this all mean?
Do something awesome
(but don’t use lens flares)
Thursday, November 7, 13
Swipe Back(stolen from iOS7)
Thursday, November 7, 13
Thursday, November 7, 13
iOS != Bad
Thursday, November 7, 13
Even though I like to pretend it does
iOS != Bad
Thursday, November 7, 13
Thursday, November 7, 13
Design for a tiny hand.
Thursday, November 7, 13
Design for a tiny hand.
Thursday, November 7, 13
- Up Button too far away
Design for a tiny hand.
Thursday, November 7, 13
- Up Button too far away- Back button provides no context
Design for a tiny hand.
Thursday, November 7, 13
- Up Button too far away- Back button provides no context- Why not?
Design for a tiny hand.
Thursday, November 7, 13
Swipe Back
Thursday, November 7, 13
How’d we do it
Thursday, November 7, 13
How’d we do itBefore launching any activity, capture the bitmap of the current window and save it in image cache.
Thursday, November 7, 13
How’d we do itBefore 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
How’d we do itBefore 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
Whatever you do:Be consistent
Thursday, November 7, 13
We Took our cues from Android...
Thursday, November 7, 13
And went a bit further
Thursday, November 7, 13
Wrapping up
Thursday, November 7, 13
‣ Say YES, it’s what makes our shit awesome
Wrapping up
Thursday, November 7, 13
‣ Say YES, it’s what makes our shit awesome
‣ Be WHIMSICAL!
Wrapping up
Thursday, November 7, 13
‣ 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
“Good applications follow the guidelines,
better applications challenge them.”
Thursday, November 7, 13
Thank you!
kevinthebigapple.tumblr.com
@kevingrant5
Thursday, November 7, 13