designing an android app from idea to market

113
#AndroidOpen Designing an App From Idea to Market Tony Hillerson Software Architect Juan Sanchez Experience Architect ©2011 EffectiveUI

Upload: tony-hillerson

Post on 19-May-2015

4.776 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Designing an Android App from Idea to Market

#AndroidOpen

Designing an AppFrom Idea to Market

Tony HillersonSoftware Architect

Juan SanchezExperience Architect

©2011 EffectiveUI

Page 2: Designing an Android App from Idea to Market

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

Page 3: Designing an Android App from Idea to Market

#AndroidOpen

OverviewWe’re going on a journey.

AndroidOpen 2011

http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_Earth

Page 4: Designing an Android App from Idea to Market

#AndroidOpen

Who are you?Designer, developer, both?

Page 5: Designing an Android App from Idea to Market

#AndroidOpen

EXERCISE ONE

Design a Conference AppLike for this conference

Page 6: Designing an Android App from Idea to Market

#AndroidOpen

The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides

Page 7: Designing an Android App from Idea to Market

#AndroidOpen

The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides

Page 8: Designing an Android App from Idea to Market

#AndroidOpen

Too many features!What should the app do?

Page 9: Designing an Android App from Idea to Market

#AndroidOpen

Getting up to speedThis will only hurt a little.

Page 10: Designing an Android App from Idea to Market

#AndroidOpenAndroidOpen 2011

What?

Page 11: Designing an Android App from Idea to Market

#AndroidOpen

Page 12: Designing an Android App from Idea to Market

#AndroidOpen

Interaction DesignExposing intent through actions and feedback.

Page 13: Designing an Android App from Idea to Market

#AndroidOpen

Magic

Form Substance

Process

Page 14: Designing an Android App from Idea to Market

#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

Page 15: Designing an Android App from Idea to Market

#AndroidOpen

Don Norman’s Design Vocabulary

VisibilityAffordancesFeedbackMappingConstraintConsistency

Page 16: Designing an Android App from Idea to Market

#AndroidOpen

Natural DesignUse what people know from their environment.

Page 17: Designing an Android App from Idea to Market

#AndroidOpen

Page 18: Designing an Android App from Idea to Market

#AndroidOpen

http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america

Page 19: Designing an Android App from Idea to Market

#AndroidOpen

Conceptual ModelThe “model” a user of a system builds to reason about a system

Page 20: Designing an Android App from Idea to Market

#AndroidOpen

VisibilityCues between the design of an object and its operation

Page 21: Designing an Android App from Idea to Market

#AndroidOpen

Page 22: Designing an Android App from Idea to Market

#AndroidOpen

Page 23: Designing an Android App from Idea to Market

#AndroidOpen

Page 24: Designing an Android App from Idea to Market

#AndroidOpen

Page 25: Designing an Android App from Idea to Market

#AndroidOpen

AffordancePerception that something can be interacted with

Page 26: Designing an Android App from Idea to Market

#AndroidOpen

Page 27: Designing an Android App from Idea to Market

#AndroidOpen

Page 28: Designing an Android App from Idea to Market

#AndroidOpen

Page 29: Designing an Android App from Idea to Market

#AndroidOpen

FeedbackThe effect of user actions should be obvious

Page 30: Designing an Android App from Idea to Market

#AndroidOpen

http://www.flickr.com/photos/meganbarton/3023756556/

Page 31: Designing an Android App from Idea to Market

#AndroidOpen

http://www.flickr.com/photos/meganbarton/3023756556/

Page 32: Designing an Android App from Idea to Market

#AndroidOpen

http://www.flickr.com/photos/meganbarton/3023756556/

Page 33: Designing an Android App from Idea to Market

#AndroidOpen

MappingA relation between intentions and possible actions and between actions and their effect on a system or device

Page 34: Designing an Android App from Idea to Market

#AndroidOpen

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

Page 35: Designing an Android App from Idea to Market

#AndroidOpen

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

Page 36: Designing an Android App from Idea to Market

