Design tips for developers

Designing for Android Design tips for developers. Android Dev Meetup. Munich. 25 August 2010. Hosted byFriday 26 August 11

1. Introduction 2. Fundamental Design Principles 3. Evaluating your designsFriday 26 August 11

1. IntroductionFriday 26 August 11

Interaction Designer @ frog Kevin Cannon www.multiblah.com @multikevFriday 26 August 11

2. Fundamental Design PrinciplesFriday 26 August 11

Consistency Contrast Visual Hierarchy Proximity & Grouping A ordance ExperienceFriday 26 August 11

ConsistencyFriday 26 August 11

Friday 26 August 11Button placement changes. Inconsistent within the app. Inconsistent with Android.

ContrastFriday 26 August 11

Friday 26 August 11No contrast between news items.

Friday 26 August 11A small addition of more contrast on alternating rows scrolling long list easier.

Friday 26 August 11Strong contrast between main areas

Main AreaFriday 26 August 11Strong contrast between main areas

Main Area Other ActionsFriday 26 August 11Strong contrast between main areas

Visual HierarchyFriday 26 August 11

Friday 26 August 11

Friday 26 August 11squint test

1Friday 26 August 11squint test

2 1Friday 26 August 11squint test

2 1 3Friday 26 August 11squint test

2 1 3Friday 26 August 11Guide the users eye

Friday 26 August 11Using colour and contrast to create a visual hierarchy.

Primary ActionFriday 26 August 11Using colour and contrast to create a visual hierarchy.

Primary Action Secondary ActionFriday 26 August 11Using colour and contrast to create a visual hierarchy.

Primary Action Secondary Action Tertiary ActionsFriday 26 August 11Using colour and contrast to create a visual hierarchy.

Proximity & GroupingFriday 26 August 11

Friday 26 August 11

Undo? Huh?Friday 26 August 11

Undo? Eject/Fullscreen?Friday 26 August 11

Friday 26 August 11The green areas are the tools which handle drawing

Friday 26 August 11

Original ChangedFriday 26 August 11

A ordanceFriday 26 August 11

Friday 26 August 11

Friday 26 August 11Another book app, reveals the next page as you swipe, helping the user understand thebehaviour.How can that be taken further?

* Only iPhone example in this presentationFriday 26 August 11the iBooks app, showing a hint of pages on the right, builds in an additional visual queue.

ExperienceFriday 26 August 11What 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 messagesFriday 26 August 11Reading a book

Seriously? Wirklich?Friday 26 August 11This is a pretty poor experience of reading a book.Want to reward the user.

3. Evaluating your designsFriday 26 August 11

Deﬁne Clear Goals 1. 2. 3. What does my app not do?Friday 26 August 11Deﬁne what your app is, and what it’s not. From a users’ point of view.

Deﬁne 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 11Boxee Remote

Simple FlexibleFriday 26 August 11

Risk! Simple FlexibleFriday 26 August 11

Risk! Simple FlexibleFriday 26 August 11Boxee RemoteTrade offs

http://www.ﬂickr.com/photos/thedalogs/3196553836/Friday 26 August 11When do you ever eat your dinner with a Swiss Army Knife?

http://www.ﬂickr.com/photos/limaoscarjuliet/3252847916/ http://www.ﬂickr.com/photos/striatic/2243067342/sizes/z/in/photostream/Friday 26 August 11Great picture!

Frequent Beginner Expert In-frequentFriday 26 August 11

Frequent ? ? Beginner Expert ? ? In-frequentFriday 26 August 11Know where your app lives on this chart

Frequent Lock & Key Aeroplane Cockpit Beginner Expert Fire Extinguisher In-frequentFriday 26 August 11Know where your app lives on this chart

Visual DesignFriday 26 August 11

Friday 26 August 11

Friday 26 August 11Studies have shown, people perceive interfaces that look better as easier to use.

Friday 26 August 11

2nd Flashlight app in marketplace!Friday 26 August 11

First UseFriday 26 August 11If your app requires content to succeed, decide how to handle ﬁrst use.screenshot - pulse,

Friday 26 August 11If your app requires content to succeed, decide how to handle ﬁrst use.Couldn’t this have 5 starting videos?

Friday 26 August 11This is the ﬁst use of an app. For a ﬂash light application! Seriously!

Friday 26 August 11A more friendly approach

Friday 26 August 11Default content set.

ContextFriday 26 August 11If your app requires content to succeed, decide how to handle ﬁrst use.screenshot - pulse,

Friday 26 August 11An expenses application. Often used offline when travelling abroad.

Airplane mode!Friday 26 August 11I was in airplane mode. Default email client!?

Friday 26 August 11

You are not your userFriday 26 August 11

Friday 26 August 11

Your users are not stupid just because they make mistakesFriday 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-0262134743Friday 26 August 11

Think about the full life cycle of your app. Awareness Usage EndFriday 26 August 11

Think about the full life cycle of your app. Awareness Usage End Marketplace App site App Icon Reputation ReviewsFriday 26 August 11

Think about the full life cycle of your app. Awareness Usage End Marketplace First Use App site Support App Icon New features Reputation Update Cycles ReviewsFriday 26 August 11

Think about the full life cycle of your app. Awareness Usage End Marketplace First Use Stop use App site Support Deletion App Icon New features Rating Reputation Update Cycles Word-of-mouth ReviewsFriday 26 August 11

Friday 26 August 11Fi

Finally, just get the details rightFriday 26 August 11Fi

Friday 26 August 11You 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 11This is where 90% of people see your app, how it looks here is crucial.

What’s wrong with this icon?Friday 26 August 11Ignoring the platform you’re designing for.

What’s wrong with this screen?Friday 26 August 11Number format.

Hint: You’re supposed to be entering an expense What’s wrong with this screen?Friday 26 August 11

Hint: You’re supposed to be entering an expense Bad choice of input keyboard for just entering numbers. What’s wrong with this screen?Friday 26 August 11

Friday 26 August 11If you remove all content - suggests what to do next.

Friday 26 August 11

Small hit areasFriday 26 August 11

Friday 26 August 11Fi

Thanks! Kevin Cannon www.multiblah.com @multikevFriday 26 August 11

http://www.marketing-android.fr	903
http://twitter.com	90
https://twitter.com	44
http://us-w1.rockmelt.com	39
http://tweetedtimes.com	19
http://a0.twimg.com	9
http://a0.twimg.com	9
http://www.linkedin.com	4
https://si0.twimg.com	3

Design tips for developers

by Kevin Cannon on Aug 26, 2011

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,120

Statistics

Design tips for developers Presentation Transcript