Designing an Android App from Idea to Market

Designing an App
from Idea to Market

PRESENTATION ANDEVCON • MAY 14, 2012

A LITTLE ABOUT US

Juan Sanchez Tony Hillerson
Designer & 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 @thillerson
juan@tackmobile.com tony@tackmobile.com

PRESENTATION tackmobile.com

WHO ARE YOU?

• Developer
• Designer
• Entrepreneur
• Etc.


WHAT ARE WE TALKING ABOUT?
• Defining User Goals
• Design Concepts
• Translating Pixels
• Development Tactics
• Measurement & Feedback

We’ll be doing group exercises.


EXERCISE 1

Design an App
for AnDevCon


THE FEATURES
• Chat
• Take Pictures
Edit Profile

GO!
•

• View Schedule
• See a Map
• Check Weather
• Scan QR Code
• Watch Video
• Review Slides


Who wants to share?


A successful app is
more than a list of
features.


Building an app is a
process.


THE ODDS ARE AGAINST YOU

• Timeline
• Budget
• Scope
• Resources


68% of IT projects fail.


You can succeed but it’s
a series of successes.


IT’S A PROCESS
DEFINITION

DISCOVERY DESIGN

DEPLOY DEVELOPMENT


IT HAPPENS IN CYCLES


A lot happens before
code is written and
pixels are pushed.


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?


WHAT ARE THE OBJECTIVES?
• increased business?
• increased brand awareness?
• increased users?
• increased user engagement?


Ask questions.


WHO ARE YOUR USERS?

images © Jason Travis


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?


Referred to as
personas.


EXERCISE 2

Let’s create a
persona.


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?


OUR PERSONA IS....

Hilly Tonnerson
• Male, 19 - 45 years old
• mobile developer
• presenting on Android
topics
• relies on his Nexus S


Your persona(s) should
be present throughout
the process.


Defining what to build
is the hardest part.


http://www.gogamestorm.com/

FIGURING IT OUT
• definition exercises
• proofs of concept
• user interviews
• sketching
• prototyping
• wireframes


FIGURING IT OUT

via http://www.gogamestorm.com/?p=855 picture taken by Dave Gray http://www.davegrayinfo.com/


This process isn’t
meant to be pretty.


EXERCISE 3

Define user goals
and features


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?


Answers will help
define the “what”.


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 disruption


Based on the “what”,
define the “how”.


OUR FEATURES
• a presenter’s assistant app
• control the presentation
• people can ask questions
• people can raise their hand
• vibrates when there’s a questions


Interaction Design


Design is how it works.
Steve Jobs


This is just stupid.
A User


Why? What can we do
to make it better?


DON NORMAN’S DESIGN VOCABULARY
• Visibility
• Affordances
• Feedback
• Mapping
• Constraint
• Consistency


NATURAL DESIGN
Use what people know from their environment.


NATURAL DESIGN


NATURAL DESIGN

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

Natural Design ≠
Skeumorphism


It doesn’t have to have
to look like something
that already exists.


UNIVERSAL PRINCIPLES
• Physics
• Gravity
• Friction
• Constraints
• Space


CONCEPTUAL MODEL
The “model” a user of a system builds to reason about a system


CONCEPTUAL MODEL
• The user sees the interface, and that
leads them to reason about the
system behind it.
• The interface can simplify the actual
system


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 technology

VISIBILITY
Cues between the design of an object and its operation


VISIBILITY


AFFORDANCE
Perception that something can be interacted with


AFFORDANCE


FEEDBACK
The effect of user actions should be obvious


FEEDBACK


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


MAPPING


MAPPING
• I can find my friends
• Oh look, pictures I
can slide
• I wonder if I have
notifications


CONSTRAINTS
Preventing errors before they can occur


CONSTRAINTS


CONSISTENCY
The way visual objects are used


CONSISTENCY


How does this apply
to mobile?


KNOW THE DEVICE
• dimensions
• orientation
• sensors
• inputs
• etc.


KNOW THE PLATFORM
• this is not iOS
• this is not WP7
• this is not WebOS
• etc.


STAY TRUE TO ANDROID

concept by Guenther Beyer


MAKE IT FAST
• performance
• the illusion of fast
• optimize


UPLOADING A PICTURE

Instagram dudes

