Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Un « joli » template ne rendra pas votre produit utilisable

2,185 views

Published on

Grâce à Bootstrap, material design et tous les templates et frameworks sur le marché, il est possible de rapidement lancer un produit dont le design semble visuellement agréable. Pourtant, sans réelle compréhension des besoins utilisateurs et design en amont, beaucoup de ces produits sont “jolis” mais restent inutilisables, voir inutiles.
Le but de ma conférence est de montrer qu’il est tout à fait possible d’utiliser des frameworks UI ou templates pour construire des produits, mais il faut pour ça impliquer l’humain, les utilisatrices et utilisateurs dès le début du projet. Je donne des exemples d’échecs et réussites tirés de vrai projets pour étayer mon propos.

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Un « joli » template ne rendra pas votre produit utilisable

  1. 1. Un joli template ne rendra pas votre produit utilisable Stéphanie Walter - UX & UI Designer – Octobre 2018
  2. 2. Un framework UI est 
 un outil qui propose un ensemble de composants permettant de construire une interface Définition
  3. 3. Un template désigne 
 un thème graphique appliqué à un site web indépendamment 
 de son contenu Définition
  4. 4. C’est l’histoire d’un projet…
  5. 5. Monsieur Client avait 
 une jolie idée.
  6. 6. La dream team Équipe de développement Équipe de design Agence de développement iOS
  7. 7. « Mais au fait, qui va se charger du design de l’application iPad ? » La question qui fâche
  8. 8. « Nous allons 
 les aider avec les parcours, l’architecture d’information, les wireframes et le design d’interface » « Nous allons construire le produit avec 
 notre framework 
 et l’équipe design mettra un coup 
 de peinture » VS Nous Eux
  9. 9. Plus de 15 actions et des allers retours entre 
 différents onglets pour accomplir la tâche. 1 2 31 2 3 1 2 3
  10. 10. « Des améliorations ? Bien sûr, tant que ça rentre dans les composants de notre framework » Quand les composants du framework dictent l’expérience utilisateur
  11. 11. Des coups de peinture 
 pour rendre le produit 
 « joli et sympa » #makeitsexy #makeitshiny
  12. 12. Un bel objet, shiny, sexy, flat 2.0, trendy… MAIS, ça ne suffira pas. #makeitsexy #makeitshiny
  13. 13. Un nouvel espoir…
  14. 14. 1 matinée, 2 designeuses, 1 nouveau parcours
  15. 15. Enfin, des tests utilisateur… une fin heureuse ? #newhope
  16. 16. « L’application est jolie et fera l’affaire. On implémentera vos propositions ergonomiques dans la prochaine version » #deadline #budget
  17. 17. Des choix d’interface dictés par les contraintes des frameworks, au détriment des besoins utilisateurs, pourquoi ?
  18. 18. Quel framework utilisez-vous ? (Plus d’un choix par réponse) Bootstrap Pure CSS Bulma Material UI dashboard template UIKit Foundation 3% 4% 7% 12% 12% 16% 70%
  19. 19. Pssst, les designeuses et designers utilisent des frameworks 
 (mais chut) C’est aussi un framework
  20. 20. Pourquoi utilise-t-on des frameworks UI et des templates ?
  21. 21. Pourquoi utiliser vous des frameworks UI ou templates ? (Plus d’un choix par réponse) 12% 13% 24% 30% 35% 49% Pas de temps pour construire des composants spécifiques Pas de budget pour construire des composants spécifiques Un choix imposé par le client Le framework était déjà utilisé sur le projet Pas de compétence HTML CSS pour construire de zéros Pas de compétences de design pour designer les composants
  22. 22. Uniformisation 
 et base commune pour les équipes “It provides a good and flexible structure for every projets we are working on. (…) Every team member share the same code and knowledge.”
  23. 23. Un outil de prototype “To give a temporary visual touch to a wireframe, this helps some client to project themselves in the wireframe”
  24. 24. Choix du framework UI et implications des équipes design
  25. 25. Qui choisi le Framework (Plus d’un choix par réponse) L’équipe de développement L’équipe de design Le client Les chefs de projet 12% 23% 30% 72%
  26. 26. Quand est choisi le framework (Plus d’un choix par réponse) Avant le début du projet En début de projet Phase d’analyse Après les wireframe Après le design Avant le code 4% 52% 8% 10% 2% 18%
  27. 27. Une boite à outils magiques dans laquelle on pioche hâtivement des composants pour faire avancer le projet ?
  28. 28. Mais si tu vas voir ce composant il fonctionne TRÈS bien… Ou pas … Crédit photo Jérémie Cohen
  29. 29. L’inception de composants
  30. 30. Attention à votre dette d’interface ! Et si on revoyait l’architecture d’information ?
  31. 31. Je veux que ça en jette Ajoute de jolies couleurs sur le Bootstrap et on est bons Tu peux me le rendre un peu plus sexy ? Il faut que ça claque Plus gros le logo !! We need to Wow the user Il nous faut quelque chose de plus fun ! Non mais j’ai pas tes talents artistiques moi On est pas chiants on veut juste un truc moins moche Grille disponible en PDF
  32. 32. To design … Dessiner ? Concevoir !!! 😠 😓
  33. 33. Le design d’interface 
 n’est PAS de l’ART 
 👏 📸 C’est la slide qu’il faut prendre en photo
  34. 34. Comment est-ce que je remets l’humain au coeur de mon processus de conception tout en continuant d’utiliser des thèmes et des frameworks UI ?
  35. 35. Faire ses devoirs, faire ses recherches. 01
  36. 36. Mais… on a pas de UX designeuse Mais… on a pas le temps Mais… on a pas le budget Mais…
  37. 37. Mais… on a pas de UX designeuse Mais… on a pas le temps Mais… on a pas le budget Mais… L’expérience utilisateur est une compétence pluridisciplinaire (pas juste un joli titre sur un CV)
  38. 38. Le support et les ventes en première ligne La boite mail du support, un endroit où dénicher des données et retours
  39. 39. Forums, réseaux sociauxet avis en ligne (stores) Arrêtez de suivre les concurrents, devancez les grâce aux retours
  40. 40. Mais… on a pas de UX designeuse Mais… on a pas le temps Mais… on a pas le budget Mais… Mais… ça va vous coûter bien plus cher plus tard, si vous ne 
 le faites pas.
  41. 41. Outils d’analytics
  42. 42. Les questionnaires en ligne, des données quantitatives à moindre coût
  43. 43. Observation et “Street Guerilla” Une après midi de recherche pour s’assurer d’avoir les bonnes fonctionnalités
  44. 44. Entretiens à distance ou par mail Asynchrone et à moindre coût !
  45. 45. Construire un plan et une vision globale : 
 parcours et navigation 02
  46. 46. Définition du parcours en amont Un joli template ne vous sauvera pas de boucles infinies et d’impasses
  47. 47. Le parcours aide au choix des gabarits et interactions
  48. 48. Architecture d’information solide grâce au tri de carte Crédit photo Université de Luxembourg
  49. 49. sUn choix avisé des gabarits du thème et de la navigation Naviginception, aie aie aie !
  50. 50. Composants, wireframes 
 et prototypes à tester 03
  51. 51. Inventaire des contenus / d’interface
  52. 52. Crazy 8 - générer des idées de composants de manière collaborative
  53. 53. Réutilisabilité et choix (à plusieurs) du framework Crédit photo Julie Muller
  54. 54. Sur quels critères ? (Plus d’un choix par réponse) Le support et la communauté Le langage supporté La qualité visuelle des composants La diversité des composants 52% L’accessibilité 30% 52% 54% 58%
  55. 55. “Make the developers aware of the designers constraints, and vice et versa“ Compréhension des contraintes
  56. 56. Prise en main du design du framework
  57. 57. Wireframe et prototype - entre composants existants et ajouts Favoriser la réutilisabilité des composants
  58. 58. Documenter les composants utilisés
  59. 59. Test utilisateur - valider le choix final du composant Pensez aux pré-tests
  60. 60. L’expérience utilisateur est la responsabilité de toute l’équipe.
  61. 61. Design d’interface, styleguides et documentation 04
  62. 62. Limiter les dégâts en cas d’absence d’équipe de design
  63. 63. Garder le framework comme il est / utiliser un thème
  64. 64. colorhunt.co Attention à l’accessibilité
  65. 65. fontawesome.com Un label explicite vaut mieux qu’une icône mal comprise
  66. 66. fontpair.co Une seule police avec plusieurs graisses suffit souvent
  67. 67. Documenter les décisions de design
  68. 68. Styleguides et design modulaire
  69. 69. Les composants de formulaires à différents états
  70. 70. Outils d’inspection pour favoriser la collaboration Invision, Zeplin, etc.
  71. 71. Spécifications design
  72. 72. Take the time to document the choices of the designer (from the framework to each specific component) to make sure the decisions are understood and the components correctly applied without having to discuss it every time a new person enters the team. Documenter les décisions de design (pas juste le code)
  73. 73. vmware.github.io/clarity Documentation design pour chaque composant
  74. 74. ant.design Les conseils d’ergonomie et de design font partie de la doc’
  75. 75. Intégration et évolutions (oui, avec un S) 05
  76. 76. Intégration à partir des composants designés
  77. 77. Documenter les composants “custom” ajoutés dans le code Ce composant n’était pas dans Ant
  78. 78. Recette, contrôle qualité et tests Test utilisateur du produit final avant la mise en production
  79. 79. UX Design UI Design Developpement Une évolution continue tout en conservant homogénéité et 
 réutilisabilité du code et des composants
  80. 80. En conclusion …
  81. 81. Il est grand temps de remettre l’humain au centre de nos processus de conception
  82. 82. Et ça commence par plus de communication et de collaboration entre les équipes de design et de développement.
  83. 83. “ … Afin qu’ils (équipes de design et de développement) comprennent qu'ils ne doivent pas être ennemis et qu'ils peuvent tout à fait travailler ensemble !”
  84. 84. Le design d’interface 
 N’EST PAS de l’ART 
 👏 Je ne colorierai pas ton Bootstrap, bisou. 😘
  85. 85. UX & UI Designer Mobile expert. Pixel & CSS Lover. Google Dev Expert Product Design stephaniewalter.design @WalterStephanie 🦊 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)

×