• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing an Android App from Idea to Market

Designing an Android App from Idea to Market



Originally presented by Juan Sanchez and Tony Hillerson at AnDevCon III.

Originally presented by Juan Sanchez and Tony Hillerson at AnDevCon III.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Designing an Android App from Idea to Market Designing an Android App from Idea to Market Presentation Transcript

    • Designing an Appfrom Idea to Market PRESENTATION ANDEVCON • MAY 14, 2012
    • A LITTLE ABOUT USJuan Sanchez Tony HillersonDesigner & Partner Software Architect & Partner Mobile design and development company based in Denver, CO.• Creating Visual Experiences • Flex on Rails• Co-creator of FieldTest • Co-creator of FieldTest @tackmobile• Senior Editor for UX Magazine • O’Reilly Screencasts tackmobile.com@juansanchez @thillersonjuan@tackmobile.com tony@tackmobile.comPRESENTATION tackmobile.com
    • WHO ARE YOU?• Developer• Designer• Entrepreneur• Etc.PRESENTATION tackmobile.com
    • WHAT ARE WE TALKING ABOUT?• Defining User Goals• Design Concepts• Translating Pixels• Development Tactics• Measurement & FeedbackWe’ll be doing group exercises.PRESENTATION tackmobile.com
    • EXERCISE 1 Design an App for AnDevConPRESENTATION tackmobile.com
    • THE FEATURES• Chat• Take Pictures Edit Profile GO!•• View Schedule• See a Map• Check Weather• Scan QR Code• Watch Video• Review SlidesPRESENTATION tackmobile.com
    • Who wants to share?PRESENTATION tackmobile.com
    • A successful app is more than a list of features.PRESENTATION ANDEVCON • MAY 14, 2012
    • Building an app is a process.PRESENTATION tackmobile.com
    • THE ODDS ARE AGAINST YOU• Timeline• Budget• Scope• ResourcesPRESENTATION tackmobile.com
    • 68% of IT projects fail.PRESENTATION tackmobile.com
    • You can succeed but it’s a series of successes.PRESENTATION tackmobile.com
    • A lot happens before code is written and pixels are pushed.PRESENTATION ANDEVCON • MAY 14, 2012
    • THERE’S SO MUCH TO LEARN• who are your users?• a current app?• an existing brand?• IT infrastructure already in place?• 20 stakeholders?• established content?PRESENTATION tackmobile.com
    • WHAT ARE THE OBJECTIVES?• increased business?• increased brand awareness?• increased users?• increased user engagement?PRESENTATION tackmobile.com
    • Ask questions.PRESENTATION tackmobile.com
    • WHO ARE YOUR USERS? images © Jason TravisPRESENTATION tackmobile.com
    • KNOW YOUR USER• what’s their digital ecology?• what’s the demographic?• what are they trying to accomplish?• how can you make that easier?• where do you fit in?PRESENTATION tackmobile.com
    • Referred to as personas.PRESENTATION tackmobile.com
    • EXERCISE 2 Let’s create a persona.PRESENTATION tackmobile.com
    • QUESTIONS: AS A CONFERENCE GOER• what is the age range?• what do you do?• what devices do you use?• how many events do you go to?• are you here with a group?PRESENTATION tackmobile.com
    • OUR PERSONA IS.... Hilly Tonnerson • Male, 19 - 45 years old • mobile developer • presenting on Android topics • relies on his Nexus SPRESENTATION tackmobile.com
    • Your persona(s) should be present throughout the process.PRESENTATION tackmobile.com
    • Defining what to build is the hardest part.PRESENTATION ANDEVCON • MAY 14, 2012
    • http://www.gogamestorm.com/FIGURING IT OUT• definition exercises• proofs of concept• user interviews• sketching• prototyping• wireframesPRESENTATION tackmobile.com
    • FIGURING IT OUTvia http://www.gogamestorm.com/?p=855 picture taken by Dave Gray http://www.davegrayinfo.com/ PRESENTATION tackmobile.com
    • This process isn’t meant to be pretty.PRESENTATION tackmobile.com
    • EXERCISE 3 Define user goals and featuresPRESENTATION tackmobile.com
    • QUESTIONS: USER GOALS• what do you want to leave with?• what do you like about conferences?• what environment are you in?• what bothers you about conferences?• what’s your day at a conference like?PRESENTATION tackmobile.com
    • Answers will help define the “what”.PRESENTATION tackmobile.com
    • SOME OF OUR GOALS ARE...• we’re here to present• we want presenting to be easier• we want to share information• want to know our audience• we want to be able to interact with attendees without disruptionPRESENTATION tackmobile.com
    • Based on the “what”, define the “how”.PRESENTATION tackmobile.com
    • OUR FEATURES• a presenter’s assistant app• control the presentation• people can ask questions• people can raise their hand• vibrates when there’s a questionsPRESENTATION tackmobile.com
    • Interaction DesignPRESENTATION ANDEVCON • MAY 14, 2012
    • Design is how it works. Steve JobsPRESENTATION tackmobile.com
    • This is just stupid. A UserPRESENTATION tackmobile.com
    • Why? What can we do to make it better?PRESENTATION tackmobile.com
    • DON NORMAN’S DESIGN VOCABULARY• Visibility• Affordances• Feedback• Mapping• Constraint• ConsistencyPRESENTATION tackmobile.com
    • NATURAL DESIGN Use what people know from their environment.PRESENTATION tackmobile.com
    • NATURAL DESIGN http://www.subtraction.com/2011/03/28/an-illustration-for-stack-americaPRESENTATION tackmobile.com
    • Natural Design ≠ SkeumorphismPRESENTATION tackmobile.com
    • It doesn’t have to have to look like something that already exists.PRESENTATION tackmobile.com
    • UNIVERSAL PRINCIPLES• Physics• Gravity• Friction• Constraints• SpacePRESENTATION tackmobile.com
    • CONCEPTUAL MODEL The “model” a user of a system builds to reason about a systemPRESENTATION tackmobile.com
    • CONCEPTUAL MODEL• The user sees the interface, and that leads them to reason about the system behind it.• The interface can simplify the actual systemPRESENTATION tackmobile.com
    • CONCEPTUAL MODEL • Hm, that looks like a brush stroke • I can change the brush size • I can change the texture of the brush • Wow, this preview updates. Snap! Gosh I love technologyPRESENTATION tackmobile.com
    • VISIBILITY Cues between the design of an object and its operationPRESENTATION tackmobile.com
    • AFFORDANCE Perception that something can be interacted withPRESENTATION tackmobile.com
    • FEEDBACK The effect of user actions should be obviousPRESENTATION tackmobile.com
    • FEEDBACKPRESENTATION tackmobile.com
    • FEEDBACKPRESENTATION tackmobile.com
    • MAPPING A relation between intentions and possible actions and between actions and their effect on a system or devicePRESENTATION tackmobile.com
    • MAPPINGPRESENTATION tackmobile.com
    • MAPPING • I can find my friends • Oh look, pictures I can slide • I wonder if I have notificationsPRESENTATION tackmobile.com
    • CONSTRAINTS Preventing errors before they can occurPRESENTATION tackmobile.com
    • CONSISTENCY The way visual objects are usedPRESENTATION tackmobile.com
    • How does this apply to mobile?PRESENTATION tackmobile.com
    • KNOW THE DEVICE• dimensions• orientation• sensors• inputs• etc.PRESENTATION tackmobile.com
    • KNOW THE PLATFORM• this is not iOS• this is not WP7• this is not WebOS• etc.PRESENTATION tackmobile.com
    • STAY TRUE TO ANDROID concept by Guenther BeyerPRESENTATION tackmobile.com
    • MAKE IT FAST• performance• the illusion of fast• optimizePRESENTATION tackmobile.com
    • UPLOADING A PICTURE Instagram dudes https://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-designPRESENTATION tackmobile.com
    • EMBRACE TOUCH• people are using fingers, not cursors• content as interface• multi-touch and gestures• physical metaphorsPRESENTATION tackmobile.com
    • A RULE OF THUMB• 44pt for touch• 30pt minimum• Small items should still have decent hit areasPRESENTATION tackmobile.com
    • GIVE EACH SCREEN A PURPOSE• what’s most important?• learn to eliminate• content vs. controls• smaller doesn’t mean it should do lessPRESENTATION tackmobile.com
    • ANIMATION & TRANSITIONS• the illusion of faster• just-in-time content• progressive disclosure• depth and space• guidancePRESENTATION tackmobile.com
    • A lot of work has already been done.PRESENTATION tackmobile.com
    • ANDROID GUIDELINES http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.htmlPRESENTATION tackmobile.com
    • ANDROID DESIGN http://developer.android.com/design/PRESENTATION tackmobile.com
    • maisdcharlottes.blogspot.comCONTEXT• what’s the environment?• what’s the weather?• what time is it?• what’s the device environment?• what are the usage patterns?PRESENTATION tackmobile.com
    • WORKING WITH CONTENT• use real content• try avoiding lorem ipsum• know what you really have to work withPRESENTATION tackmobile.com
    • DON’T FORGET TO PLAY• interface origami• video games• real world examples• bend the rules• swing by Best Buy• this is just the beginningPRESENTATION tackmobile.com
    • Details, details, details.PRESENTATION tackmobile.com
    • Android can be beautiful.PRESENTATION tackmobile.com
    • EXERCISE 4 Design an app for AnDevCon.PRESENTATION tackmobile.com
    • DESCRIBE A FLOW• focus on a task• what are the screens?• what’s the flow?• where can the user go?PRESENTATION tackmobile.com
    • MAP IT OUTPRESENTATION tackmobile.com
    • SKETCH OUT YOUR IDEAS• pick one screen and sketch it out• or, do multiple and describe how a user accomplishes a taskPRESENTATION tackmobile.com
    • THE FEATURES REVISITED• a presenter’s assistant app• control the presentation• people can ask questions• people can raise their hand• vibrates when there’s a questions• control information being pushed to the webPRESENTATION tackmobile.com
    • HERE’S OURS• slides on top• view notes• view questions• share information• time checkPRESENTATION tackmobile.com
    • Now what?PRESENTATION tackmobile.com
    • WIREFRAMES• content• structure• interactions• flowPRESENTATION tackmobile.com
    • VISUAL DESIGN• branding • layout• color • hierarchy• typography • spacing• animation • affordancePRESENTATION tackmobile.com
    • MORE RESEARCH• get feedback through iterations• test assumptions• doesn’t have to be for the entire app• test specific things• early and oftenPRESENTATION tackmobile.com
    • WHO TO INTERVIEW? images © Jason TravisPRESENTATION tackmobile.com
    • YOU DON’T NEED A FINISHED APPimage via A List Apart article by Shawn Medero PRESENTATION tackmobile.com
    • ANALYZE YOUR RESULTS• content• structure• interactions• flowPRESENTATION tackmobile.com
    • EXERCISE 5 Get feedback on your sketches.PRESENTATION tackmobile.com
    • WHAT WE HEARD• how can I see all the slides?• how do I switch slides?• the 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 distractingPRESENTATION tackmobile.com
    • Who wants to share?PRESENTATION tackmobile.com
    • DevelopmentPRESENTATION ANDEVCON • MAY 14, 2012
    • You know what to build, but how?PRESENTATION tackmobile.com
    • OUR DESIGNPRESENTATION tackmobile.com
    • TRANSLATING PIXELS• what’s the source? Photoshop?• what is vector, what is bitmap?• can you use out-of-the-box components?PRESENTATION tackmobile.com
    • 9 PATCH VS. XMLPRESENTATION tackmobile.com
    • CODE<?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>...PRESENTATION tackmobile.com
    • CODE ... <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>... PRESENTATION tackmobile.com
    • CODE ... <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> PRESENTATION tackmobile.com
    • It’s a multi-screen world.PRESENTATION tackmobile.com
    • WHAT TO TARGET http://developer.android.com/resources/dashboard/platform-versions.htmlPRESENTATION tackmobile.com
    • Unified code base for all devices.PRESENTATION tackmobile.com
    • 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>PRESENTATION tackmobile.com
    • 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>PRESENTATION tackmobile.com
    • CODE /** 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);   } }PRESENTATION tackmobile.com
    • RESOURCES 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.htmlPRESENTATION tackmobile.com
    • SEE HOW GOOGLE DOES IT• RTFS• source.android.com• androiddrawableexplorer.appspot.comPRESENTATION tackmobile.com
    • DRAWABLE EXPLORER androiddrawableexplorer.appspot.comPRESENTATION tackmobile.com
    • GO SEE JOSHUAAdvanced Design Implementation• Tuesday• 4:00 pm - 5:15 pm• Joshua JamisonPRESENTATION tackmobile.com
    • It’s a lot, we know.PRESENTATION ANDEVCON • MAY 14, 2012
    • Questions?PRESENTATION tackmobile.com
    • Thanks!@juansanchez@thillerson@tackmobiletackmobile.com