Design tips for developers

  • 10,023 views
Uploaded on

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,023
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
262
Comments
2
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing for Android Design tips for developers. Android Dev Meetup. Munich. 25 August 2010. Hosted byFriday 26 August 11
  • 2. 1. Introduction 2. Fundamental Design Principles 3. Evaluating your designsFriday 26 August 11
  • 3. 1. IntroductionFriday 26 August 11
  • 4. Interaction Designer @ frog Kevin Cannon www.multiblah.com @multikevFriday 26 August 11
  • 5. 2. Fundamental Design PrinciplesFriday 26 August 11
  • 6. Consistency Contrast Visual Hierarchy Proximity & Grouping A ordance ExperienceFriday 26 August 11
  • 7. ConsistencyFriday 26 August 11
  • 8. Friday 26 August 11Button placement changes. Inconsistent within the app. Inconsistent with Android.
  • 9. ContrastFriday 26 August 11
  • 10. Friday 26 August 11No contrast between news items.
  • 11. Friday 26 August 11A small addition of more contrast on alternating rows scrolling long list easier.
  • 12. Friday 26 August 11Strong contrast between main areas
  • 13. Main AreaFriday 26 August 11Strong contrast between main areas
  • 14. Main Area Other ActionsFriday 26 August 11Strong contrast between main areas
  • 15. Visual HierarchyFriday 26 August 11
  • 16. Friday 26 August 11
  • 17. Friday 26 August 11squint test
  • 18. 1Friday 26 August 11squint test
  • 19. 2 1Friday 26 August 11squint test
  • 20. 2 1 3Friday 26 August 11squint test
  • 21. 2 1 3Friday 26 August 11Guide the users eye
  • 22. Friday 26 August 11Using colour and contrast to create a visual hierarchy.
  • 23. Primary ActionFriday 26 August 11Using colour and contrast to create a visual hierarchy.
  • 24. Primary Action Secondary ActionFriday 26 August 11Using colour and contrast to create a visual hierarchy.
  • 25. Primary Action Secondary Action Tertiary ActionsFriday 26 August 11Using colour and contrast to create a visual hierarchy.
  • 26. Proximity & GroupingFriday 26 August 11
  • 27. Friday 26 August 11
  • 28. Undo? Huh?Friday 26 August 11
  • 29. Undo? Eject/Fullscreen?Friday 26 August 11
  • 30. Friday 26 August 11The green areas are the tools which handle drawing
  • 31. Friday 26 August 11
  • 32. Original ChangedFriday 26 August 11
  • 33. A ordanceFriday 26 August 11
  • 34. Friday 26 August 11
  • 35. Friday 26 August 11
  • 36. Friday 26 August 11Another book app, reveals the next page as you swipe, helping the user understand thebehaviour.How can that be taken further?
  • 37. * 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.
  • 38. ExperienceFriday 26 August 11What experience you you want to create?
  • 39. Example: Gentle Alarm Wake you up gently. Good night’s sleep. Improve quality of life. More energy.Friday 26 August 11
  • 40. Friday 26 August 11
  • 41. This is the “quick alarm setting”Friday 26 August 11
  • 42. Sending mixed messagesFriday 26 August 11Reading a book
  • 43. Seriously? Wirklich?Friday 26 August 11This is a pretty poor experience of reading a book.Want to reward the user.
  • 44. 3. Evaluating your designsFriday 26 August 11
  • 45. 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.
  • 46. 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
  • 47. Simple FlexibleFriday 26 August 11
  • 48. Risk! Simple FlexibleFriday 26 August 11
  • 49. Risk! Simple FlexibleFriday 26 August 11Boxee RemoteTrade offs
  • 50. http://www.flickr.com/photos/thedalogs/3196553836/Friday 26 August 11When do you ever eat your dinner with a Swiss Army Knife?
  • 51. http://www.flickr.com/photos/limaoscarjuliet/3252847916/ http://www.flickr.com/photos/striatic/2243067342/sizes/z/in/photostream/Friday 26 August 11Great picture!
  • 52. Frequent Beginner Expert In-frequentFriday 26 August 11
  • 53. Frequent ? ? Beginner Expert ? ? In-frequentFriday 26 August 11Know where your app lives on this chart
  • 54. Frequent Lock & Key Aeroplane Cockpit Beginner Expert Fire Extinguisher In-frequentFriday 26 August 11Know where your app lives on this chart
  • 55. Visual DesignFriday 26 August 11
  • 56. Friday 26 August 11
  • 57. Friday 26 August 11Studies have shown, people perceive interfaces that look better as easier to use.
  • 58. Friday 26 August 11
  • 59. 2nd Flashlight app in marketplace!Friday 26 August 11
  • 60. First UseFriday 26 August 11If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
  • 61. Friday 26 August 11If your app requires content to succeed, decide how to handle first use.Couldn’t this have 5 starting videos?
  • 62. Friday 26 August 11This is the fist use of an app. For a flash light application! Seriously!
  • 63. Friday 26 August 11A more friendly approach
  • 64. Friday 26 August 11Default content set.
  • 65. ContextFriday 26 August 11If your app requires content to succeed, decide how to handle first use.screenshot - pulse,
  • 66. Friday 26 August 11An expenses application. Often used offline when travelling abroad.
  • 67. Airplane mode!Friday 26 August 11I was in airplane mode. Default email client!?
  • 68. Friday 26 August 11
  • 69. You are not your userFriday 26 August 11
  • 70. Friday 26 August 11
  • 71. Your users are not stupid just because they make mistakesFriday 26 August 11
  • 72. Friday 26 August 11
  • 73. Ask what you can take out, not what you can put in.Friday 26 August 11
  • 74. From: Designing Interactions, Bill Moggridge, 2007, ISBN 978-0262134743Friday 26 August 11
  • 75. Think about the full life cycle of your app. Awareness Usage EndFriday 26 August 11
  • 76. Think about the full life cycle of your app. Awareness Usage End Marketplace App site App Icon Reputation ReviewsFriday 26 August 11
  • 77. 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
  • 78. 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
  • 79. Friday 26 August 11Fi
  • 80. Finally, just get the details rightFriday 26 August 11Fi
  • 81. 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.
  • 82. What’s wrong with this icon?Friday 26 August 11
  • 83. What’s wrong with this icon?Friday 26 August 11This is where 90% of people see your app, how it looks here is crucial.
  • 84. What’s wrong with this icon?Friday 26 August 11Ignoring the platform you’re designing for.
  • 85. What’s wrong with this screen?Friday 26 August 11Number format.
  • 86. What’s wrong with this screen?Friday 26 August 11Number format.
  • 87. Hint: You’re supposed to be entering an expense What’s wrong with this screen?Friday 26 August 11
  • 88. Hint: You’re supposed to be entering an expense What’s wrong with this screen?Friday 26 August 11
  • 89. 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
  • 90. Friday 26 August 11If you remove all content - suggests what to do next.
  • 91. Friday 26 August 11
  • 92. Small hit areasFriday 26 August 11
  • 93. Small hit areasFriday 26 August 11
  • 94. Friday 26 August 11Fi
  • 95. Thanks! Kevin Cannon www.multiblah.com @multikevFriday 26 August 11