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.

1. BUILD
a
User Experience
... on Android

2. ABOUT.ME
Slides
http://bit.ly/and-nav
http://eyal.fr

3. DESIGN
Effective
... don't loose your user

4. Once Upon a Time...
a webservice, far far away...

5. Planning the screens
It's all about movies...

6. Planning the relationships

7. Planning the relationships
Netflix Content
General actions & information

8. Handle the bar

9. HOME
sweet
Home
... all roads lead to Home

10. Dashboard
Useful for
"tools apps"

11. Dashboard

12. Dropdown Tabs + Content

13. Dropdown Tabs + Content
Closed ecosystems,
multi-accounts
Different nature
of content
Different level
of content

14. Tabs + Content
Feature and organize
the content

15. Tabs + Content

16. Navigation drawer + Content
4 top-level screens minimum

17. Navigation drawer + Content
Most important
screens of
your app
4 top-level screens minimum

18. Navigation drawer + Content
Structure the
content
4 top-level screens minimum

19. Navigation drawer + Content
Add general
actions (search,
shorcuts, ...)
4 top-level screens minimum

20. Navigation drawer + Content
Make your
action bar
more contextual
Optional
4 top-level screens minimum

21. Navigation drawer + Content
Make your
action bar
more contextual
Optional
Except Settings,
About & Help
by convention
4 top-level screens minimum

22. Navigation drawer + Content
Very powerful...
but complex !
You have to know why
you are using it!

23. Choose your home
It's all about movies... as I said

24. Our choice
Content + Tab
of course :-)

25. All roads lead to Home

26. Latteral navigation

27. Size
Matters
...from S to XXL

28. Multiple screen sizes
Multi-pane Layout Pattern

29. Multiple screen sizes
Panel
Panel
Panel
Panel
Panel
Panel
Panel
Multi-pane Layout Pattern
Panel
Panel

30. Multi-panel design layout
Design
Dev

31. Multi-panel design layout
Panel
Design
Dev

32. Multi-panel design layout
Fragment!
Panel
Design
Dev

33. Frag...
what?!

34. The fragment
Open

35. The fragment
Update

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

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

38. 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
>= 7"
Default

39. 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
>= 600dp
>= 7"
Default

40. Multi-screen UI
Avoid file duplication with aliases
res/layout/main.xml
res/layout/main_two_panes.xml
res/values-large/layout.xml
res/values-sw600dp/layout.xml

41. Multi-screen UI
Avoid file duplication with aliases
res/layout/main.xml
res/layout/main_two_panes.xml
res/values-large/layout.xml
res/values-sw600dp/layout.xml
Define the 2 layouts
on the default folder

42. Multi-screen UI
Avoid file duplication with aliases
res/layout/main.xml
res/layout/main_two_panes.xml
res/values-large/layout.xml
res/values-sw600dp/layout.xml
Define aliases using
the filters
Define the 2 layouts
on the default folder

43. Multi-screen UI
Avoid file duplication with aliases
<resources>
<item name="main" type="layout">
@layout/main_two_panes
</item>
</resources>

44. Multi-screen UI
Avoid file duplication with aliases
<resources>
<item name="main" type="layout">
@layout/main_two_panes
</item>
</resources>
Override main by main_two_panes
for large and sw600dp screens

45. Multi-screen UI
Fork the code
res/values/bools.xml
res/values-large/bools.xml
res/values-sw600dp/bools.xml
<resources>
<bool name="isTwoPanes">
true|false
</bool>
</resources>

46. Multi-screen UI
Fork the code
res/values/bools.xml
res/values-large/bools.xml
res/values-sw600dp/bools.xml
<resources>
<bool name="isTwoPanes">
true|false
</bool>
</resources>
Boolean values dealing
with the filters

47. Multi-screen UI
Fork the code
res/values/bools.xml
res/values-large/bools.xml
res/values-sw600dp/bools.xml
<resources>
<bool name="isTwoPanes">
true|false
</bool>
</resources>
true or false:
explicite definition
Boolean values dealing
with the filters

48. Multi-screen UI
Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes)
// launch a tablet activity
else
// launch a phone activity

49. Multi-screen UI
Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes)
// launch a tablet activity
else
// launch a phone activity
We fork the code based on
the isTwoPanes value

50. We're
done!
... and now the result

51. Wireframe for phone

52. Wireframe for tablet

53. REFERENCES
Design Effective Navigation
http://developer.android.com/training/design-navigation/index.html
Navigation Drawer
http://developer.android.com/design/patterns/navigation-drawer.html
Fragments
http://developer.android.com/guide/components/fragments.html
Implement Effective Navigation
http://developer.android.com/training/implementing-navigation/index.html

54. THANK YOU!
Slides
http://bit.ly/and-nav
http://eyal.fr