• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design tips for developers
 

Design tips for developers

on

  • 10,397 views

An introduction to design fundamentals and good practices, with a slant on designing for Android devices. ...

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.

Statistics

Views

Total Views
10,397
Views on SlideShare
9,140
Embed Views
1,257

Actions

Likes
18
Downloads
260
Comments
2

12 Embeds 1,257

http://www.marketing-android.fr 1015
http://twitter.com 90
https://twitter.com 45
http://us-w1.rockmelt.com 39
http://tweetedtimes.com 19
http://www.linkedin.com 15
http://a0.twimg.com 9
http://a0.twimg.com 9
http://androidappsbuilder.blogspot.in 8
https://si0.twimg.com 3
http://androidappsbuilder.blogspot.com 3
https://www.linkedin.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design tips for developers Design tips for developers Presentation Transcript

    • 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 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
    • Define Clear Goals 1. 2. 3. What does my app not do?Friday 26 August 11Define 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 11Boxee Remote
    • Simple FlexibleFriday 26 August 11
    • Risk! Simple FlexibleFriday 26 August 11
    • Risk! Simple FlexibleFriday 26 August 11Boxee RemoteTrade offs
    • http://www.flickr.com/photos/thedalogs/3196553836/Friday 26 August 11When do you ever eat your dinner with a Swiss Army Knife?
    • http://www.flickr.com/photos/limaoscarjuliet/3252847916/ http://www.flickr.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 first use.screenshot - pulse,
    • Friday 26 August 11If your app requires content to succeed, decide how to handle first use.Couldn’t this have 5 starting videos?
    • Friday 26 August 11This is the fist use of an app. For a flash 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 first 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.
    • 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 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
    • Small hit areasFriday 26 August 11
    • Friday 26 August 11Fi
    • Thanks! Kevin Cannon www.multiblah.com @multikevFriday 26 August 11