Designing an AppFrom Idea to MarketTony Hillerson        Juan SanchezSoftware Architect    Experience Architect#AndroidOpe...
EffectiveUI              Tony Hillerson           Juan SanchezUser Experience Agency   Software Architect       Experience...
http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_EarthOverviewWe’re going on a journey.AndroidOpen 2011#Android...
Who are you?Designer, developer, both?#AndroidOpen
EXERCISE ONEDesign a Conference AppLike for this conference#AndroidOpen
The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Revie...
The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Revie...
Too many features!What should the app do?#AndroidOpen
Getting up to speedThis will only hurt a little.#AndroidOpen
What?AndroidOpen 2011#AndroidOpen
#AndroidOpen
Interaction DesignExposing intent through actions and feedback.#AndroidOpen
Process   Magic               Form   Substance#AndroidOpen
People think its this veneer - that the designersare handed this box and told, Make it look good!.Thats not what we think ...
Don Norman’s Design Vocabulary  Visibility  Affordances  Feedback  Mapping  Constraint  Consistency#AndroidOpen
Natural DesignUse what people know from their environment.#AndroidOpen
#AndroidOpen
http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america#AndroidOpen
Conceptual ModelThe “model” a user of a system builds to reason about asystem#AndroidOpen
VisibilityCues between the design of an object and its operation#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
AffordancePerception that something can be interacted with#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
FeedbackThe effect of user actions should be obvious#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
MappingA relation between intentions and possible actions andbetween actions and their effect on a system or device#Androi...
http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
ConstraintsPreventing errors before they can occur#AndroidOpen
#AndroidOpen
#AndroidOpen
ConsistencyIn the way visual objects are used#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
PerformancePeople don’t have time to wait.#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
TakeawaysInteractive elements should be visible, recognizable,reactive (feedback), safe, and consistent.#AndroidOpen
I know kung fu.AndroidOpen 2011#AndroidOpen
You do design alreadyWhether you know it or not.#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
PUSH HeARID10TLOL!!1!#AndroidOpen
Avoid   This#AndroidOpen
Knowing your usersGet out and talk to people#AndroidOpen
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html               How many people you ask?#Andr...
Who to interview?http://wingstoafrica.com/mali-pictures-part-2.html      http://www.kenrockwell.com/katie/2008.htm   http:...
What to say? Where to go?#AndroidOpen
Analyze your resultsTurn your results into findings.Summarize the findings in terms ofa set of agreed-upon design heuristi...
EXERCISE TWOUser goalsAnd what they mean to you#AndroidOpen
THE PERSONA               Hilly Tonnerson               • 19 - 45 years old               • mobile developer              ...
What do you want to leave the conference with?What do you like about conferences?What environment are you in?What do you h...
What we came up withWe’re here to present on design and developmentWe want to share our presentationWe want to easily answ...
EXERCISE THREEFeature BrainstormWhat’s the important stuff?#AndroidOpen
What we came up withA presenter’s assistant appControls the presentation with our phonePeople can ask questions from their...
Designing for AndroidJust a starting point#AndroidOpen
Know the deviceDimensions, orientation, sensors, inputs, etc.#AndroidOpen
Know the platformThis is not iOS, Windows Phone, webOS, etc.#AndroidOpen
Embrace touchPeople are using fingers, not cursorsContent as the interfaceMulti-touch and gesturesPhysical metaphors*#Andr...
Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure#AndroidOpen
maisdcharlottes.blogspot.comContextWhat’s the physical or device environment?Usage patterns#AndroidOpen
Android GuidelinesA lot of the work has already been done for you.#AndroidOpen
When in doubtRefer to the guidelines#AndroidOpen
http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/#AndroidOpen
#AndroidOpen
“Rules” can be brokenThere’s unexplored territoryWe’re just at the beginning#AndroidOpen
EXERCISE FOURDesign a Conference AppUsing the powers you’ve been given.#AndroidOpen
Map out some ideasWhat are the screens? Where can the user “go”?#AndroidOpen
#AndroidOpen
Sketch out some screensCan’t sketch? Work with someone who can.#AndroidOpen
Here’s ours#AndroidOpen
Get feedbackValidate your sketches meet the goals.#AndroidOpen
What we heardHow can I see all the slides?How do I switch slides?Those icons don’t make senseHow do I know what slide I’m ...
Anyone want to share?Bueller? Bueller? Bueller?#AndroidOpen
You know what to build.Now, how can you build it.#AndroidOpen
ProductionTips For Realizing Visual Designs#AndroidOpen
Beautiful AndroidEric Burke (Square)11:35 MondayGrand Ballroom B#AndroidOpen
The source of pixelsWhat’s the toolset?#AndroidOpen
Adobe Fireworks#AndroidOpen
#AndroidOpen
VisibilityMenus and the Action Bar#AndroidOpen
showAsActionAvoid using “always”Provide an icon and “ifRoom|withText”#AndroidOpen
The Honeycomb Action Bar:Front to BackMark Murphy (CommonsWare)14:30 TuesdayGrand Ballroom B#AndroidOpen
9 Patch vs. XMLA matter of designer-developer workflow#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>	 	 <...
...    <item android:top="2px">	   	 <shape android:shape="rectangle">	   	 	 <stroke android:color="@color/color_primary_...
...	 <item android:top="1px" android:bottom="1px">	 	 <shape android:shape="rectangle">	 	      <gradient	 	         andro...
Multi-Screen DesignsWith Fragments and Resources#AndroidOpen
What devices to target?Try to get as much data as you can.#AndroidOpen
What devices to target?Try to get as much data as you can.#AndroidOpen
http://developer.android.com/resources/dashboard/platform-versions.html#AndroidOpen
Ice CreamSandwichIs Coming#AndroidOpen
Unified codebaseFor all devices#AndroidOpen
http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html#AndroidOpen
Phone layout<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
Tablet layout<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android...
/** This is a callback that the list fragment (Fragment A) calls    when a list item is selected */public void onItemSelec...
res/layout/main_activity.xml # For phones    res/layout-sw600dp/main_activity.xml # 7” tablets    res/layout-sw720dp/main_...
RTFSrepo and exploring how google does it#AndroidOpen
http://source.android.com#AndroidOpen
http://androiddrawableexplorer.appspot.com/  #AndroidOpen
Questions?#AndroidOpen
Tony Hillerson               @thillersonThanks!        Juan Sanchez               @juansanchez               effectiveui.c...
Upcoming SlideShare
Loading in...5
×

