Build a user experience on Android

758 views

Published on

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.

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
758
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Build a user experience on Android

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

×