#AndroidOpen

ConstraintsPreventing errors before they can occur

Page 37: Designing an Android App from Idea to Market

#AndroidOpen

Page 38: Designing an Android App from Idea to Market

#AndroidOpen

Page 39: Designing an Android App from Idea to Market

#AndroidOpen

ConsistencyIn the way visual objects are used

Page 40: Designing an Android App from Idea to Market

#AndroidOpen

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

Page 41: Designing an Android App from Idea to Market

#AndroidOpen

PerformancePeople don’t have time to wait.

Page 42: Designing an Android App from Idea to Market

#AndroidOpen

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

Page 43: Designing an Android App from Idea to Market

#AndroidOpen

TakeawaysInteractive elements should be visible, recognizable, reactive (feedback), safe, and consistent.

Page 44: Designing an Android App from Idea to Market

#AndroidOpenAndroidOpen 2011

I know kung fu.

Page 45: Designing an Android App from Idea to Market

#AndroidOpen

You do design alreadyWhether you know it or not.

Page 46: Designing an Android App from Idea to Market

#AndroidOpen

Page 47: Designing an Android App from Idea to Market

#AndroidOpen

Page 48: Designing an Android App from Idea to Market

#AndroidOpen

Page 49: Designing an Android App from Idea to Market

#AndroidOpen

Page 50: Designing an Android App from Idea to Market

#AndroidOpen

PUSH HeAR ID10T LOL!!1!

Page 51: Designing an Android App from Idea to Market

#AndroidOpen

Avoid This

Page 52: Designing an Android App from Idea to Market

#AndroidOpen

Knowing your usersGet out and talk to people

Page 53: Designing an Android App from Idea to Market

#AndroidOpen

How many people you ask?

Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html

Page 55: Designing an Android App from Idea to Market

#AndroidOpen

What to say? Where to go?

Page 56: Designing an Android App from Idea to Market

#AndroidOpen

Analyze your resultsTurn your results into findings.Summarize the findings in terms of a set of agreed-upon design heuristics.

Page 57: Designing an Android App from Idea to Market

#AndroidOpen

EXERCISE TWO

User goalsAnd what they mean to you

Page 58: Designing an Android App from Idea to Market

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

Page 59: Designing an Android App from Idea to Market

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

Page 60: Designing an Android App from Idea to Market

#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

Page 61: Designing an Android App from Idea to Market

#AndroidOpen

EXERCISE THREE

Feature BrainstormWhat’s the important stuff?

Page 62: Designing an Android App from Idea to Market

#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

Page 63: Designing an Android App from Idea to Market

#AndroidOpen

Designing for AndroidJust a starting point

Page 64: Designing an Android App from Idea to Market

#AndroidOpen

Know the deviceDimensions, orientation, sensors, inputs, etc.

Page 65: Designing an Android App from Idea to Market

#AndroidOpen

Know the platformThis is not iOS, Windows Phone, webOS, etc.

Page 66: Designing an Android App from Idea to Market

#AndroidOpen

Embrace touchPeople are using fingers, not cursorsContent as the interfaceMulti-touch and gesturesPhysical metaphors*

Page 67: Designing an Android App from Idea to Market

#AndroidOpen

Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure

Page 68: Designing an Android App from Idea to Market

#AndroidOpen

ContextWhat’s the physical or device environment?Usage patterns

maisdcharlottes.blogspot.com

Page 69: Designing an Android App from Idea to Market

#AndroidOpen

Android GuidelinesA lot of the work has already been done for you.

Page 70: Designing an Android App from Idea to Market

#AndroidOpen

When in doubtRefer to the guidelines

Page 72: Designing an Android App from Idea to Market

#AndroidOpen

Page 73: Designing an Android App from Idea to Market

#AndroidOpen

“Rules” can be brokenThere’s unexplored territoryWe’re just at the beginning

Page 74: Designing an Android App from Idea to Market

#AndroidOpen

EXERCISE FOUR

Design a Conference AppUsing the powers you’ve been given.

