Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Un « joli » template ne rendra pas votre produi...

Stéphanie Walter
October 24, 2018

Un « joli » template ne rendra pas votre produit utilisable

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.

Stéphanie Walter

October 24, 2018
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Un joli template ne rendra pas votre produit utilisable Stéphanie

    Walter - UX & UI Designer – Octobre 2018
  2. Un framework UI est 
 un outil qui propose un

    ensemble de composants permettant de construire une interface Définition
  3. Un template désigne 
 un thème graphique appliqué à un

    site web indépendamment 
 de son contenu Définition
  4. « Mais au fait, qui va se charger du design

    de l’application iPad ? » La question qui fâche
  5. « 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
  6. Plus de 15 actions et des allers retours entre 


    différents onglets pour accomplir la tâche. 1 2 3 1 2 3 1 2 3
  7. « 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
  8. Des coups de peinture 
 pour rendre le produit 


    « joli et sympa » #makeitsexy #makeitshiny
  9. Un bel objet, shiny, sexy, flat 2.0, trendy… MAIS, ça

    ne suffira pas. #makeitsexy #makeitshiny
  10. « L’application est jolie et fera l’affaire. On implémentera vos

    propositions ergonomiques dans la prochaine version » #deadline #budget
  11. Des choix d’interface dictés par les contraintes des frameworks, au

    détriment des besoins utilisateurs, pourquoi ?
  12. 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%
  13. 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
  14. 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.”
  15. Un outil de prototype “To give a temporary visual touch

    to a wireframe, this helps some client to project themselves in the wireframe”
  16. 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%
  17. 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%
  18. Une boite à outils magiques dans laquelle on pioche hâtivement

    des composants pour faire avancer le projet ?
  19. Mais si tu vas voir ce composant il fonctionne TRÈS

    bien… Ou pas … Crédit photo Jérémie Cohen
  20. 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
  21. 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 ?
  22. Mais… on a pas de UX designeuse Mais… on a

    pas le temps Mais… on a pas le budget Mais…
  23. 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)
  24. Le support et les ventes en première ligne La boite

    mail du support, un endroit où dénicher des données et retours
  25. Forums, réseaux sociauxet avis en ligne (stores) Arrêtez de suivre

    les concurrents, devancez les grâce aux retours
  26. 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.
  27. Observation et “Street Guerilla” Une après midi de recherche pour

    s’assurer d’avoir les bonnes fonctionnalités
  28. Définition du parcours en amont Un joli template ne vous

    sauvera pas de boucles infinies et d’impasses
  29. s Un choix avisé des gabarits du thème et de

    la navigation Naviginception, aie aie aie !
  30. 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%
  31. “Make the developers aware of the designers constraints, and vice

    et versa“ Compréhension des contraintes
  32. 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)
  33. UX Design UI Design Developpement Une évolution continue tout en

    conservant homogénéité et 
 réutilisabilité du code et des composants
  34. Et ça commence par plus de communication et de collaboration

    entre les équipes de design et de développement.
  35. “ … 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 !”
  36. Le design d’interface 
 N’EST PAS de l’ART 
 Je

    ne colorierai pas ton Bootstrap, bisou.
  37. 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)