Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login...
Transcript of Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login...
![Page 1: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/1.jpg)
UI Design Patterns
DROIDCON - 17/06/2013
in practice
Android
![Page 2: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/2.jpg)
@Mathieu_Calba
http://bit.ly/11FFK9zhttp://bit.ly/Y7wFiU
![Page 3: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/3.jpg)
![Page 4: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/4.jpg)
What is aDesign Pattern ?
![Page 5: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/5.jpg)
What is aUI Design Pattern ?
![Page 6: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/6.jpg)
What is aAndroid UI Design
Pattern ?
![Page 7: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/7.jpg)
Why should you use them ?
The best solution to
solve your problem Mental Model
HomogeneityLibraries
Do not reinvent the wheel
![Page 8: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/8.jpg)
Why should not youuse them ?
Trendy solutionTo solve a nonexistant problem
Copy a competitor
![Page 9: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/9.jpg)
What is the best way to learn ?
Practice
![Page 10: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/10.jpg)
YANA
IT News Website
News
Briefs
Tests
Reports
Accounts
Categories
Favorites
Yet Another News Application
![Page 11: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/11.jpg)
Identify the Minimal Viable Product
Article’s Consultation
V1Community
V2
![Page 12: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/12.jpg)
Articles List About
Article Details
LoginAccount
Create
Home
Comments
V1
V2
Organization
![Page 13: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/13.jpg)
How does the user find its way through the
application ?ActionBar
![Page 14: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/14.jpg)
![Page 15: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/15.jpg)
![Page 16: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/16.jpg)
![Page 17: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/17.jpg)
Why you should use itLocate /Navigate
Contextual ActionsBranding
![Page 18: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/18.jpg)
Why you should not use itImmersion
in a universeMaximizing space
for content
![Page 19: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/19.jpg)
VariationsSplit Contextual
![Page 20: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/20.jpg)
How to implement it ?
SDK since API level 11ActionBarSherlock from Jake Wharton - Backport
to API Level 7
http://actionbarsherlock.com/http://developer.android.com/guide/topics/ui/actionbar.html
![Page 21: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/21.jpg)
https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-1
![Page 22: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/22.jpg)
Navigation ?Categories Kind of articles
(News, Briefs...)
![Page 23: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/23.jpg)
Dashboard
• Slowing the access to information
• Access to 6 to 9 sections
• Landing Page
![Page 24: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/24.jpg)
Menu Drawer
• Responsive• Dynamic• Quick access
• Not easy to discover / use
Usefull when there is a complex navigation
aka Fly In App Menu or Sliding Menu...
https://speakerdeck.com/cyrilmottier/the-fly-in-app-menu-for-designers-and-developers
Cyril Mottier’s slides
![Page 25: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/25.jpg)
ActionBar’s Spinner• Easy access• Filter or tab substitute
to gain screen space• Standard
• Can be confusing if used with 2 kind of data (like changing account and categories)
http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown
Technically :
![Page 26: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/26.jpg)
Tabs
• Simple• Quick access
5 Sections/Categories max
• Not very extensible
![Page 27: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/27.jpg)
VariationScrollable Sliding
![Page 28: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/28.jpg)
How to implement it ?
SDK with ActionBar API since API Level 11
ViewPagerIndicator from Jake Wharton - Different Styles from API Level 7
http://developer.android.com/guide/topics/ui/actionbar.html#Tabs
http://viewpagerindicator.com/
PagerSlidingTabStrip from Andreas Stuetz - Play Store style from API Level 8
https://github.com/astuetz/PagerSlidingTabStrip
![Page 29: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/29.jpg)
Solution ?
Spinner for categories
Tabs for article kinds
![Page 30: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/30.jpg)
https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-2
![Page 31: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/31.jpg)
Article details
Fast article switch
ViewPager
Read mode
ActionBar hiding
![Page 32: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/32.jpg)
https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-4
![Page 33: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/33.jpg)
Basic finishedversion
![Page 34: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/34.jpg)
![Page 35: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/35.jpg)
Additionalfeatures
![Page 36: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/36.jpg)
Notifying the user
No internet connectivity
No data Loading
![Page 37: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/37.jpg)
Dialog
• Never read• Force user interaction• Interrupt the user
For irreversible actions
Technically ? SDK :http://developer.android.com/guide/topics/ui/dialogs.html
![Page 38: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/38.jpg)
Toast
• Customizable• No user interaction• Not intrusive
• Not contextual (with a screen)
Technically ? SDK :http://developer.android.com/guide/topics/ui/notifiers/toasts.html
![Page 39: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/39.jpg)
• Contextual to screen• Basic styles with
different levels of importance
Based on Toast
Defined par Cyril MottierCrouton
Technically ? Library by Benjamin Weiss :https://github.com/keyboardsurfer/Crouton
![Page 40: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/40.jpg)
Basic style Many extended styles
Big Text
Inbox
Big Image
Possibility to add actions
System Notifications&
Technically :http://developer.android.com/guide/topics/ui/notifiers/notifications.html
![Page 41: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/41.jpg)
• Select an article on the left list
• There is no favorite items yet
First use
Empty View
![Page 42: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/42.jpg)
Error(s)
Empty View
• Allow to retry the download• No internet connectivity
![Page 43: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/43.jpg)
https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-5
![Page 44: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/44.jpg)
Tablet adaptation
![Page 45: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/45.jpg)
How to adapt the design to screen
diversity ?
![Page 46: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/46.jpg)
How to do it ?
![Page 47: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/47.jpg)
Small Normal Large XLarge426 x 320 dp 470 x 320 dp 640 x 480 dp 960 x 720 dp
![Page 48: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/48.jpg)
sw320 dp sw600 dp sw720 dp
The Responsive Design Android wayGathering by bucket
![Page 49: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/49.jpg)
How to adapt it ?
![Page 50: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/50.jpg)
View re-use
![Page 51: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/51.jpg)
View re-organization
![Page 52: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/52.jpg)
Content re-organization
![Page 53: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/53.jpg)
For YANA ?
![Page 54: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/54.jpg)
![Page 55: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/55.jpg)
![Page 56: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/56.jpg)
https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-6
![Page 57: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/57.jpg)
Conclusion
![Page 58: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/58.jpg)
Identify the problem
![Page 59: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/59.jpg)
Identify possible solutions
![Page 60: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/60.jpg)
Weigh and
![Page 61: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/61.jpg)
Choose the right Design Pattern to be consistent with the
platform and the app
![Page 62: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/62.jpg)
Use Android SDK and existing libraries !
![Page 63: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/63.jpg)
Thanks/Credits
• Cyril Mottier for Photoshop templates for screenshots and other blog posts http://android.cyrilmottier.com/
• Juhani Lehtimaëki - Book Smashing Android UI
• Kirill Grouchnikov - http://www.pushing-pixels.org/
• Guillaume Berry for up/down icons
• YANA - Code available on GitHub : https://github.com/MathieuCalba/android-ui-design-pattern
![Page 64: Android UI Design Patterns · 2013-06-17 · Articles List About Article Details Account Login Create Home Comments V1 V2 Organization](https://reader036.fdocuments.us/reader036/viewer/2022080721/5f7a6e3e1183bd2f136b30be/html5/thumbnails/64.jpg)
Questions ?
@Mathieu_Calba