Designing an Android App from Idea to Market

  • 4,655 views
Uploaded on

 

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

Views

Total Views
4,655
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
105
Comments
0
Likes
6

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 an AppFrom Idea to MarketTony Hillerson Juan SanchezSoftware Architect Experience Architect#AndroidOpen ©2011 EffectiveUI
  • 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. http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_EarthOverviewWe’re going on a journey.AndroidOpen 2011#AndroidOpen
  • 4. Who are you?Designer, developer, both?#AndroidOpen
  • 5. EXERCISE ONEDesign a Conference AppLike for this conference#AndroidOpen
  • 6. The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides#AndroidOpen
  • 7. The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides#AndroidOpen
  • 8. Too many features!What should the app do?#AndroidOpen
  • 9. Getting up to speedThis will only hurt a little.#AndroidOpen
  • 10. What?AndroidOpen 2011#AndroidOpen
  • 11. #AndroidOpen
  • 12. Interaction DesignExposing intent through actions and feedback.#AndroidOpen
  • 13. Process Magic Form Substance#AndroidOpen
  • 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. Don Norman’s Design Vocabulary Visibility Affordances Feedback Mapping Constraint Consistency#AndroidOpen
  • 16. Natural DesignUse what people know from their environment.#AndroidOpen
  • 17. #AndroidOpen
  • 18. http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america#AndroidOpen
  • 19. Conceptual ModelThe “model” a user of a system builds to reason about asystem#AndroidOpen
  • 20. VisibilityCues between the design of an object and its operation#AndroidOpen
  • 21. #AndroidOpen
  • 22. #AndroidOpen
  • 23. #AndroidOpen
  • 24. #AndroidOpen
  • 25. AffordancePerception that something can be interacted with#AndroidOpen
  • 26. #AndroidOpen
  • 27. #AndroidOpen
  • 28. #AndroidOpen
  • 29. FeedbackThe effect of user actions should be obvious#AndroidOpen
  • 30. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  • 31. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  • 32. http://www.flickr.com/photos/meganbarton/3023756556/#AndroidOpen
  • 33. MappingA relation between intentions and possible actions andbetween actions and their effect on a system or device#AndroidOpen
  • 34. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  • 35. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  • 36. ConstraintsPreventing errors before they can occur#AndroidOpen
  • 37. #AndroidOpen
  • 38. #AndroidOpen
  • 39. ConsistencyIn the way visual objects are used#AndroidOpen
  • 40. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  • 41. PerformancePeople don’t have time to wait.#AndroidOpen
  • 42. http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen
  • 43. TakeawaysInteractive elements should be visible, recognizable,reactive (feedback), safe, and consistent.#AndroidOpen
  • 44. I know kung fu.AndroidOpen 2011#AndroidOpen
  • 45. You do design alreadyWhether you know it or not.#AndroidOpen
  • 46. #AndroidOpen
  • 47. #AndroidOpen
  • 48. #AndroidOpen
  • 49. #AndroidOpen
  • 50. PUSH HeARID10TLOL!!1!#AndroidOpen
  • 51. Avoid This#AndroidOpen
  • 52. Knowing your usersGet out and talk to people#AndroidOpen
  • 53. Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html How many people you ask?#AndroidOpen
  • 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. What to say? Where to go?#AndroidOpen
  • 56. Analyze your resultsTurn your results into findings.Summarize the findings in terms ofa set of agreed-upon design heuristics.#AndroidOpen
  • 57. EXERCISE TWOUser goalsAnd what they mean to you#AndroidOpen
  • 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. 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. 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. EXERCISE THREEFeature BrainstormWhat’s the important stuff?#AndroidOpen
  • 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. Designing for AndroidJust a starting point#AndroidOpen
  • 64. Know the deviceDimensions, orientation, sensors, inputs, etc.#AndroidOpen
  • 65. Know the platformThis is not iOS, Windows Phone, webOS, etc.#AndroidOpen
  • 66. Embrace touchPeople are using fingers, not cursorsContent as the interfaceMulti-touch and gesturesPhysical metaphors*#AndroidOpen
  • 67. Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure#AndroidOpen
  • 68. maisdcharlottes.blogspot.comContextWhat’s the physical or device environment?Usage patterns#AndroidOpen
  • 69. Android GuidelinesA lot of the work has already been done for you.#AndroidOpen
  • 70. When in doubtRefer to the guidelines#AndroidOpen
  • 71. http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/#AndroidOpen
  • 72. #AndroidOpen
  • 73. “Rules” can be brokenThere’s unexplored territoryWe’re just at the beginning#AndroidOpen
  • 74. EXERCISE FOURDesign a Conference AppUsing the powers you’ve been given.#AndroidOpen
  • 75. Map out some ideasWhat are the screens? Where can the user “go”?#AndroidOpen
  • 76. #AndroidOpen
  • 77. Sketch out some screensCan’t sketch? Work with someone who can.#AndroidOpen
  • 78. Here’s ours#AndroidOpen
  • 79. Get feedbackValidate your sketches meet the goals.#AndroidOpen
  • 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. Anyone want to share?Bueller? Bueller? Bueller?#AndroidOpen
  • 82. You know what to build.Now, how can you build it.#AndroidOpen
  • 83. ProductionTips For Realizing Visual Designs#AndroidOpen
  • 84. Beautiful AndroidEric Burke (Square)11:35 MondayGrand Ballroom B#AndroidOpen
  • 85. The source of pixelsWhat’s the toolset?#AndroidOpen
  • 86. Adobe Fireworks#AndroidOpen
  • 87. #AndroidOpen
  • 88. VisibilityMenus and the Action Bar#AndroidOpen
  • 89. showAsActionAvoid using “always”Provide an icon and “ifRoom|withText”#AndroidOpen
  • 90. The Honeycomb Action Bar:Front to BackMark Murphy (CommonsWare)14:30 TuesdayGrand Ballroom B#AndroidOpen
  • 91. 9 Patch vs. XMLA matter of designer-developer workflow#AndroidOpen
  • 92. #AndroidOpen
  • 93. #AndroidOpen
  • 94. #AndroidOpen
  • 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. ... <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. ... <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. Multi-Screen DesignsWith Fragments and Resources#AndroidOpen
  • 99. What devices to target?Try to get as much data as you can.#AndroidOpen
  • 100. What devices to target?Try to get as much data as you can.#AndroidOpen
  • 101. http://developer.android.com/resources/dashboard/platform-versions.html#AndroidOpen
  • 102. Ice CreamSandwichIs Coming#AndroidOpen
  • 103. Unified codebaseFor all devices#AndroidOpen
  • 104. http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html#AndroidOpen
  • 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. 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. /** 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. 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. RTFSrepo and exploring how google does it#AndroidOpen
  • 110. http://source.android.com#AndroidOpen
  • 111. http://androiddrawableexplorer.appspot.com/ #AndroidOpen
  • 112. Questions?#AndroidOpen
  • 113. Tony Hillerson @thillersonThanks! Juan Sanchez @juansanchez effectiveui.com#AndroidOpen ©2011 EffectiveUI