build a user experience by eyal lezmy
DESCRIPTION
at be myappTRANSCRIPT
BUILD
a
User Experience
... on Android
ABOUT.ME
Slides http://bit.ly/and-nav
http://eyal.fr
Eyal LEZMY
... 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
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 sizes
PanelPanel Panel PanelPanel
Panel Panel Panel
Panel
Multi-pane Layout Pattern
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
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
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
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>
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
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