design tips for developers
DESCRIPTION
An introduction to design fundamentals and good practices, with a slant on designing for Android devices. Note: Some publicly available apps are used as examples here. Where criticised, i'm merely highlighting a specific aspect about design, and not disparaging the app as a whole. I hope no one will take offence.TRANSCRIPT
![Page 1: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/1.jpg)
Designing for AndroidDesign tips for developers.
Android Dev Meetup. Munich. 25 August 2010. Hosted by
Friday 26 August 11
![Page 2: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/2.jpg)
1. Introduction2. Fundamental Design Principles3. Evaluating your designs
Friday 26 August 11
![Page 3: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/3.jpg)
1. Introduction
Friday 26 August 11
![Page 4: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/4.jpg)
Interaction Designer @ frog
Kevin Cannonwww.multiblah.com
@multikev
Friday 26 August 11
![Page 5: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/5.jpg)
2. Fundamental Design Principles
Friday 26 August 11
![Page 6: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/6.jpg)
ConsistencyContrast
Visual HierarchyProximity & Grouping
A!ordanceExperience
Friday 26 August 11
![Page 7: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/7.jpg)
Consistency
Friday 26 August 11
![Page 8: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/8.jpg)
Friday 26 August 11
Button placement changes. Inconsistent within the app. Inconsistent with Android.
![Page 9: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/9.jpg)
Contrast
Friday 26 August 11
![Page 10: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/10.jpg)
Friday 26 August 11
No contrast between news items.
![Page 11: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/11.jpg)
Friday 26 August 11
A small addition of more contrast on alternating rows scrolling long list easier.
![Page 12: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/12.jpg)
Friday 26 August 11
Strong contrast between main areas
![Page 13: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/13.jpg)
Main Area
Friday 26 August 11
Strong contrast between main areas
![Page 14: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/14.jpg)
Other Actions
Main Area
Friday 26 August 11
Strong contrast between main areas
![Page 15: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/15.jpg)
Visual Hierarchy
Friday 26 August 11
![Page 16: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/16.jpg)
Friday 26 August 11
![Page 17: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/17.jpg)
Friday 26 August 11
squint test
![Page 18: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/18.jpg)
1
Friday 26 August 11
squint test
![Page 19: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/19.jpg)
2
1
Friday 26 August 11
squint test
![Page 20: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/20.jpg)
2
1
3
Friday 26 August 11
squint test
![Page 21: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/21.jpg)
2
1
3
Friday 26 August 11
Guide the users eye
![Page 22: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/22.jpg)
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
![Page 23: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/23.jpg)
Primary Action
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
![Page 24: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/24.jpg)
Primary Action Secondary Action
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
![Page 25: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/25.jpg)
Primary Action Secondary Action
Tertiary Actions
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
![Page 26: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/26.jpg)
Proximity & Grouping
Friday 26 August 11
![Page 27: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/27.jpg)
Friday 26 August 11
![Page 28: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/28.jpg)
Huh?
Undo?
Friday 26 August 11
![Page 29: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/29.jpg)
Undo?
Eject/Fullscreen?
Friday 26 August 11
![Page 30: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/30.jpg)
Friday 26 August 11
The green areas are the tools which handle drawing
![Page 31: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/31.jpg)
Friday 26 August 11
![Page 32: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/32.jpg)
Original Changed
Friday 26 August 11
![Page 33: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/33.jpg)
A!ordance
Friday 26 August 11
![Page 34: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/34.jpg)
Friday 26 August 11
![Page 35: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/35.jpg)
Friday 26 August 11
![Page 36: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/36.jpg)
Friday 26 August 11
Another book app, reveals the next page as you swipe, helping the user understand the behaviour.How can that be taken further?
![Page 37: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/37.jpg)
* Only iPhone example in this presentation
Friday 26 August 11
the iBooks app, showing a hint of pages on the right, builds in an additional visual queue.
![Page 38: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/38.jpg)
Experience
Friday 26 August 11
What experience you you want to create?
![Page 39: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/39.jpg)
Example: Gentle Alarm
Wake you up gently. Good night’s sleep.Improve quality of life. More energy.
Friday 26 August 11
![Page 40: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/40.jpg)
Friday 26 August 11
![Page 41: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/41.jpg)
This is the “quick alarm setting”
Friday 26 August 11
![Page 42: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/42.jpg)
Sending mixed messages
Friday 26 August 11
Reading a book
![Page 43: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/43.jpg)
Seriously?
Wirklich?
Friday 26 August 11
This is a pretty poor experience of reading a book.Want to reward the user.
![Page 44: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/44.jpg)
3. Evaluating your designs
Friday 26 August 11
![Page 45: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/45.jpg)
Define Clear Goals
1. 2. 3.
What does my app not do?
Friday 26 August 11
Define what your app is, and what it’s not. From a users’ point of view.
![Page 46: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/46.jpg)
Define Clear Goals
1. Help someone save money.2. Tell them what they spend money on.3. Feel in control of their spending.
What does my app not do?Not a budget planner or manager.
Friday 26 August 11
Boxee Remote
![Page 47: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/47.jpg)
Simple Flexible
Friday 26 August 11
![Page 48: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/48.jpg)
Simple Flexible
Risk!
Friday 26 August 11
![Page 49: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/49.jpg)
Simple Flexible
Risk!
Friday 26 August 11
Boxee RemoteTrade offs
![Page 50: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/50.jpg)
http://www.flickr.com/photos/thedalogs/3196553836/
Friday 26 August 11
When do you ever eat your dinner with a Swiss Army Knife?
![Page 51: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/striatic/2243067342/sizes/z/in/photostream/http://www.flickr.com/photos/limaoscarjuliet/3252847916/
Friday 26 August 11
Great picture!
![Page 52: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/52.jpg)
Beginner Expert
Frequent
In-frequent
Friday 26 August 11
![Page 53: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/53.jpg)
Frequent
In-frequent
??
??
Beginner Expert
Friday 26 August 11
Know where your app lives on this chart
![Page 54: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/54.jpg)
Frequent
In-frequent
Aeroplane CockpitLock & Key
Beginner Expert
Fire Extinguisher
Friday 26 August 11
Know where your app lives on this chart
![Page 55: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/55.jpg)
Visual Design
Friday 26 August 11
![Page 56: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/56.jpg)
Friday 26 August 11
![Page 57: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/57.jpg)
Friday 26 August 11
Studies have shown, people perceive interfaces that look better as easier to use.
![Page 58: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/58.jpg)
Friday 26 August 11
![Page 59: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/59.jpg)
2nd Flashlight appin marketplace!
Friday 26 August 11
![Page 60: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/60.jpg)
First Use
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
![Page 61: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/61.jpg)
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.
Couldn’t this have 5 starting videos?
![Page 62: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/62.jpg)
Friday 26 August 11
This is the fist use of an app. For a flash light application! Seriously!
![Page 63: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/63.jpg)
Friday 26 August 11
A more friendly approach
![Page 64: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/64.jpg)
Friday 26 August 11
Default content set.
![Page 65: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/65.jpg)
Context
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
![Page 66: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/66.jpg)
Friday 26 August 11
An expenses application. Often used offline when travelling abroad.
![Page 67: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/67.jpg)
Airplane mode!
Friday 26 August 11
I was in airplane mode. Default email client!?
![Page 68: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/68.jpg)
Friday 26 August 11
![Page 69: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/69.jpg)
You are not your user
Friday 26 August 11
![Page 70: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/70.jpg)
Friday 26 August 11
![Page 71: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/71.jpg)
Your users are not stupid just because they make mistakes
Friday 26 August 11
![Page 72: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/72.jpg)
Friday 26 August 11
![Page 73: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/73.jpg)
Ask what you can take out, not what you can put in.
Friday 26 August 11
![Page 74: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/74.jpg)
From: Designing Interactions, Bill Moggridge, 2007, ISBN 978-0262134743
Friday 26 August 11
![Page 75: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/75.jpg)
Think about the full life cycle of your app.
Awareness Usage End
Friday 26 August 11
![Page 76: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/76.jpg)
Think about the full life cycle of your app.
Awareness Usage End
MarketplaceApp siteApp Icon
ReputationReviews
Friday 26 August 11
![Page 77: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/77.jpg)
Think about the full life cycle of your app.
Awareness Usage End
MarketplaceApp siteApp Icon
ReputationReviews
First UseSupport
New featuresUpdate Cycles
Friday 26 August 11
![Page 78: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/78.jpg)
Think about the full life cycle of your app.
Awareness Usage End
MarketplaceApp siteApp Icon
ReputationReviews
Stop useDeletionRating
Word-of-mouth
First UseSupport
New featuresUpdate Cycles
Friday 26 August 11
![Page 79: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/79.jpg)
Friday 26 August 11
Fi
![Page 80: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/80.jpg)
Finally, just get the details right
Friday 26 August 11
Fi
![Page 81: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/81.jpg)
Friday 26 August 11
You don’t need an alert for this, a more subtle, inline message would be more appropriate.Technical frameworks can allow us to be lazy, we need to try avoid that.
![Page 82: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/82.jpg)
What’s wrong with this icon?Friday 26 August 11
![Page 83: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/83.jpg)
What’s wrong with this icon?Friday 26 August 11
This is where 90% of people see your app, how it looks here is crucial.
![Page 84: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/84.jpg)
What’s wrong with this icon?Friday 26 August 11
Ignoring the platform you’re designing for.
![Page 85: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/85.jpg)
What’s wrong with this screen?Friday 26 August 11
Number format.
![Page 86: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/86.jpg)
What’s wrong with this screen?Friday 26 August 11
Number format.
![Page 87: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/87.jpg)
What’s wrong with this screen?
Hint: You’re supposed to be entering an expense
Friday 26 August 11
![Page 88: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/88.jpg)
What’s wrong with this screen?
Hint: You’re supposed to be entering an expense
Friday 26 August 11
![Page 89: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/89.jpg)
What’s wrong with this screen?
Hint: You’re supposed to be entering an expense
Bad choice of input keyboard for just entering numbers.
Friday 26 August 11
![Page 90: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/90.jpg)
Friday 26 August 11
If you remove all content - suggests what to do next.
![Page 91: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/91.jpg)
Friday 26 August 11
![Page 92: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/92.jpg)
Small hit areas
Friday 26 August 11
![Page 93: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/93.jpg)
Small hit areas
Friday 26 August 11
![Page 94: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/94.jpg)
Friday 26 August 11
Fi
![Page 95: Design tips for developers](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c77ad34a79590f5b8b461b/html5/thumbnails/95.jpg)
Thanks!
Kevin Cannonwww.multiblah.com
@multikev
Friday 26 August 11