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-accounts
Different 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 contextual
Optional
Navigation drawer + Content
4 top-level screens minimum
Navigation drawer + Content
4 top-level screens minimum
Except Settings,
About & Help
by convention
Make your
action bar
m...
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!
Design Dev
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
Mul...
Avoid file duplication with aliases
res/layout/main.xml
res/layout/main_two_panes.xml
res/values-large/layout.xml
res/valu...
Avoid file duplication with aliases
<resources>
<item name="main" type="layout">
@layout/main_two_panes
</item>
</resource...
Fork the code
Multi-screen UI
res/values/bools.xml
res/values-large/bools.xml
res/values-sw600dp/bools.xml
<resources>
<bo...
Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes)
// launch a tablet activity
else
// ...
... and now the result
We're
done!
Wireframe for phone
Wireframe for tablet
Design Effective Navigation
http://developer.android.com/training/design-navigation/index.html
Navigation Drawer
http://de...
THANK YOU!
Slides http://bit.ly/and-nav
http://eyal.fr
Upcoming SlideShare
Loading in …5
×

Build a user experience by Eyal Lezmy

983 views
892 views

Published on

at be myapp

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
983
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×