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
Designing for AndroidDesign tips for developers.
Android Dev Meetup. Munich. 25 August 2010. Hosted by
Friday 26 August 11
1. Introduction2. Fundamental Design Principles3. Evaluating your designs
Friday 26 August 11
1. Introduction
Friday 26 August 11
Interaction Designer @ frog
Kevin Cannonwww.multiblah.com
@multikev
Friday 26 August 11
2. Fundamental Design Principles
Friday 26 August 11
ConsistencyContrast
Visual HierarchyProximity & Grouping
A!ordanceExperience
Friday 26 August 11
Consistency
Friday 26 August 11
Friday 26 August 11
Button placement changes. Inconsistent within the app. Inconsistent with Android.
Contrast
Friday 26 August 11
Friday 26 August 11
No contrast between news items.
Friday 26 August 11
A small addition of more contrast on alternating rows scrolling long list easier.
Friday 26 August 11
Strong contrast between main areas
Main Area
Friday 26 August 11
Strong contrast between main areas
Other Actions
Main Area
Friday 26 August 11
Strong contrast between main areas
Visual Hierarchy
Friday 26 August 11
Friday 26 August 11
Friday 26 August 11
squint test
1
Friday 26 August 11
squint test
2
1
Friday 26 August 11
squint test
2
1
3
Friday 26 August 11
squint test
2
1
3
Friday 26 August 11
Guide the users eye
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
Primary Action
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
Primary Action Secondary Action
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
Primary Action Secondary Action
Tertiary Actions
Friday 26 August 11
Using colour and contrast to create a visual hierarchy.
Proximity & Grouping
Friday 26 August 11
Friday 26 August 11
Huh?
Undo?
Friday 26 August 11
Undo?
Eject/Fullscreen?
Friday 26 August 11
Friday 26 August 11
The green areas are the tools which handle drawing
Friday 26 August 11
Original Changed
Friday 26 August 11
A!ordance
Friday 26 August 11
Friday 26 August 11
Friday 26 August 11
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?
* 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.
Experience
Friday 26 August 11
What experience you you want to create?
Example: Gentle Alarm
Wake you up gently. Good night’s sleep.Improve quality of life. More energy.
Friday 26 August 11
Friday 26 August 11
This is the “quick alarm setting”
Friday 26 August 11
Sending mixed messages
Friday 26 August 11
Reading a book
Seriously?
Wirklich?
Friday 26 August 11
This is a pretty poor experience of reading a book.Want to reward the user.
3. Evaluating your designs
Friday 26 August 11
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.
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
Simple Flexible
Friday 26 August 11
Simple Flexible
Risk!
Friday 26 August 11
Simple Flexible
Risk!
Friday 26 August 11
Boxee RemoteTrade offs
http://www.flickr.com/photos/thedalogs/3196553836/
Friday 26 August 11
When do you ever eat your dinner with a Swiss Army Knife?
http://www.flickr.com/photos/striatic/2243067342/sizes/z/in/photostream/http://www.flickr.com/photos/limaoscarjuliet/3252847916/
Friday 26 August 11
Great picture!
Beginner Expert
Frequent
In-frequent
Friday 26 August 11
Frequent
In-frequent
??
??
Beginner Expert
Friday 26 August 11
Know where your app lives on this chart
Frequent
In-frequent
Aeroplane CockpitLock & Key
Beginner Expert
Fire Extinguisher
Friday 26 August 11
Know where your app lives on this chart
Visual Design
Friday 26 August 11
Friday 26 August 11
Friday 26 August 11
Studies have shown, people perceive interfaces that look better as easier to use.
Friday 26 August 11
2nd Flashlight appin marketplace!
Friday 26 August 11
First Use
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.
Couldn’t this have 5 starting videos?
Friday 26 August 11
This is the fist use of an app. For a flash light application! Seriously!
Friday 26 August 11
A more friendly approach
Friday 26 August 11
Default content set.
Context
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
Friday 26 August 11
An expenses application. Often used offline when travelling abroad.
Airplane mode!
Friday 26 August 11
I was in airplane mode. Default email client!?
Friday 26 August 11
You are not your user
Friday 26 August 11
Friday 26 August 11
Your users are not stupid just because they make mistakes
Friday 26 August 11
Friday 26 August 11
Ask what you can take out, not what you can put in.
Friday 26 August 11
From: Designing Interactions, Bill Moggridge, 2007, ISBN 978-0262134743
Friday 26 August 11
Think about the full life cycle of your app.
Awareness Usage End
Friday 26 August 11
Think about the full life cycle of your app.
Awareness Usage End
MarketplaceApp siteApp Icon
ReputationReviews
Friday 26 August 11
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
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
Friday 26 August 11
Fi
Finally, just get the details right
Friday 26 August 11
Fi
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.
What’s wrong with this icon?Friday 26 August 11
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.
What’s wrong with this icon?Friday 26 August 11
Ignoring the platform you’re designing for.
What’s wrong with this screen?Friday 26 August 11
Number format.
What’s wrong with this screen?Friday 26 August 11
Number format.
What’s wrong with this screen?
Hint: You’re supposed to be entering an expense
Friday 26 August 11
What’s wrong with this screen?
Hint: You’re supposed to be entering an expense
Friday 26 August 11
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
Friday 26 August 11
If you remove all content - suggests what to do next.
Friday 26 August 11
Small hit areas
Friday 26 August 11
Small hit areas
Friday 26 August 11
Friday 26 August 11
Fi
Thanks!
Kevin Cannonwww.multiblah.com
@multikev
Friday 26 August 11