#AndroidOpen Designing an App From Idea to Market Tony Hillerson Software Architect Juan Sanchez Experience Architect ©2011 EffectiveUI
May 19, 2015
#AndroidOpen
Designing an AppFrom Idea to Market
Tony HillersonSoftware Architect
Juan SanchezExperience Architect
©2011 EffectiveUI
#AndroidOpen
EffectiveUIUser Experience Agency
@effectiveui
Tony HillersonSoftware Architect
@thillerson
“Building Android Apps with Java”
Juan SanchezExperience Architect
@juansanchez
“Creating Visual Experiences with Flex 3.0”
#AndroidOpen
OverviewWe’re going on a journey.
AndroidOpen 2011
http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_Earth
#AndroidOpen
Who are you?Designer, developer, both?
#AndroidOpen
EXERCISE ONE
Design 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• Review slides
#AndroidOpen
The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides
#AndroidOpen
Too many features!What should the app do?
#AndroidOpen
Getting up to speedThis will only hurt a little.
#AndroidOpenAndroidOpen 2011
What?
#AndroidOpen
#AndroidOpen
Interaction DesignExposing intent through actions and feedback.
#AndroidOpen
Magic
Form Substance
Process
#AndroidOpen
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
Don Norman’s Design Vocabulary
VisibilityAffordancesFeedbackMappingConstraintConsistency
#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 a system
#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 and between actions and their effect on a system or device
#AndroidOpen
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.
#AndroidOpenAndroidOpen 2011
I know kung fu.
#AndroidOpen
You do design alreadyWhether you know it or not.
#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
#AndroidOpen
PUSH HeAR ID10T LOL!!1!
#AndroidOpen
Avoid This
#AndroidOpen
Knowing your usersGet out and talk to people
#AndroidOpen
How many people you ask?
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
#AndroidOpen
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
What to say? Where to go?
#AndroidOpen
Analyze your resultsTurn your results into findings.Summarize the findings in terms of a set of agreed-upon design heuristics.
#AndroidOpen
EXERCISE TWO
User goalsAnd what they mean to you
#AndroidOpen
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
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
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
EXERCISE THREE
Feature 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 phonePeople can “raise their hand”The phone vibrates when there’s a questionWe can control information being pushed to the web
#AndroidOpen
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*
#AndroidOpen
Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure
#AndroidOpen
ContextWhat’s the physical or device environment?Usage patterns
maisdcharlottes.blogspot.com
#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 FOUR
Design 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 on?I think this would be usefulI think this would be distracting
#AndroidOpen
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
Visibility Menus and the Action Bar
#AndroidOpen
showAsAction Avoid 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> <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
... <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
... <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
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 Cream Sandwich Is Coming
#AndroidOpen
Unified codebaseFor all devices
#AndroidOpen
http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html
#AndroidOpen
<?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>
Phone layout
#AndroidOpen
<?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>
Tablet layout
#AndroidOpen
/** 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
res/layout/main_activity.xml # For phonesres/layout-sw600dp/main_activity.xml # 7” tabletsres/layout-sw720dp/main_activity.xml # 10” tablets
http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html
#AndroidOpen
RTFSrepo and exploring how google does it
#AndroidOpen
http://androiddrawableexplorer.appspot.com/
#AndroidOpen
Questions?
#AndroidOpen
Tony Hillerson@thillerson
Juan Sanchez@juansanchez
effectiveui.com
Thanks!
©2011 EffectiveUI