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

Un « joli » template ne rendra pas votre produit utilisable

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

    View Slide

  2. Un framework UI est 

    un outil qui propose un
    ensemble de composants
    permettant de construire
    une interface
    Définition

    View Slide

  3. Un template désigne 

    un thème graphique
    appliqué à un site web
    indépendamment 

    de son contenu
    Définition

    View Slide

  4. C’est l’histoire d’un projet…

    View Slide

  5. Monsieur Client avait 

    une jolie idée.

    View Slide

  6. La dream team
    Équipe de
    développement
    Équipe de
    design
    Agence de
    développement
    iOS

    View Slide

  7. « Mais au fait, qui va se charger
    du design de l’application iPad ? »
    La question
    qui fâche

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  11. Des coups de peinture 

    pour rendre le produit 

    « joli et sympa »
    #makeitsexy
    #makeitshiny

    View Slide

  12. Un bel objet, shiny,
    sexy, flat 2.0, trendy…
    MAIS, ça ne suffira pas.
    #makeitsexy
    #makeitshiny

    View Slide

  13. Un nouvel espoir…

    View Slide

  14. 1 matinée,
    2 designeuses,
    1 nouveau
    parcours

    View Slide

  15. Enfin, des tests
    utilisateur…
    une fin heureuse ?
    #newhope

    View Slide

  16. « L’application est jolie et fera l’affaire.
    On implémentera vos propositions
    ergonomiques dans la prochaine
    version »
    #deadline
    #budget

    View Slide

  17. Des choix d’interface dictés par
    les contraintes des frameworks,
    au détriment des besoins
    utilisateurs, pourquoi ?

    View Slide

  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%

    View Slide

  19. Pssst, les designeuses
    et designers utilisent
    des frameworks 

    (mais chut)
    C’est aussi un
    framework

    View Slide

  20. Pourquoi utilise-t-on des
    frameworks UI et des templates ?

    View Slide

  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

    View Slide

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

    View Slide

  23. Un outil de
    prototype
    “To give a temporary visual
    touch to a wireframe, this
    helps some client to project
    themselves in the wireframe”

    View Slide

  24. Choix du framework UI et
    implications des équipes design

    View Slide

  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%

    View Slide

  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%

    View Slide

  27. Une boite à outils magiques dans laquelle
    on pioche hâtivement des composants
    pour faire avancer le projet ?

    View Slide

  28. Mais si tu vas voir
    ce composant il
    fonctionne TRÈS
    bien…
    Ou pas …
    Crédit photo Jérémie Cohen

    View Slide

  29. View Slide

  30. L’inception de composants

    View Slide

  31. Attention à votre
    dette d’interface !
    Et si on revoyait
    l’architecture
    d’information ?

    View Slide

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

    View Slide

  33. To design …
    Dessiner ? Concevoir !!!

    View Slide

  34. Le design d’interface 

    n’est PAS de l’ART 



    C’est la slide
    qu’il faut
    prendre en
    photo

    View Slide

  35. 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 ?

    View Slide

  36. Faire ses devoirs,
    faire ses recherches.
    01

    View Slide

  37. Mais… on a pas de UX designeuse
    Mais… on a pas le temps
    Mais… on a pas le budget
    Mais…

    View Slide

  38. 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)

    View Slide

  39. Le support et les ventes en première ligne
    La boite mail du
    support, un endroit
    où dénicher des
    données et retours

    View Slide

  40. Forums, réseaux sociauxet avis en ligne (stores)
    Arrêtez de
    suivre les
    concurrents,
    devancez les
    grâce aux
    retours

    View Slide

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

    View Slide

  42. Outils d’analytics

    View Slide

  43. Les questionnaires en ligne,
    des données quantitatives à moindre coût

    View Slide

  44. Observation et “Street Guerilla”
    Une après midi de
    recherche pour
    s’assurer d’avoir les
    bonnes
    fonctionnalités

    View Slide

  45. Entretiens à distance ou par mail
    Asynchrone et à
    moindre coût !

    View Slide

  46. Construire un plan et une vision globale : 

    parcours et navigation
    02

    View Slide

  47. Définition du parcours en amont
    Un joli template ne
    vous sauvera pas de
    boucles infinies et
    d’impasses

    View Slide

  48. Le parcours aide au choix des gabarits et interactions

    View Slide

  49. Architecture d’information solide grâce au tri de carte
    Crédit photo Université de Luxembourg

    View Slide

  50. s
    Un choix avisé des gabarits du thème et de la navigation
    Naviginception,
    aie aie aie !

    View Slide

  51. Composants, wireframes 

    et prototypes à tester
    03

    View Slide

  52. Inventaire des contenus / d’interface

    View Slide

  53. Crazy 8 - générer des idées de composants de manière collaborative

    View Slide

  54. Réutilisabilité et
    choix (à plusieurs)
    du framework
    Crédit photo Julie Muller

    View Slide

  55. 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%

    View Slide

  56. “Make the developers aware of the
    designers constraints, and vice et versa“
    Compréhension
    des contraintes

    View Slide

  57. Prise en main du design du framework

    View Slide

  58. Wireframe et prototype - entre composants existants et ajouts
    Favoriser la
    réutilisabilité
    des composants

    View Slide

  59. Documenter les composants utilisés

    View Slide

  60. Test utilisateur -
    valider le choix
    final du composant
    Pensez aux
    pré-tests

    View Slide

  61. L’expérience utilisateur est la
    responsabilité de toute
    l’équipe.

    View Slide

  62. Design d’interface,
    styleguides et documentation
    04

    View Slide

  63. Limiter les dégâts en cas
    d’absence d’équipe de design

    View Slide

  64. Garder le
    framework comme
    il est / utiliser un
    thème

    View Slide

  65. colorhunt.co
    Attention à
    l’accessibilité

    View Slide

  66. fontawesome.com
    Un label
    explicite vaut
    mieux qu’une
    icône mal
    comprise

    View Slide

  67. fontpair.co
    Une seule
    police avec
    plusieurs
    graisses suffit
    souvent

    View Slide

  68. Documenter les décisions
    de design

    View Slide

  69. Styleguides et design modulaire

    View Slide

  70. Les
    composants de
    formulaires à
    différents états

    View Slide

  71. Outils d’inspection pour favoriser la collaboration
    Invision,
    Zeplin, etc.

    View Slide

  72. Spécifications design

    View Slide

  73. 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)

    View Slide

  74. vmware.github.io/clarity
    Documentation
    design pour
    chaque
    composant

    View Slide

  75. ant.design
    Les conseils
    d’ergonomie et de
    design font partie
    de la doc’

    View Slide

  76. Intégration et évolutions
    (oui, avec un S)
    05

    View Slide

  77. Intégration à partir
    des composants
    designés

    View Slide

  78. Documenter les
    composants
    “custom” ajoutés
    dans le code
    Ce
    composant
    n’était pas
    dans Ant

    View Slide

  79. Recette, contrôle qualité et tests
    Test utilisateur du
    produit final avant
    la mise en
    production

    View Slide

  80. UX Design
    UI Design
    Developpement
    Une évolution continue
    tout en conservant
    homogénéité et 

    réutilisabilité du code
    et des composants

    View Slide

  81. En conclusion …

    View Slide

  82. Il est grand temps de remettre
    l’humain au centre de nos
    processus de conception

    View Slide

  83. Et ça commence par plus de
    communication et de
    collaboration entre les équipes
    de design et de développement.

    View Slide

  84. “ … 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 !”

    View Slide

  85. Le design d’interface 

    N’EST PAS de l’ART 


    Je ne
    colorierai pas
    ton Bootstrap,
    bisou.

    View Slide

  86. 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)

    View Slide