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.

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 26 August 11

4. Interaction Designer @ frog
Kevin Cannon
www.multiblah.com
@multikev
Friday 26 August 11

5. 2. Fundamental Design Principles
Friday 26 August 11

6. Consistency
Contrast
Visual Hierarchy
Proximity & Grouping
A ordance
Experience
Friday 26 August 11

7. Consistency
Friday 26 August 11

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

9. Contrast
Friday 26 August 11

10. Friday 26 August 11
No contrast between news items.

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

12. Friday 26 August 11
Strong contrast between main areas

13. Main Area
Friday 26 August 11
Strong contrast between main areas

14. Main Area
Other Actions
Friday 26 August 11
Strong contrast between main areas

15. Visual Hierarchy
Friday 26 August 11

16. Friday 26 August 11

17. Friday 26 August 11
squint test

18. 1
Friday 26 August 11
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 August 11
Using colour and contrast to create a visual hierarchy.

23. Primary Action
Friday 26 August 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
Friday 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 11
The green areas are the tools which handle drawing

31. Friday 26 August 11

32. Original Changed
Friday 26 August 11

33. A ordance
Friday 26 August 11

34. Friday 26 August 11

35. Friday 26 August 11

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

37. * Only iPhone example 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 August 11
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. Friday 26 August 11

41. This is the
“quick alarm setting”
Friday 26 August 11

42. Sending mixed messages
Friday 26 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 your designs
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 August 11
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 26 August 11

56. Friday 26 August 11

57. Friday 26 August 11
Studies 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 Use
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.
screenshot - pulse,

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

62. Friday 26 August 11
This is the fist use of an app. For a flash light application! Seriously!

63. Friday 26 August 11
A more friendly approach

64. Friday 26 August 11
Default content set.

65. Context
Friday 26 August 11
If your app requires content to succeed, decide how to handle first use.
screenshot - pulse,

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

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

68. Friday 26 August 11

69. You are not your user
Friday 26 August 11

70. Friday 26 August 11

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

75. Think about the full life cycle of your app.
Awareness Usage End
Friday 26 August 11

76. Think about the full life cycle of your app.
Awareness Usage End
Marketplace
App site
App Icon
Reputation
Reviews
Friday 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
Reviews
Friday 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
Reviews
Friday 26 August 11

79. Friday 26 August 11
Fi

80. Finally, just get the details right
Friday 26 August 11
Fi

81. Friday 26 August 11
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 with this icon?
Friday 26 August 11

83. What’s wrong with this icon?
Friday 26 August 11
This is where 90% of people see your app, how it looks here is crucial.

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

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

86. What’s wrong with this 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 August 11
If you remove all content - suggests what to do next.

91. Friday 26 August 11

92. Small hit areas
Friday 26 August 11

93. Small hit areas
Friday 26 August 11

94. Friday 26 August 11
Fi

95. Thanks!
Kevin Cannon
www.multiblah.com
@multikev
Friday 26 August 11