Un joli template ne rendra pas
votre produit utilisable
Stéphanie Walter - UX
&
UI Designer – Octobre 2018
Slide 2
Slide 2 text
Un framework UI est
un outil qui propose un
ensemble de composants
permettant de construire
une interface
Définition
Slide 3
Slide 3 text
Un template désigne
un thème graphique
appliqué à un site web
indépendamment
de son contenu
Définition
Slide 4
Slide 4 text
C’est l’histoire d’un projet…
Slide 5
Slide 5 text
Monsieur Client avait
une jolie idée.
Slide 6
Slide 6 text
La dream team
Équipe de
développement
Équipe de
design
Agence de
développement
iOS
Slide 7
Slide 7 text
« Mais au fait, qui va se charger
du design de l’application iPad ? »
La question
qui fâche
Slide 8
Slide 8 text
« 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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
« 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
Slide 11
Slide 11 text
Des coups de peinture
pour rendre le produit
« joli et sympa »
#makeitsexy
#makeitshiny
Slide 12
Slide 12 text
Un bel objet, shiny,
sexy, flat 2.0, trendy…
MAIS, ça ne suffira pas.
#makeitsexy
#makeitshiny
Slide 13
Slide 13 text
Un nouvel espoir…
Slide 14
Slide 14 text
1 matinée,
2 designeuses,
1 nouveau
parcours
Slide 15
Slide 15 text
Enfin, des tests
utilisateur…
une fin heureuse ?
#newhope
Slide 16
Slide 16 text
« L’application est jolie et fera l’affaire.
On implémentera vos propositions
ergonomiques dans la prochaine
version »
#deadline
#budget
Slide 17
Slide 17 text
Des choix d’interface dictés par
les contraintes des frameworks,
au détriment des besoins
utilisateurs, pourquoi ?
Slide 18
Slide 18 text
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%
Slide 19
Slide 19 text
Pssst, les designeuses
et designers utilisent
des frameworks
(mais chut)
C’est aussi un
framework
Slide 20
Slide 20 text
Pourquoi utilise-t-on des
frameworks UI et des templates ?
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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.”
Slide 23
Slide 23 text
Un outil de
prototype
“To give a temporary visual
touch to a wireframe, this
helps some client to project
themselves in the wireframe”
Slide 24
Slide 24 text
Choix du framework UI et
implications des équipes design
Slide 25
Slide 25 text
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%
Slide 26
Slide 26 text
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%
Slide 27
Slide 27 text
Une boite à outils magiques dans laquelle
on pioche hâtivement des composants
pour faire avancer le projet ?
Slide 28
Slide 28 text
Mais si tu vas voir
ce composant il
fonctionne TRÈS
bien…
Ou pas …
Crédit photo Jérémie Cohen
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
L’inception de composants
Slide 31
Slide 31 text
Attention à votre
dette d’interface !
Et si on revoyait
l’architecture
d’information ?
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
To design …
Dessiner ? Concevoir !!!
Slide 34
Slide 34 text
Le design d’interface
n’est PAS de l’ART
C’est la slide
qu’il faut
prendre en
photo
Slide 35
Slide 35 text
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 ?
Slide 36
Slide 36 text
Faire ses devoirs,
faire ses recherches.
01
Slide 37
Slide 37 text
Mais… on a pas de UX designeuse
Mais… on a pas le temps
Mais… on a pas le budget
Mais…
Slide 38
Slide 38 text
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)
Slide 39
Slide 39 text
Le support et les ventes en première ligne
La boite mail du
support, un endroit
où dénicher des
données et retours
Slide 40
Slide 40 text
Forums, réseaux sociauxet avis en ligne (stores)
Arrêtez de
suivre les
concurrents,
devancez les
grâce aux
retours
Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
Outils d’analytics
Slide 43
Slide 43 text
Les questionnaires en ligne,
des données quantitatives à moindre coût
Slide 44
Slide 44 text
Observation et “Street Guerilla”
Une après midi de
recherche pour
s’assurer d’avoir les
bonnes
fonctionnalités
Slide 45
Slide 45 text
Entretiens à distance ou par mail
Asynchrone et à
moindre coût !
Slide 46
Slide 46 text
Construire un plan et une vision globale :
parcours et navigation
02
Slide 47
Slide 47 text
Définition du parcours en amont
Un joli template ne
vous sauvera pas de
boucles infinies et
d’impasses
Slide 48
Slide 48 text
Le parcours aide au choix des gabarits et interactions
Slide 49
Slide 49 text
Architecture d’information solide grâce au tri de carte
Crédit photo Université de Luxembourg
Slide 50
Slide 50 text
s
Un choix avisé des gabarits du thème et de la navigation
Naviginception,
aie aie aie !
Slide 51
Slide 51 text
Composants, wireframes
et prototypes à tester
03
Slide 52
Slide 52 text
Inventaire des contenus / d’interface
Slide 53
Slide 53 text
Crazy 8 - générer des idées de composants de manière collaborative
Slide 54
Slide 54 text
Réutilisabilité et
choix (à plusieurs)
du framework
Crédit photo Julie Muller
Slide 55
Slide 55 text
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%
Slide 56
Slide 56 text
“Make the developers aware of the
designers constraints, and vice et versa“
Compréhension
des contraintes
Slide 57
Slide 57 text
Prise en main du design du framework
Slide 58
Slide 58 text
Wireframe et prototype - entre composants existants et ajouts
Favoriser la
réutilisabilité
des composants
Slide 59
Slide 59 text
Documenter les composants utilisés
Slide 60
Slide 60 text
Test utilisateur -
valider le choix
final du composant
Pensez aux
pré-tests
Slide 61
Slide 61 text
L’expérience utilisateur est la
responsabilité de toute
l’équipe.
Slide 62
Slide 62 text
Design d’interface,
styleguides et documentation
04
Slide 63
Slide 63 text
Limiter les dégâts en cas
d’absence d’équipe de design
Slide 64
Slide 64 text
Garder le
framework comme
il est / utiliser un
thème
Slide 65
Slide 65 text
colorhunt.co
Attention à
l’accessibilité
Slide 66
Slide 66 text
fontawesome.com
Un label
explicite vaut
mieux qu’une
icône mal
comprise
Slide 67
Slide 67 text
fontpair.co
Une seule
police avec
plusieurs
graisses suffit
souvent
Slide 68
Slide 68 text
Documenter les décisions
de design
Slide 69
Slide 69 text
Styleguides et design modulaire
Slide 70
Slide 70 text
Les
composants de
formulaires à
différents états
Slide 71
Slide 71 text
Outils d’inspection pour favoriser la collaboration
Invision,
Zeplin, etc.
Slide 72
Slide 72 text
Spécifications design
Slide 73
Slide 73 text
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)
Slide 74
Slide 74 text
vmware.github.io/clarity
Documentation
design pour
chaque
composant
Slide 75
Slide 75 text
ant.design
Les conseils
d’ergonomie et de
design font partie
de la doc’
Slide 76
Slide 76 text
Intégration et évolutions
(oui, avec un S)
05
Slide 77
Slide 77 text
Intégration à partir
des composants
designés
Slide 78
Slide 78 text
Documenter les
composants
“custom” ajoutés
dans le code
Ce
composant
n’était pas
dans Ant
Slide 79
Slide 79 text
Recette, contrôle qualité et tests
Test utilisateur du
produit final avant
la mise en
production
Slide 80
Slide 80 text
UX Design
UI Design
Developpement
Une évolution continue
tout en conservant
homogénéité et
réutilisabilité du code
et des composants
Slide 81
Slide 81 text
En conclusion …
Slide 82
Slide 82 text
Il est grand temps de remettre
l’humain au centre de nos
processus de conception
Slide 83
Slide 83 text
Et ça commence par plus de
communication et de
collaboration entre les équipes
de design et de développement.
Slide 84
Slide 84 text
“ … 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 !”
Slide 85
Slide 85 text
Le design d’interface
N’EST PAS de l’ART
Je ne
colorierai pas
ton Bootstrap,
bisou.
Slide 86
Slide 86 text
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)