Slide 1

Slide 1 text

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)