Android UI Design Pattern in practice

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

Qu’est-ce qu’un Design Pattern ?

Slide 5

Slide 5 text

Qu’est-ce qu’un UI Design Pattern ?

Slide 6

Slide 6 text

Qu’est-ce qu’un Android UI Design Pattern ?

Slide 7

Slide 7 text

Pourquoi les utiliser ? Meilleure Solution à votre problème Mental Model Homogénéité Libraries Eviter de réinventer la roue

Slide 8

Slide 8 text

Pourquoi ne pas les utiliser ? Solution à la mode Résoudre un problème non existant Copier son concurrent

Slide 9

Slide 9 text

Meilleure manière d’apprendre ? La pratique

Slide 10

Slide 10 text

YANA Site d’Information sur l’Informatique News Brèves Tests Dossiers Compte Catégories Favoris Yet Another News Application

Slide 11

Slide 11 text

Identiﬁer le Minimal Viable Product Consultation des articles V1 Gestion communautaire V2

Slide 12

Slide 12 text

Articles List About Article Details Login Account Create Home Commentaires V1 V2 Organisation

Slide 13

Slide 13 text

Comment se repère-t-on dans l’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

Pourquoi l’utiliser ? Repère / Navigation Actions Contextuelles Branding

Slide 18

Slide 18 text

Savoir ne pas l’utiliser Immersion dans un univers Maximiser l’espace pour le contenu

Slide 19

Slide 19 text

Variations Split Contextual

Slide 20

Slide 20 text

Comment Techniquement ? SDK depuis API level 11, mais dans sa version “ﬁnale” depuis API Level 14 ActionBarSherlock de Jake Wharton - Backport jusqu’à l’API Level 7 http://actionbarsherlock.com/ http://developer.android.com/ guide/topics/ui/actionbar.html

Slide 21

Slide 21 text

Mise en Pratique

Slide 22

Slide 22 text

Navigation ? Catégories Types d’article (News, Brèves...)

Slide 23

Slide 23 text

Dashboard • Ralentit l’accès aux informations • Accès à 6 à 9 Sections • Landing Page attractive

Slide 24

Slide 24 text

Fly in App Menu • S’adapte à la place disponible • Dynamique • Accès Rapide • Pas facile à découvrir / utiliser Utile quand on a une navigation complexe aka Menu Drawer ou Sliding Menu... https://speakerdeck.com/cyrilmottier/the-ﬂy-in- app-menu-for-designers-and-developers Présentation de Cyril Mottier

Slide 25

Slide 25 text

ActionBar’s Spinner • Facile d’accès • Filtre ou remplacement des onglets si on ne veut pas perdre la place • Standard • Peut vite devenir confus si utilisé de 2 manières différentes en simultané http://developer.android.com/guide/ topics/ui/actionbar.html#Dropdown Techniquement :

Slide 26

Slide 26 text

Onglets • Simple • Accès rapide 5 Sections/Catégories maximum • Peu Extensible

Slide 27

Slide 27 text

Variation Scrollable

Slide 28

Slide 28 text

Comment Techniquement ? SDK inclus dans l’Action Bar depuis l’API Level 11 ViewPagerIndicator de Jake Wharton - Plusieurs Styles à partir de l’API Level 7 http://developer.android.com/guide/ topics/ui/actionbar.html#Tabs http://viewpagerindicator.com/

Slide 29

Slide 29 text

Solution ? Spinner pour les Catégories Onglets pour les types d’articles

Slide 30

Slide 30 text

Mise en Pratique

Slide 31

Slide 31 text

Listing Articles News : Image + Titre Brève : Titre + Date/Heure Test et Dossier : Image + Titre

Slide 32

Slide 32 text

Carte Double Colonne Mix Grande Image ou Image et Titre

Slide 33

Slide 33 text

Grande Image Avec une mise en avant Image + Titre

Slide 34

Slide 34 text

Carousel Grande Image + Double Colonne

Slide 35

Slide 35 text

Brève News Test et Dossier Solution ?

Slide 36

Slide 36 text

Mise en Pratique

Slide 37

Slide 37 text

Détail d’un Article Passage rapide entre les détails ViewPager Mode Lecture ActionBar disparaît

Slide 38

Slide 38 text

Mise en Pratique

Slide 39

Slide 39 text

Version basique terminée

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Fonctionnalités additionnelles

Slide 42

Slide 42 text

Notiﬁer l’utilisateur Aucune connectivité internet Pas de donnée Chargement en cours

Slide 43

Slide 43 text

Dialogue • Pas lu • Force l’interaction utilisateur • Interrompt l’utilisateur Pour des actions irréversible Techniquement ? SDK : http://developer.android.com/guide/topics/ui/dialogs.html

Slide 44

Slide 44 text

Toast • Customisable • Pas d’interaction utilisateur • Non intrusif • Non contextualisé (avec l’écran) Techniquement ? SDK : http://developer.android.com/guide/topics/ui/notiﬁers/toasts.html

Slide 45

Slide 45 text

• Contextuel à l’écran • Styles de base avec différents niveaux d’importance Basé sur le Toast Déﬁnit par Cyril Mottier Crouton Techniquement ? Librairie by Benjamin Weiss : https://github.com/keyboardsurfer/Crouton

Slide 46

Slide 46 text

Style de base Plusieurs styles étendus Big Text Inbox Big Image Ajout d’action possible Notifications Système & Techniquement : http://developer.android.com/guide/topics/ui/notifiers/notifications.html

Slide 47

Slide 47 text

• Indique qu’il faut sélectionner un article sur la gauche • Indique qu’il n’y a pas encore de favoris Première utilisation Empty View

Slide 48

Slide 48 text

Erreur(s) Empty View • Possibilité de réessayer de récupérer le contenu • Indication manque de connectivité internet

Slide 49

Slide 49 text

Mise en Pratique

Slide 50

Slide 50 text

Adaptation Tablette

Slide 51

Slide 51 text

Comment s’adapter aux multitudes de formats d’écran ?

Slide 52

Slide 52 text

Moyens mis à disposition ?

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 Responsive Design à la sauce Android Regroupement par paquet

Slide 55

Slide 55 text

Comment s’adapter ?

Slide 56

Slide 56 text

Réutilisation des vues

Slide 57

Slide 57 text

Réorganisation de vues

Slide 58

Slide 58 text

Réorganisation du contenu

Slide 59

Slide 59 text

Et YANA ?

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Mise en Pratique

Slide 63

Slide 63 text

Conclusion

Slide 64

Slide 64 text

Identiﬁer le problème

Slide 65

Slide 65 text

Identiﬁer les solutions possibles

Slide 66

Slide 66 text

Peser le et le

Slide 67

Slide 67 text

Choisir un Design Pattern cohérent avec la plateforme et l’app

Slide 68

Slide 68 text

Utiliser le SDK et les librairies existantes !

Slide 69

Slide 69 text

Remerciements/Crédits • Cyril Mottier pour le template Photoshop pour les screenshots et autres articles de son blog http:// android.cyrilmottier.com/ • Juhani Lehtimaëki - Livre Smashing Android UI • Kirill Grouchnikov - http://www.pushing-pixels.org/ • Guillaume Berry pour icones pouce up/down • YANA - Code disponible sur GitHub : https:// github.com/MathieuCalba/android-ui-design-pattern

Slide 70

Slide 70 text

Questions ? @Mathieu_Calba