Page 75: Designing an Android App from Idea to Market

#AndroidOpen

Map out some ideasWhat are the screens? Where can the user “go”?

Page 76: Designing an Android App from Idea to Market

#AndroidOpen

Page 77: Designing an Android App from Idea to Market

#AndroidOpen

Sketch out some screensCan’t sketch? Work with someone who can.

Page 78: Designing an Android App from Idea to Market

#AndroidOpen

Here’s ours

Page 79: Designing an Android App from Idea to Market

#AndroidOpen

Get feedbackValidate your sketches meet the goals.

Page 80: Designing an Android App from Idea to Market

#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

Page 81: Designing an Android App from Idea to Market

#AndroidOpen

Anyone want to share?Bueller? Bueller? Bueller?

Page 82: Designing an Android App from Idea to Market

#AndroidOpen

You know what to build.Now, how can you build it.

Page 83: Designing an Android App from Idea to Market

#AndroidOpen

ProductionTips For Realizing Visual Designs

Page 84: Designing an Android App from Idea to Market

#AndroidOpen

Beautiful AndroidEric Burke (Square)11:35 MondayGrand Ballroom B

Page 85: Designing an Android App from Idea to Market

#AndroidOpen

The source of pixelsWhat’s the toolset?

Page 86: Designing an Android App from Idea to Market

#AndroidOpen

Adobe Fireworks

Page 87: Designing an Android App from Idea to Market

#AndroidOpen

Page 88: Designing an Android App from Idea to Market

#AndroidOpen

Visibility Menus and the Action Bar

Page 89: Designing an Android App from Idea to Market

#AndroidOpen

showAsAction Avoid using “always”Provide an icon and “ifRoom|withText”

Page 90: Designing an Android App from Idea to Market

#AndroidOpen

The Honeycomb Action Bar:Front to BackMark Murphy (CommonsWare)14:30 TuesdayGrand Ballroom B

Page 91: Designing an Android App from Idea to Market

#AndroidOpen

9 Patch vs. XMLA matter of designer-developer workflow

Page 92: Designing an Android App from Idea to Market

#AndroidOpen

Page 93: Designing an Android App from Idea to Market

#AndroidOpen

Page 94: Designing an Android App from Idea to Market

#AndroidOpen

Page 95: Designing an Android App from Idea to Market

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

Page 96: Designing an Android App from Idea to Market

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

...

Page 97: Designing an Android App from Idea to Market

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

Page 98: Designing an Android App from Idea to Market

#AndroidOpen

Multi-Screen DesignsWith Fragments and Resources

Page 99: Designing an Android App from Idea to Market

#AndroidOpen

What devices to target?Try to get as much data as you can.

Page 100: Designing an Android App from Idea to Market

#AndroidOpen

What devices to target?Try to get as much data as you can.

Page 101: Designing an Android App from Idea to Market

#AndroidOpen

http://developer.android.com/resources/dashboard/platform-versions.html

Page 102: Designing an Android App from Idea to Market

#AndroidOpen

Ice Cream Sandwich Is Coming

Page 103: Designing an Android App from Idea to Market

#AndroidOpen

Unified codebaseFor all devices

Page 105: Designing an Android App from Idea to Market

#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

Page 106: Designing an Android App from Idea to Market

#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

Page 107: Designing an Android App from Idea to Market

#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);  }}

Page 108: Designing an Android App from Idea to Market

#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

Page 109: Designing an Android App from Idea to Market

#AndroidOpen

RTFSrepo and exploring how google does it

Page 110: Designing an Android App from Idea to Market

#AndroidOpen

http://source.android.com

Page 111: Designing an Android App from Idea to Market

#AndroidOpen

http://androiddrawableexplorer.appspot.com/

Page 112: Designing an Android App from Idea to Market

#AndroidOpen

Questions?

Page 113: Designing an Android App from Idea to Market

#AndroidOpen

Tony Hillerson@thillerson

Juan Sanchez@juansanchez

effectiveui.com

Thanks!

©2011 EffectiveUI