Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build a user experience by Eyal Lezmy

1,091 views

Published on

at be myapp

Published in: Technology
  • Be the first to comment

Build a user experience by Eyal Lezmy

  1. 1. BUILD a User Experience ... on Android
  2. 2. ABOUT.ME Slides http://bit.ly/and-nav http://eyal.fr Eyal LEZMY
  3. 3. ... don't loose your user DESIGN Effective
  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. ... all roads lead to Home HOME sweet Home
  10. 10. Useful for "tools apps" Dashboard
  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. Feature and organize the content Tabs + Content
  15. 15. Tabs + Content
  16. 16. Navigation drawer + Content 4 top-level screens minimum Most important screens of your app
  17. 17. Navigation drawer + Content 4 top-level screens minimum Structure the content
  18. 18. Navigation drawer + Content Add general actions (search, shorcuts, ...) 4 top-level screens minimum
  19. 19. Make your action bar more contextual Optional Navigation drawer + Content 4 top-level screens minimum
  20. 20. Navigation drawer + Content 4 top-level screens minimum Except Settings, About & Help by convention Make your action bar more contextual Optional
  21. 21. Very powerful... but complex ! You have to know why you are using it! Navigation drawer + Content
  22. 22. Choose your home It's all about movies... as I said
  23. 23. Content + Tab of course :-) Our choice
  24. 24. All roads lead to Home
  25. 25. Latteral navigation
  26. 26. ...from S to XXL Size Matters
  27. 27. Multi-pane Layout Pattern Multiple screen sizes
  28. 28. Multiple screen sizes PanelPanel Panel PanelPanel Panel Panel Panel Panel Multi-pane Layout Pattern
  29. 29. Multi-panel design layout Panel Fragment! Design Dev
  30. 30. Frag... what?!
  31. 31. The fragment Open
  32. 32. The fragment Update
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. ... and now the result We're done!
  39. 39. Wireframe for phone
  40. 40. Wireframe for tablet
  41. 41. 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
  42. 42. THANK YOU! Slides http://bit.ly/and-nav http://eyal.fr

×