Designing an App: From Idea to Market
•
6 likes•1,111 views
Effective UI’s Tony Hillerson and Juan Sanchez presented “Designing an App: From Idea to Market” at Android Open in October 2011. They cover best practices for desiging an Android app that offers a good user experience.
Report
Share
Designing an App: From Idea to Market
- 1. Designing an App From Idea to Market Tony Hillerson Juan Sanchez Software Architect Experience Architect #AndroidOpen ©2011 EffectiveUI
- 2. EffectiveUI Tony Hillerson Juan Sanchez User 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_Earth Overview We’re going on a journey. AndroidOpen 2011 #AndroidOpen
- 4. Who are you? Designer, developer, both? #AndroidOpen
- 5. EXERCISE ONE Design a Conference App Like 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 speed This will only hurt a little. #AndroidOpen
- 11. #AndroidOpen
- 12. Interaction Design Exposing intent through actions and feedback. #AndroidOpen
- 13. Process Magic Form Substance #AndroidOpen
- 14. People think it's this veneer - that the designers are handed this box and told, 'Make it look good!'. That's not what we think design is. It's not just what 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 Design Use what people know from their environment. #AndroidOpen
- 17. #AndroidOpen
- 19. Conceptual Model The “model” a user of a system builds to reason about a system #AndroidOpen
- 20. Visibility Cues between the design of an object and its operation #AndroidOpen
- 21. #AndroidOpen
- 22. #AndroidOpen
- 23. #AndroidOpen
- 24. #AndroidOpen
- 25. Affordance Perception that something can be interacted with #AndroidOpen
- 26. #AndroidOpen
- 27. #AndroidOpen
- 28. #AndroidOpen
- 29. Feedback The effect of user actions should be obvious #AndroidOpen
- 33. Mapping A relation between intentions and possible actions and between actions and their effect on a system or device #AndroidOpen
- 36. Constraints Preventing errors before they can occur #AndroidOpen
- 37. #AndroidOpen
- 38. #AndroidOpen
- 39. Consistency In the way visual objects are used #AndroidOpen
- 41. Performance People don’t have time to wait. #AndroidOpen
- 43. Takeaways Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent. #AndroidOpen
- 44. I know kung fu. AndroidOpen 2011 #AndroidOpen
- 45. You do design already Whether you know it or not. #AndroidOpen
- 46. #AndroidOpen
- 47. #AndroidOpen
- 48. #AndroidOpen
- 49. #AndroidOpen
- 51. Avoid This #AndroidOpen
- 52. Knowing your users Get 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 results Turn your results into findings. Summarize the findings in terms of a set of agreed-upon design heuristics. #AndroidOpen
- 57. EXERCISE TWO User goals And 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 with We’re here to present on design and development We want to share our presentation We want to easily answer questions We want presenting to be easier We want to share more information We want to know when/where we’re presenting We want to know who is attending Include people who can’t be here #AndroidOpen
- 61. EXERCISE THREE Feature Brainstorm What’s the important stuff? #AndroidOpen
- 62. What we came up with A presenter’s assistant app Controls the presentation with our phone People can ask questions from their phone People can “raise their hand” The phone vibrates when there’s a question We can control information being pushed to the web #AndroidOpen
- 63. Designing for Android Just a starting point #AndroidOpen
- 64. Know the device Dimensions, orientation, sensors, inputs, etc. #AndroidOpen
- 65. Know the platform This is not iOS, Windows Phone, webOS, etc. #AndroidOpen
- 66. Embrace touch People are using fingers, not cursors Content as the interface Multi-touch and gestures Physical metaphors* #AndroidOpen
- 67. Give each screen a purpose Animation and transitions Just-in-time content Depth and space Progressive disclosure #AndroidOpen
- 68. maisdcharlottes.blogspot.com Context What’s the physical or device environment? Usage patterns #AndroidOpen
- 69. Android Guidelines A lot of the work has already been done for you. #AndroidOpen
- 70. When in doubt Refer to the guidelines #AndroidOpen
- 72. #AndroidOpen
- 73. “Rules” can be broken There’s unexplored territory We’re just at the beginning #AndroidOpen
- 74. EXERCISE FOUR Design a Conference App Using the powers you’ve been given. #AndroidOpen
- 75. Map out some ideas What are the screens? Where can the user “go”? #AndroidOpen
- 76. #AndroidOpen
- 77. Sketch out some screens Can’t sketch? Work with someone who can. #AndroidOpen
- 79. Get feedback Validate your sketches meet the goals. #AndroidOpen
- 80. What we heard How can I see all the slides? How do I switch slides? Those icons don’t make sense How do I know what slide I’m on? I think this would be useful I 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. Production Tips For Realizing Visual Designs #AndroidOpen
- 84. Beautiful Android Eric Burke (Square) 11:35 Monday Grand Ballroom B #AndroidOpen
- 85. The source of pixels What’s the toolset? #AndroidOpen
- 87. #AndroidOpen
- 88. Visibility Menus and the Action Bar #AndroidOpen
- 89. showAsAction Avoid using “always” Provide an icon and “ifRoom|withText” #AndroidOpen
- 90. The Honeycomb Action Bar: Front to Back Mark Murphy (CommonsWare) 14:30 Tuesday Grand Ballroom B #AndroidOpen
- 91. 9 Patch vs. XML A 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 Designs With 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
- 103. Unified codebase For all devices #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” tablets http://android-developers.blogspot.com/2011/07/new-tools-for- managing-screen-sizes.html #AndroidOpen
- 109. RTFS repo and exploring how google does it #AndroidOpen
- 113. Tony Hillerson @thillerson Thanks! Juan Sanchez @juansanchez effectiveui.com #AndroidOpen ©2011 EffectiveUI