Designing for Android                           Design tips for developers.                             Android Dev Meetup...
1. Introduction                2. Fundamental Design Principles                3. Evaluating your designsFriday 26 August 11
1. IntroductionFriday 26 August 11
Interaction Designer @ frog                                                        Kevin Cannon                           ...
2. Fundamental Design PrinciplesFriday 26 August 11
Consistency                            Contrast                        Visual Hierarchy                      Proximity & G...
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 hierar...
Primary Action                      Secondary Action                                                          Tertiary Act...
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 ...
* Only iPhone example in this presentationFriday 26 August 11the iBooks app, showing a hint of pages on the right, builds ...
ExperienceFriday 26 August 11What experience you you want to create?
Example: Gentle Alarm                      Wake you up gently. Good night’s sleep.                       Improve quality o...
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 experien...
3. Evaluating your designsFriday 26 August 11
Define Clear Goals                                 1.                                 2.                                 3....
Define Clear Goals                      1. Help someone save money.                      2. Tell them what they spend money...
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 Kni...
http://www.flickr.com/photos/limaoscarjuliet/3252847916/                                                 http://www.flickr.c...
Frequent           Beginner                 Expert                      In-frequentFriday 26 August 11
Frequent                        ?                                                    ?           Beginner                 ...
Frequent                      Lock & Key                         Aeroplane Cockpit           Beginner                     ...
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 vi...
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...
Think about the full life cycle of your app.       Awareness                         Usage                       End      ...
Think about the full life cycle of your app.       Awareness                         Usage                       End      ...
Think about the full life cycle of your app.       Awareness                         Usage                           End  ...
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 fra...
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                                               ...
Hint: You’re                                                 supposed to be                                               ...
Hint: You’re                                                 supposed to be                                               ...
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                  ...
Upcoming SlideShare
Loading in...5
×

Design tips for developers

10,393

Published on

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.

Published in: Design, Technology
2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,393
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
264
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Design tips for developers"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×