Build a User Experience on Android

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

1. BUILD a User Experience ... on Android
2. ABOUT.ME Slides http://bit.ly/and-nav http://eyal.fr
3. ... don't loose your user DESIGN Effective
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. ... all roads lead to Home HOME sweet Home
10. Useful for "tools apps" Dashboard
11. Dashboard
12. Dropdown Tabs + Content
13. Dropdown Tabs + Content Closed ecosystems, multi-accounts Different nature of content Different level of content
14. Feature and organize the content Tabs + Content
15. Tabs + Content
16. Navigation drawer + Content 4 top-level screens minimum
17. Navigation drawer + Content 4 top-level screens minimum Most important screens of your app
18. Navigation drawer + Content 4 top-level screens minimum Structure the content
19. Navigation drawer + Content Add general actions (search, shorcuts, ...) 4 top-level screens minimum
20. Make your action bar more contextual Optional Navigation drawer + Content 4 top-level screens minimum
21. Navigation drawer + Content 4 top-level screens minimum Except Settings, About & Help by convention Make your action bar more contextual Optional
22. Very powerful... but complex ! You have to know why you are using it! Navigation drawer + Content
23. Choose your home It's all about movies... as I said
24. Content + Tab of course :-) Our choice
25. All roads lead to Home
26. Latteral navigation
27. ...from S to XXL Size Matters
28. Multi-pane Layout Pattern Multiple screen sizes
29. Multiple screen sizes Panel Panel Panel Panel Panel Panel Panel Panel Panel Multi-pane Layout Pattern
30. Multi-panel design layout Design Dev
31. Multi-panel design layout Panel Design Dev
32. Multi-panel design layout Panel Fragment! Design Dev
33. Frag... what?!
34. The fragment Open
35. The fragment Update
36. 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
37. 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
38. 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"
39. 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
40. 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 Multi-screen UI
41. 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 Multi-screen UI Define the 2 layouts on the default folder
42. 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 Multi-screen UI Define the 2 layouts on the default folder Define aliases using the filters
43. Avoid file duplication with aliases <resources> <item name="main" type="layout"> @layout/main_two_panes </item> </resources> Multi-screen UI
44. 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
45. Fork the code Multi-screen UI res/values/bools.xml res/values-large/bools.xml res/values-sw600dp/bools.xml <resources> <bool name="isTwoPanes"> true|false </bool> </resources>
46. Fork the code Multi-screen UI 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. Fork the code Multi-screen UI 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. Fork the code boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes); if (isTwoPanes) // launch a tablet activity else // launch a phone activity Multi-screen UI
49. 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
50. ... and now the result We're done!
51. Wireframe for phone
52. Wireframe for tablet
53. 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 REFERENCES
54. THANK YOU! Slides http://bit.ly/and-nav http://eyal.fr