designing an android app from idea to market

#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://source.android.com

#AndroidOpen

http://androiddrawableexplorer.appspot.com/

#AndroidOpen

Questions?

#AndroidOpen

Tony Hillerson@thillerson

Juan Sanchez@juansanchez

effectiveui.com

Thanks!

©2011 EffectiveUI