Android UI Design Pattern in practice (English version)

Slide 1

Slide 1 text

UI Design Patterns LYAUG - 07/02/2013 in practice Android

Slide 2

Slide 2 text

@Mathieu_Calba http://bit.ly/11FFK9z http://bit.ly/Y7wFiU

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What is a Design Pattern ?

Slide 5

Slide 5 text

What is a UI Design Pattern ?

Slide 6

Slide 6 text

What is a Android UI Design Pattern ?

Slide 7

Slide 7 text

Why should you use them ? The best solution to solve your problem Mental Model Homogeneity Libraries Do not reinvent the wheel

Slide 8

Slide 8 text

Why should not you use them ? Trendy solution To solve a nonexistant problem Copy a competitor

Slide 9

Slide 9 text

What is the best way to learn ? Practice

Slide 10

Slide 10 text

YANA IT News Website News Briefs Tests Reports Accounts Categories Favorites Yet Another News Application

Slide 11

Slide 11 text

Identify the Minimal Viable Product Article’s Consultation V1 Community V2

Slide 12

Slide 12 text

Articles List About Article Details Login Account Create Home Comments V1 V2 Organization

Slide 13

Slide 13 text

How does the user ﬁnd its way through the application ? ActionBar

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Why you should use it Locate / Navigate Contextual Actions Branding

Slide 18

Slide 18 text

Why you should not use it Immersion in a universe Maximizing space for content

Slide 19

Slide 19 text

Variations Split Contextual

Slide 20

Slide 20 text

How to implement it ? SDK since API level 11 ActionBarSherlock from Jake Wharton - Backport to API Level 7 http://actionbarsherlock.com/ http://developer.android.com/ guide/topics/ui/actionbar.html

Slide 21

Slide 21 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-1

Slide 22

Slide 22 text

Navigation ? Categories Kind of articles (News, Briefs...)

Slide 23

Slide 23 text

Dashboard • Slowing the access to information • Access to 6 to 9 sections • Landing Page

Slide 24

Slide 24 text

Fly-in App Menu • Responsive • Dynamic • Quick access • Not easy to discover / use Usefull when there is a complex navigation aka Menu Drawer or Sliding Menu... https://speakerdeck.com/cyrilmottier/the-ﬂy-in- app-menu-for-designers-and-developers Cyril Mottier’s slides

Slide 25

Slide 25 text

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 :

Slide 26

Slide 26 text

Tabs • Simple • Quick access 5 Sections/Categories max • Not very extensible

Slide 27

Slide 27 text

Variation Scrollable

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

Solution ? Spinner for categories Tabs for article kinds

Slide 30

Slide 30 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-2

Slide 31

Slide 31 text

Article listing News : Image + Title Briefs : Title + Date/Hour Reports & Tests : Image + Title

Slide 32

Slide 32 text

Card Double columns Mix big image or image and title

Slide 33

Slide 33 text

Big image With highlight Image + title

Slide 34

Slide 34 text

Carousel Big image + double columns

Slide 35

Slide 35 text

Brief News Test & Report Solution ?

Slide 36

Slide 36 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-3

Slide 37

Slide 37 text

Article details Fast article switch ViewPager Read mode ActionBar hiding

Slide 38

Slide 38 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-4

Slide 39

Slide 39 text

Basic ﬁnished version

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Additional features

Slide 42

Slide 42 text

Notifying the user No internet connectivity No data Loading

Slide 43

Slide 43 text

Dialog • Never read • Force user interaction • Interrupt the user For irreversible actions Technically ? SDK : http://developer.android.com/guide/topics/ui/dialogs.html

Slide 44

Slide 44 text

Toast • Customizable • No user interaction • Not intrusive • Not contextual (with a screen) Technically ? SDK : http://developer.android.com/guide/topics/ui/notiﬁers/toasts.html

Slide 45

Slide 45 text

• Contextual to screen • Basic styles with different levels of importance Based on Toast Deﬁned par Cyril Mottier Crouton Technically ? Library by Benjamin Weiss : https://github.com/keyboardsurfer/Crouton

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

• Select an article on the left list • There is no favorite items yet First use Empty View

Slide 48

Slide 48 text

Error(s) Empty View • Allow to retry the download • No internet connectivity

Slide 49

Slide 49 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-5

Slide 50

Slide 50 text

Tablet adaptation

Slide 51

Slide 51 text

How to adapt the design to screen diversity ?

Slide 52

Slide 52 text

How to do it ?

Slide 53

Slide 53 text

Small Normal Large XLarge 426 x 320 dp 470 x 320 dp 640 x 480 dp 960 x 720 dp

Slide 54

Slide 54 text

sw320 dp sw600 dp sw720 dp The Responsive Design Android way Gathering by bucket

Slide 55

Slide 55 text

How to adapt it ?

Slide 56

Slide 56 text

View re-use

Slide 57

Slide 57 text

View re-organization

Slide 58

Slide 58 text

Content re-organization

Slide 59

Slide 59 text

For YANA ?

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-6

Slide 63

Slide 63 text

Conclusion

Slide 64

Slide 64 text

Identify the problem

Slide 65

Slide 65 text

Identify possible solutions

Slide 66

Slide 66 text

Weigh and

Slide 67

Slide 67 text

Choose the right Design Pattern to be consistent with the platform and the app

Slide 68

Slide 68 text

Use Android SDK and existing libraries !

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Questions ? @Mathieu_Calba