Designing an Android App from Idea to Market

4,816

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,816
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
118
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Designing an Android App from Idea to Market

  1. 1. Designing an AppFrom Idea to MarketTony Hillerson Juan SanchezSoftware Architect Experience Architect#AndroidOpen ©2011 EffectiveUI
  2. 2. EffectiveUI Tony Hillerson Juan SanchezUser Experience Agency Software Architect Experience Architect@effectiveui @thillerson @juansanchez “Building Android Apps “Creating Visual with Java” Experiences with Flex 3.0”#AndroidOpen
  3. 3. http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_EarthOverviewWe’re going on a journey.AndroidOpen 2011#AndroidOpen
  4. 4. Who are you?Designer, developer, both?#AndroidOpen
  5. 5. EXERCISE ONEDesign a Conference AppLike for this conference#AndroidOpen
  6. 6. The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides#AndroidOpen
  7. 7. The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides#AndroidOpen
  8. 8. Too many features!What should the app do?#AndroidOpen
  9. 9. Getting up to speedThis will only hurt a little.#AndroidOpen
  10. 10. What?AndroidOpen 2011#AndroidOpen
  11. 11. #AndroidOpen
  12. 12. Interaction DesignExposing intent through actions and feedback.#AndroidOpen
  13. 13. Process Magic Form Substance#AndroidOpen
  14. 14. People think its this veneer - that the designersare handed this box and told, Make it look good!.Thats not what we think design is. Its not justwhat it looks like and feels like.Design is how it works.Steve Jobs#AndroidOpen
  15. 15. Don Norman’s Design Vocabulary Visibility Affordances Feedback Mapping Constraint Consistency#AndroidOpen
  16. 16. Natural DesignUse what people know from their environment.#AndroidOpen
  17. 17. #AndroidOpen
  18. 18. http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america#AndroidOpen
  19. 19. Conceptual ModelThe “model” a user of a system builds to reason about asystem#AndroidOpen
  20. 20. VisibilityCues between the design of an object and its operation#AndroidOpen
  21. 21. #AndroidOpen
  22. 22. #AndroidOpen
  23. 23. #AndroidOpen
  24. 24. #AndroidOpen
  25. 25. AffordancePerception that something can be interacted with#AndroidOpen
  26. 26. #AndroidOpen
  27. 27. #AndroidOpen
  28. 28. #AndroidOpen
  29. 29. FeedbackThe effect of user actions should be obvious#AndroidOpen
  30. 30. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  31. 31. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  32. 32. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  33. 33. MappingA relation between intentions and possible actions andbetween actions and their effect on a system or device#AndroidOpen
  34. 34. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  35. 35. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  36. 36. ConstraintsPreventing errors before they can occur#AndroidOpen
  37. 37. #AndroidOpen
  38. 38. #AndroidOpen
  39. 39. ConsistencyIn the way visual objects are used#AndroidOpen
  40. 40. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  41. 41. PerformancePeople don’t have time to wait.#AndroidOpen
  42. 42. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  43. 43. TakeawaysInteractive elements should be visible, recognizable,reactive (feedback), safe, and consistent.#AndroidOpen
  44. 44. I know kung fu.AndroidOpen 2011#AndroidOpen
  45. 45. You do design alreadyWhether you know it or not.#AndroidOpen
  46. 46. #AndroidOpen
  47. 47. #AndroidOpen
  48. 48. #AndroidOpen
  49. 49. #AndroidOpen
  50. 50. PUSH HeARID10TLOL!!1!#AndroidOpen
  51. 51. Avoid This#AndroidOpen
  52. 52. Knowing your usersGet out and talk to people#AndroidOpen
  53. 53. Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html How many people you ask?#AndroidOpen
  54. 54. Who to interview?http://wingstoafrica.com/mali-pictures-part-2.html http://www.kenrockwell.com/katie/2008.htm http://good-times.webshots.com/photo/#AndroidOpen
  55. 55. What to say? Where to go?#AndroidOpen
  56. 56. Analyze your resultsTurn your results into findings.Summarize the findings in terms ofa set of agreed-upon design heuristics.#AndroidOpen
  57. 57. EXERCISE TWOUser goalsAnd what they mean to you#AndroidOpen
  58. 58. THE PERSONA Hilly Tonnerson • 19 - 45 years old • mobile developer • wants to meet other developers • has specific interests and questions • In this case, you can be the persona.#AndroidOpen
  59. 59. What do you want to leave the conference with?What do you like about conferences?What environment are you in?What do you hate about conferences?What’s a day during a conference like?Etc.#AndroidOpen
  60. 60. What we came up withWe’re here to present on design and developmentWe want to share our presentationWe want to easily answer questionsWe want presenting to be easierWe want to share more informationWe want to know when/where we’re presentingWe want to know who is attendingInclude people who can’t be here#AndroidOpen
  61. 61. EXERCISE THREEFeature BrainstormWhat’s the important stuff?#AndroidOpen
  62. 62. What we came up withA presenter’s assistant appControls the presentation with our phonePeople can ask questions from their phonePeople can “raise their hand”The phone vibrates when there’s a questionWe can control information being pushed to the web#AndroidOpen
  63. 63. Designing for AndroidJust a starting point#AndroidOpen
  64. 64. Know the deviceDimensions, orientation, sensors, inputs, etc.#AndroidOpen
  65. 65. Know the platformThis is not iOS, Windows Phone, webOS, etc.#AndroidOpen
  66. 66. Embrace touchPeople are using fingers, not cursorsContent as the interfaceMulti-touch and gesturesPhysical metaphors*#AndroidOpen
  67. 67. Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure#AndroidOpen
  68. 68. maisdcharlottes.blogspot.comContextWhat’s the physical or device environment?Usage patterns#AndroidOpen
  69. 69. Android GuidelinesA lot of the work has already been done for you.#AndroidOpen
  70. 70. When in doubtRefer to the guidelines#AndroidOpen
  71. 71. http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/#AndroidOpen
  72. 72. #AndroidOpen
  73. 73. “Rules” can be brokenThere’s unexplored territoryWe’re just at the beginning#AndroidOpen
  74. 74. EXERCISE FOURDesign a Conference AppUsing the powers you’ve been given.#AndroidOpen
  75. 75. Map out some ideasWhat are the screens? Where can the user “go”?#AndroidOpen
  76. 76. #AndroidOpen
  77. 77. Sketch out some screensCan’t sketch? Work with someone who can.#AndroidOpen
  78. 78. Here’s ours#AndroidOpen
  79. 79. Get feedbackValidate your sketches meet the goals.#AndroidOpen
  80. 80. What we heardHow can I see all the slides?How do I switch slides?Those icons don’t make senseHow do I know what slide I’m on?I think this would be usefulI think this would be distracting#AndroidOpen
  81. 81. Anyone want to share?Bueller? Bueller? Bueller?#AndroidOpen
  82. 82. You know what to build.Now, how can you build it.#AndroidOpen
  83. 83. ProductionTips For Realizing Visual Designs#AndroidOpen
  84. 84. Beautiful AndroidEric Burke (Square)11:35 MondayGrand Ballroom B#AndroidOpen
  85. 85. The source of pixelsWhat’s the toolset?#AndroidOpen
  86. 86. Adobe Fireworks#AndroidOpen
  87. 87. #AndroidOpen
  88. 88. VisibilityMenus and the Action Bar#AndroidOpen
  89. 89. showAsActionAvoid using “always”Provide an icon and “ifRoom|withText”#AndroidOpen
  90. 90. The Honeycomb Action Bar:Front to BackMark Murphy (CommonsWare)14:30 TuesdayGrand Ballroom B#AndroidOpen
  91. 91. 9 Patch vs. XMLA matter of designer-developer workflow#AndroidOpen
  92. 92. #AndroidOpen
  93. 93. #AndroidOpen
  94. 94. #AndroidOpen
  95. 95. <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_light_stripe" android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item>... #AndroidOpen
  96. 96. ... <item android:top="2px"> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_dark_stripe" android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item> ... #AndroidOpen
  97. 97. ... <item android:top="1px" android:bottom="1px"> <shape android:shape="rectangle"> <gradient android:angle="270" android:startColor="@color/button_color_top" android:centerColor="@color/button_color_middle" android:endColor="@color/button_color_bottom" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item></layer-list> #AndroidOpen
  98. 98. Multi-Screen DesignsWith Fragments and Resources#AndroidOpen
  99. 99. What devices to target?Try to get as much data as you can.#AndroidOpen
  100. 100. What devices to target?Try to get as much data as you can.#AndroidOpen
  101. 101. http://developer.android.com/resources/dashboard/platform-versions.html#AndroidOpen
  102. 102. Ice CreamSandwichIs Coming#AndroidOpen
  103. 103. Unified codebaseFor all devices#AndroidOpen
  104. 104. http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html#AndroidOpen
  105. 105. Phone layout<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <fragment class="com.example.android.TitlesFragment"              android:id="@+id/list_frag"              android:layout_width="match_parent"              android:layout_height="match_parent"/></FrameLayout>#AndroidOpen
  106. 106. Tablet layout<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="horizontal"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:id="@+id/frags">  <fragment class="com.example.android.TitlesFragment"            android:id="@+id/list_frag"            android:layout_width="@dimen/titles_size"            android:layout_height="match_parent"/>  <fragment class="com.example.android.DetailsFragment"            android:id="@+id/details_frag"            android:layout_width="match_parent"            android:layout_height="match_parent" /></LinearLayout>#AndroidOpen
  107. 107. /** This is a callback that the list fragment (Fragment A) calls    when a list item is selected */public void onItemSelected(int position) {  DisplayFragment fragB = (DisplayFragment) getFragmentManager()                              .findFragmentById(R.id.display_frag);  if (fragB == null) {      // DisplayFragment (Fragment B) is not in the layout,      // start DisplayActivity (Activity B)      // and pass it the info about the selected item      Intent intent = new Intent(this, DisplayActivity.class);      intent.putExtra("position", position);      startActivity(intent);  } else {      // DisplayFragment (Fragment B) is in the layout, tell it to update      fragB.updateContent(position);  }}#AndroidOpen
  108. 108. res/layout/main_activity.xml # For phones res/layout-sw600dp/main_activity.xml # 7” tablets res/layout-sw720dp/main_activity.xml # 10” tabletshttp://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html #AndroidOpen
  109. 109. RTFSrepo and exploring how google does it#AndroidOpen
  110. 110. http://source.android.com#AndroidOpen
  111. 111. http://androiddrawableexplorer.appspot.com/ #AndroidOpen
  112. 112. Questions?#AndroidOpen
  113. 113. Tony Hillerson @thillersonThanks! Juan Sanchez @juansanchez effectiveui.com#AndroidOpen ©2011 EffectiveUI
  1. A particular slide catching your eye?

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

×