build a user experience on android
DESCRIPTION
Speaker's notes here : http://bit.ly/and-nav This is a feedback about user experience creation, following a simple Android app I had to create. In this presentation I'll tell you about this story, trying to identify the points that will hep you to make the good choice on your own project.TRANSCRIPT
BUILD
aUser Experience
... on Android
ABOUT.ME
Slides http://bit.ly/and-nav
http://eyal.fr
... don't loose your user
DESIGN Effective
Once Upon a Time...
a webservice, far far away...
Planning the screens
It's all about movies...
Planning the relationships
Planning the relationships
Netflix Content General actions & information
Handle the bar
... all roads lead to Home
HOME
sweet
Home
Useful for
"tools apps"
Dashboard
Dashboard
Dropdown Tabs + Content
Dropdown Tabs + Content
Closed ecosystems,
multi-accountsDifferent nature
of content
Different level
of content
Feature and organize
the content
Tabs + Content
Tabs + Content
Navigation drawer + Content
4 top-level screens minimum
Navigation drawer + Content
4 top-level screens minimum
Most important
screens of
your app
Navigation drawer + Content
4 top-level screens minimum
Structure the
content
Navigation drawer + Content
Add general
actions (search,shorcuts, ...)
4 top-level screens minimum
Make your
action bar
more contextualOptional
Navigation drawer + Content
4 top-level screens minimum
Navigation drawer + Content
4 top-level screens minimum
Except Settings,
About & Helpby convention
Make your
action bar
more contextualOptional
Very powerful...
but complex !
You have to know why
you are using it!
Navigation drawer + Content
Choose your home
It's all about movies... as I said
Content + Tab
of course :-)
Our choice
All roads lead to Home
Latteral navigation
...from S to XXL
Size
Matters
Multi-pane Layout Pattern
Multiple screen sizes
Multiple screen sizesPanelPanel Panel PanelPanel
Panel Panel Panel
Panel
Multi-pane Layout Pattern
Multi-panel design layout
DesignDev
Multi-panel design layout
Panel
DesignDev
Multi-panel design layout
Panel
Fragment!
DesignDev
Frag...
what?!
The fragment
Open
The fragment
Update
Use the system resources
res/layout/main.xml
res/layout-large/main_two_panes.xml
res/layout-sw600dp/main_two_panes.xml
Multi-screen UI
Use the system resources
res/layout/main.xml
res/layout-large/main_two_panes.xml
res/layout-sw600dp/main_two_panes.xml
Multi-screen UI
Default
Use the system resources
res/layout/main.xml
res/layout-large/main_two_panes.xml
res/layout-sw600dp/main_two_panes.xml
Multi-screen UI
Default>= 7"
Use the system resources
res/layout/main.xml
res/layout-large/main_two_panes.xml
res/layout-sw600dp/main_two_panes.xml
Multi-screen UI
Default>= 7"
>= 600dp
Avoid file duplication with aliases
res/layout/main.xmlres/layout/main_two_panes.xml
res/values-large/layout.xmlres/values-sw600dp/layout.xml
Multi-screen UI
Avoid file duplication with aliases
res/layout/main.xmlres/layout/main_two_panes.xml
res/values-large/layout.xmlres/values-sw600dp/layout.xml
Multi-screen UI
Define the 2 layouts
on the default folder
Avoid file duplication with aliases
res/layout/main.xmlres/layout/main_two_panes.xml
res/values-large/layout.xmlres/values-sw600dp/layout.xml
Multi-screen UI
Define the 2 layouts
on the default folder
Define aliases using
the filters
Avoid file duplication with aliases
<resources> <item name="main" type="layout">
@layout/main_two_panes</item>
</resources>
Multi-screen UI
Avoid file duplication with aliases
<resources> <item name="main" type="layout">
@layout/main_two_panes</item>
</resources>
Multi-screen UI
Override main by main_two_panes
for large and sw600dp screens
Fork the code
Multi-screen UI
res/values/bools.xmlres/values-large/bools.xmlres/values-sw600dp/bools.xml
<resources><bool name="isTwoPanes">
true|false</bool>
</resources>
Fork the code
Multi-screen UI
res/values/bools.xmlres/values-large/bools.xmlres/values-sw600dp/bools.xml
<resources><bool name="isTwoPanes">
true|false</bool>
</resources>
Boolean values dealing
with the filters
Fork the code
Multi-screen UI
res/values/bools.xmlres/values-large/bools.xmlres/values-sw600dp/bools.xml
<resources><bool name="isTwoPanes">
true|false</bool>
</resources>
true or false:
explicite definition
Boolean values dealing
with the filters
Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes) // launch a tablet activity
else // launch a phone activity
Multi-screen UI
Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes) // launch a tablet activity
else // launch a phone activity
Multi-screen UI
We fork the code based on
the isTwoPanes value
... and now the result
We're
done!
Wireframe for phone
Wireframe for tablet
Design Effective Navigationhttp://developer.android.com/training/design-navigation/index.html
Navigation Drawerhttp://developer.android.com/design/patterns/navigation-drawer.html
Fragmentshttp://developer.android.com/guide/components/fragments.html
Implement Effective Navigationhttp://developer.android.com/training/implementing-navigation/index.html
REFERENCES
THANK YOU!
Slides http://bit.ly/and-nav
http://eyal.fr