Downloaded 271 times
Uploaded byKevin Cannon
Design tips for developers
The document focuses on essential design principles for Android app development, presented during a meetup in Munich on August 25, 2010. Key topics include maintaining consistency, establishing visual hierarchy, and evaluating design effectiveness from the user's perspective. The speaker emphasizes the importance of user experience, app lifecycle, and the aesthetics of app interfaces to enhance usability.
Design tips for developers
- 1. Designing for Android Design tips for developers. Android Dev Meetup. Munich. 25 August 2010. Hosted by Friday 26 August 11
- 2. 1. Introduction 2. Fundamental Design Principles 3. Evaluating your designs Friday 26 August 11
- 3. 1. Introduction Friday 26August 11
- 4. Interaction Designer @frog Kevin Cannon www.multiblah.com @multikev Friday 26 August 11
- 5. 2. Fundamental DesignPrinciples Friday 26 August 11
- 6. Consistency Contrast Visual Hierarchy Proximity & Grouping A ordance Experience Friday 26 August 11
- 7.
- 8. Friday 26 August11 Button placement changes. Inconsistent within the app. Inconsistent with Android.
- 9.
- 10. Friday 26 August11 No contrast between news items.
- 11. Friday 26 August11 A small addition of more contrast on alternating rows scrolling long list easier.
- 12. Friday 26 August11 Strong contrast between main areas
- 13. Main Area Friday 26August 11 Strong contrast between main areas
- 14. Main Area Other Actions Friday 26 August 11 Strong contrast between main areas
- 15. Visual Hierarchy Friday 26August 11
- 16.
- 17. Friday 26 August11 squint test
- 18. 1 Friday 26 August11 squint test
- 19. 2 1 Friday 26 August 11 squint test
- 20. 2 1 3 Friday 26 August 11 squint test
- 21. 2 1 3 Friday 26 August 11 Guide the users eye
- 22. Friday 26 August11 Using colour and contrast to create a visual hierarchy.
- 23. Primary Action Friday 26August 11 Using colour and contrast to create a visual hierarchy.
- 24. Primary Action Secondary Action Friday 26 August 11 Using colour and contrast to create a visual hierarchy.
- 25. Primary Action Secondary Action Tertiary Actions Friday 26 August 11 Using colour and contrast to create a visual hierarchy.
- 26. Proximity & Grouping Friday26 August 11
- 27.
- 28. Undo? Huh? Friday 26 August 11
- 29. Undo? Eject/Fullscreen? Friday 26 August 11
- 30. Friday 26 August11 The green areas are the tools which handle drawing
- 31.
- 32. Original Changed Friday 26 August 11
- 33. A ordance Friday 26August 11
- 34.
- 35.
- 36. Friday 26 August11 Another book app, reveals the next page as you swipe, helping the user understand the behaviour. How can that be taken further?
- 37. * Only iPhoneexample in this presentation Friday 26 August 11 the iBooks app, showing a hint of pages on the right, builds in an additional visual queue.
- 38. Experience Friday 26 August11 What 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.
- 41. This is the “quick alarm setting” Friday 26 August 11
- 42. Sending mixed messages Friday26 August 11 Reading a book
- 43. Seriously? Wirklich? Friday 26 August 11 This is a pretty poor experience of reading a book. Want to reward the user.
- 44. 3. Evaluating yourdesigns Friday 26 August 11
- 45. 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.
- 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 11 Boxee Remote
- 47. Simple Flexible Friday 26 August 11
- 48. Risk! Simple Flexible Friday 26 August 11
- 49. Risk! Simple Flexible Friday 26 August 11 Boxee Remote Trade offs
- 50. http://www.flickr.com/photos/thedalogs/3196553836/ Friday 26 August11 When 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 11 Great picture!
- 52. Frequent Beginner Expert In-frequent Friday 26 August 11
- 53. Frequent ? ? Beginner Expert ? ? In-frequent Friday 26 August 11 Know where your app lives on this chart
- 54. Frequent Lock & Key Aeroplane Cockpit Beginner Expert Fire Extinguisher In-frequent Friday 26 August 11 Know where your app lives on this chart
- 55. Visual Design Friday 26August 11
- 56.
- 57. Friday 26 August11 Studies have shown, people perceive interfaces that look better as easier to use.
- 58.
- 59. 2nd Flashlight app in marketplace! Friday 26 August 11
- 60. First Use Friday 26August 11 If your app requires content to succeed, decide how to handle first use. screenshot - pulse,
- 61. Friday 26 August11 If your app requires content to succeed, decide how to handle first use. Couldn’t this have 5 starting videos?
- 62. Friday 26 August11 This is the fist use of an app. For a flash light application! Seriously!
- 63. Friday 26 August11 A more friendly approach
- 64. Friday 26 August11 Default content set.
- 65. Context Friday 26 August11 If your app requires content to succeed, decide how to handle first use. screenshot - pulse,
- 66. Friday 26 August11 An expenses application. Often used offline when travelling abroad.
- 67. Airplane mode! Friday 26August 11 I was in airplane mode. Default email client!?
- 68.
- 69. You are notyour user Friday 26 August 11
- 70.
- 71. Your users arenot stupid just because they make mistakes Friday 26 August 11
- 72.
- 73. Ask what youcan take out, not what you can put in. Friday 26 August 11
- 74. From: Designing Interactions,Bill Moggridge, 2007, ISBN 978-0262134743 Friday 26 August 11
- 75. Think about thefull life cycle of your app. Awareness Usage End Friday 26 August 11
- 76. Think about thefull life cycle of your app. Awareness Usage End Marketplace App site App Icon Reputation Reviews Friday 26 August 11
- 77. Think about thefull life cycle of your app. Awareness Usage End Marketplace First Use App site Support App Icon New features Reputation Update Cycles Reviews Friday 26 August 11
- 78. Think about thefull 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 Reviews Friday 26 August 11
- 79. Friday 26 August11 Fi
- 80. Finally, just getthe details right Friday 26 August 11 Fi
- 81. Friday 26 August11 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.
- 82. What’s wrong withthis icon? Friday 26 August 11
- 83. What’s wrong withthis icon? Friday 26 August 11 This is where 90% of people see your app, how it looks here is crucial.
- 84. What’s wrong withthis icon? Friday 26 August 11 Ignoring the platform you’re designing for.
- 85. What’s wrong withthis screen? Friday 26 August 11 Number format.
- 86. What’s wrong withthis screen? Friday 26 August 11 Number 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 August11 If you remove all content - suggests what to do next.
- 91.
- 92. Small hit areas Friday26 August 11
- 93. Small hit areas Friday26 August 11
- 94. Friday 26 August11 Fi
- 95. Thanks! Kevin Cannon www.multiblah.com @multikev Friday 26 August 11