https://speakerdeck.com/u/mikeyk/p/secrets-to-lightning-fast-mobile-design


EMBRACE TOUCH
• people are using fingers,
not cursors
• content as interface
• multi-touch and gestures
• physical metaphors


A RULE OF THUMB
• 44pt for touch
• 30pt minimum
• Small items should still
have decent hit areas


GIVE EACH SCREEN A PURPOSE
• what’s most important?
• learn to eliminate
• content vs. controls
• smaller doesn’t mean it
should do less


ANIMATION & TRANSITIONS
• the illusion of faster
• just-in-time content
• progressive disclosure
• depth and space
• guidance


A lot of work has
already been done.


ESTABLISHED PATTERNS


ANDROID GUIDELINES

http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html

ANDROID DESIGN

http://developer.android.com/design/

maisdcharlottes.blogspot.com

CONTEXT
• what’s the environment?
• what’s the weather?
• what time is it?
• what’s the device
environment?
• what are the usage
patterns?


WORKING WITH CONTENT

• use real content
• try avoiding lorem ipsum
• know what you really have
to work with


DON’T FORGET TO PLAY

• interface origami
• video games
• real world examples
• bend the rules
• swing by Best Buy
• this is just the beginning


Details, details, details.


IT’S IN THE DETAILS


Android can be
beautiful.


EXERCISE 4

Design an app for
AnDevCon.


DESCRIBE A FLOW
• focus on a task
• what are the screens?
• what’s the flow?
• where can the user go?


MAP IT OUT


SKETCH OUT YOUR IDEAS
• pick one screen and sketch it out
• or, do multiple and describe how
a user accomplishes a task


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 web


HERE’S OURS
• slides on top
• view notes
• view questions
• share information
• time check


Now what?


WIREFRAMES
• content
• structure
• interactions
• flow


VISUAL DESIGN
• branding • layout
• color • hierarchy
• typography • spacing
• animation • affordance


MORE RESEARCH
• get feedback through iterations
• test assumptions
• doesn’t have to be for the entire app
• test specific things
• early and often


HOW MANY PEOPLE TO ASK?


IT’S EASIER THAN YOU THINK


YOU DON’T NEED A FINISHED APP

image via A List Apart article by Shawn Medero


ANALYZE YOUR RESULTS

• content
• structure
• interactions
• flow


EXERCISE 5

Get feedback on
your sketches.


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 distracting


Development


You know what to
build, but how?


OUR DESIGN


TRANSLATING PIXELS

• what’s the source? Photoshop?
• what is vector, what is bitmap?
• can you use out-of-the-box
components?


9 PATCH VS. XML


DRAWING

BUTTON


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


CODE
...
<item android:top="2px">
<stroke android:color="@color/color_primary_dark_stripe"
android:width="1px" />
<solid android:color="@android:color/transparent" />
<corners
</shape>
</item>
...


CODE
...
<item android:top="1px" android:bottom="1px">
<gradient
android:angle="270"
android:startColor="@color/button_color_top"
android:centerColor="@color/button_color_middle"
android:endColor="@color/button_color_bottom"
/>
<corners
</shape>
</item>
</layer-list>


It’s a multi-screen
world.


WHAT TO TARGET

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


Unified code base for
all devices.


COMPATIBILITY LIBRARY + EXTENSIONS


PHONE LAYOUT

<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_height="match_parent"/>
</FrameLayout>


TABLET LAYOUT
<LinearLayout xmlns:android="http://schemas.android.com/apk/
res/android"
android:orientation="horizontal"
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_height="match_parent" />
</LinearLayout>


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


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


SEE HOW GOOGLE DOES IT

• RTFS
• source.android.com
• androiddrawableexplorer.appspot.com


DRAWABLE EXPLORER

androiddrawableexplorer.appspot.com


GO SEE JOSHUA

Advanced Design Implementation
• Tuesday

• 4:00 pm - 5:15 pm

• Joshua Jamison


It’s a lot, we know.


Questions?


Thanks!
@juansanchez
@thillerson

@tackmobile
tackmobile.com

Designing an Android App from Idea to Market

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Designing an Android App from Idea to Market

Similar to Designing an Android App from Idea to Market (20)

Recently uploaded

Recently uploaded (20)

Designing an Android App from Idea to Market