Android UI Design Pattern in practice

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. Qu’est-ce qu’un
   Design Pattern ?
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Meilleure manière
   d’apprendre ?
   La pratique
   

   View Slide

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

    View Slide

11. Identifier le Minimal
    Viable Product
    Consultation
    des articles
    V1
    Gestion
    communautaire
    V2
    

    View Slide

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

    View Slide

13. Comment se repère-t-on
    dans l’application ?
    ActionBar
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

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

    View Slide

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

    View Slide

19. Variations
    Split Contextual
    

    View Slide

20. Comment
    Techniquement ?
    SDK depuis API level 11,
    mais dans sa version
    “finale” 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
    

    View Slide

21. Mise en Pratique
    

    View Slide

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

    View Slide

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

    View Slide

24. 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-fly-in-
    app-menu-for-designers-and-developers
    Présentation de Cyril Mottier
    

    View Slide

25. 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 :
    

    View Slide

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

    View Slide

27. Variation
    Scrollable
    

    View Slide

28. 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/
    

    View Slide

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

    View Slide

30. Mise en Pratique
    

    View Slide

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

    View Slide

32. Carte Double Colonne
    Mix Grande Image ou
    Image et Titre
    

    View Slide

33. Grande Image
    Avec une mise
    en avant
    Image + Titre
    

    View Slide

34. Carousel
    Grande Image +
    Double Colonne
    

    View Slide

35. Brève
    News
    Test et Dossier
    Solution ?
    

    View Slide

36. Mise en Pratique
    

    View Slide

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

    View Slide

38. Mise en Pratique
    

    View Slide

39. Version basique
    terminée
    

    View Slide

40. View Slide

41. Fonctionnalités
    additionnelles
    

    View Slide

42. Notifier l’utilisateur
    Aucune connectivité internet
    Pas de donnée
    Chargement en cours
    

    View Slide

43. 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
    

    View Slide

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

    View Slide

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

    View Slide

46. 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
    

    View Slide

47. • 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
    

    View Slide

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

    View Slide

49. Mise en Pratique
    

    View Slide

50. Adaptation Tablette
    

    View Slide

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

    View Slide

52. Moyens mis à
    disposition ?
    

    View Slide

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

    View Slide

54. sw320 dp sw600 dp sw720 dp
    Responsive Design à la sauce Android
    Regroupement par paquet
    

    View Slide

55. Comment
    s’adapter ?
    

    View Slide

56. Réutilisation des vues
    

    View Slide

57. Réorganisation de vues
    

    View Slide

58. Réorganisation du contenu
    

    View Slide

59. Et YANA ?
    

    View Slide

60. View Slide

61. View Slide

62. Mise en Pratique
    

    View Slide

63. Conclusion
    

    View Slide

64. Identifier le problème
    

    View Slide

65. Identifier les solutions
    possibles
    

    View Slide

66. Peser le et le
    

    View Slide

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

    View Slide

68. Utiliser le SDK et les
    librairies existantes !
    

    View Slide

69. 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
    

    View Slide

70. Questions ?
    @Mathieu_Calba
    

    View Slide