Designing an Android App: From Idea to Market

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

http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_EarthOverviewWe’re going on a journey.AndroidOpen 2011#AndroidOpen

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• Review slides#AndroidOpen

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 design is. Its not justwhat it looks like and feels like.Design is how it works.Steve Jobs#AndroidOpen

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

AffordancePerception that something can be interacted with#AndroidOpen

#AndroidOpen

FeedbackThe effect of user actions should be obvious#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#AndroidOpen

http://www.flickr.com/photos/docsearls/181012863/#AndroidOpen

ConstraintsPreventing errors before they can occur#AndroidOpen

#AndroidOpen

ConsistencyIn the way visual objects are used#AndroidOpen

PerformancePeople don’t have time to wait.#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

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?#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 ofa set of agreed-upon design heuristics.#AndroidOpen

EXERCISE TWOUser 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 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 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

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 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

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

<?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

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" 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

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

/** 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 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

RTFSrepo and exploring how google does it#AndroidOpen

http://source.android.com#AndroidOpen

http://androiddrawableexplorer.appspot.com/ #AndroidOpen

Questions?#AndroidOpen

Designing an Android App: From Idea to Market

by EffectiveUI

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 19

Statistics

Designing an Android App: From Idea to Market Presentation Transcript