-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathslides-fr.html
More file actions
executable file
·1191 lines (961 loc) · 60.1 KB
/
slides-fr.html
File metadata and controls
executable file
·1191 lines (961 loc) · 60.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Femmes en programmation</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- S'occupe des préfixes CSS3 -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- Ouvre tous les liens dans une nouvelle fenêtre -->
<base target="_blank">
</head>
<!-- Barre de progression / durée : définissez la durée de la présentation en minutes avec « data-duration ». -->
<body class="en" data-duration="300">
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/llc-logo-stacked-white.png" alt="Logo de Femmes en programmation">Bienvenue!</h1>
<div class="instructions">
<!-- AJOUTEZ LES INFOS SUR LE WI-FI ICI -->
<h2>Connectez- <br>vous</h2>
<p><strong>Réseau Wi-Fi:</strong></p>
<p><strong>Mot de passe :</strong></p>
<hr>
<h2>Téléchargez<br> et installez</h2>
<ol class="downloads">
<li>Fichiers d'apprentissage (dossier zip) : <a href="https://github.com/ladieslearningcode/llc-ux/archive/master.zip">http://bit.ly/llc-ux</a>
<ul>
<li>Dézippez le dossier zip (<em>Extraire tout</em> sur Windows)</li>
<li>Ouvrez <em>diapositives.html</em> dans le navigateur pour afficher les diapositives.</li>
</ul>
</li>
<li>Pop par Marvel (application mobile à télécharger)</li>
<ul>
<li><a href="https://apps.apple.com/us/app/marvel-app/id765801658">Télécharger l'app iPhone</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.marvelapp">Télécharger l'app Android</a></li>
</ul>
<li>Navigateur Chrome : <a href="https://www.google.ca/chrome/browser/desktop/">https://www.google.ca/chrome</a><br><br></li>
</li>
</ol>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Licence Creative Commons" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Contenu créé par Sara S. pour <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.ca" property="cc:attributionName" rel="cc:attributionURL">Canada en programmation</a></p>
<p class="right">Utilisez les flèches gauche <span class="arrow">←</span> et droite <span class="arrow">→</span> pour naviguer</p>
</footer>
</section>
<section class="slide intro">
<img class="logo" src="framework/img/llc-logo-white.png" alt="Logo de Femmes en programmation">
<h1 class="heading-bg">
<span>Introduction <br>à la conception <br>d'expérience utilisateur (UX)</span>
</h1>
<ul>
<li><a href="http://twitter.com/learningcode">@learningcode</a></li>
<li><a href="https://twitter.com/search?q=%23femmesenprogrammation&src=typd">#femmesenprogrammation</a></li>
</ul>
<div class="sponsor">
<p>En partenariat avec<br><br><img src="framework/img/google-org-logo.svg" alt="Google.org"><img src="framework/img/td-logo-white.svg" alt="TD"></p>
</div>
</section>
<section class="slide centered" data-markdown data-toc>
<script type="text/template">
#Introductions
<iframe width="560" height="315" src="https://www.youtube.com/embed/0be9qXscmzY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Le code des programmeuses
1. Soyez accueillantes et chaleureuses.
1. Choisissez bien vos mots et vos actions.
1. Respectez l'espace des autres durant les conversations.
1. Posez des questions.
1. Faites de votre mieux (et amusez-vous!).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Objectifs d'apprentissage
##Durant cet atelier, nous aborderons...
* Comment la conception de l'expérience utilisateur affecte notre vie tant positivement que négativement
* Comment l'expérience utilisateur (UX) et l'interface utilisateur (IU) sont liées
* Comment les caractéristiques comme le genre, la culture, la langue et l'expérience influencent notre façon de voir la technologie au quotidien
* Comment travailler en équipe pour résoudre des problèmes concrets
* Quelles sont les responsabilités et les décisions des utilisateurs et des concepteurs par rapport aux attitudes et comment agir en bon citoyen numérique
* Comment faire des rétroactions constructives sur la conception
</script>
</section>
<section class="slide two-col-list" data-markdown>
<script type="text/template">
# Plan de l'atelier
<div class="table-of-contents">
</div>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
# Équité
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce que l'équité?
Le mot « équité » veut dire « justice ». On dit qu'il y a équité lorsque tout le monde a les ressources nécessaires pour améliorer sa situation ou sa qualité de vie. L'équité est une solution temporaire; idéalement, nous devrions tous viser la **libération**.
<img src="framework\img\Equality-Equity-Liberation.jpg" alt="Égalité, équité, libération, par Angus Maguire." style="width:70%;"><!-- .element: class="delayed" -->
---
###Ressources
* [Image d'Interaction Institute for Social Change | Artiste : Angus Maguire](http://interactioninstitute.org/illustrating-equality-vs-equity/)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Qu'est-ce que l'expérience utilisateur (UX)?
</script>
</section>
<section class="centered">
<div class="slide">
<img src="framework/img/steve-jobs.jpg" alt="Steve Jobs" style="max-width: 50%;">
<h4>« La conception n'est pas que l'apparence et la sensation que nous avons en utilisant un produit. La conception est le fonctionnement du produit. » </h4>
<p><i>Steve Jobs</i></p>
</div>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce que la conception d'expérience utilisateur?
<!-- .element: class="delayed" -->La conception d'expérience utilisateur (UX) est le processus <b>d'amélioration de la satisfaction et de la fidélité des utilisateurs</b> en <b>facilitant l'utilisation et en rendant agréable</b> l'<b>intéraction entre le client et le produit</b>.
---
###Ressources
* [Page Wikipedia - UX](https://en.wikipedia.org/wiki/User_experience_design)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#D'où vient ce terme?
<!-- .element: class="delayed" --><img src="framework\img\don-norman.jpeg" alt="Steve Jobs" style="width: 400px;">
<!-- .element: class="delayed" -->
Don Norman, spécialiste en sciences cognitives et cofondateur de Nielsen Norman Group Design Consultancy, a inventé le terme « expérience utilisateur » en 1995 en faisant cette déclaration : <b>« l'expérience utilisateur englobe tous les aspects de l'interaction de l'utilisateur final avec l'entreprise, ses services et ses produits. »</b>
<p></p>
#Et la conception?<!-- .element: class="delayed" -->
<!-- .element: class="delayed" -->L'expérience utilisateur comprend <b>tous les médiums</b>, pas seulement la conception graphique. Elle inclut, notamment, les interactions avec les autres personnes, les médiums imprimés ou numériques et même le processus de réparation d'un meuble IKEA!
---
###Ressources
* [Don Norman - UX](https://www.nngroup.com/articles/definition-user-experience/)
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Les éléments de l'EU
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les éléments de l'EU
**Stratégie** : analyse des concurrents et des produits, personas d'utilisateurs, structure de produit, rédaction de contenu<br>
**Prototype** : maquettage, essai et itération, planification, ordinateurs et plateformes mobiles<br>
**Exécution** : conception de l'interface utilisateur (polices, interactions, graphiques et couleurs), suivi des objectifs, développement
<img src="framework\img\ux-strategy_fr.png" alt="Stratégie d'EU" style="width:30%;">
<img src="framework\img\ux-prototyping_fr.png" alt="Prototype d'EU" style="width:30%;">
<img src="framework\img\ux-execution_fr.png" alt="Exécution de l'EU" style="width:30%;">
</script>
</section>
<section class="slide centered">
<img src="framework\img\suzanne-cryer.gif" alt="Suzanne Cryer, gif" style="max-width: 350px;">
<p class="delayed">Êtes-vous perdues? Ne vous inquiétez pas, nous verrons le tout en détails bientôt. 👍</p>
</section>
<section class="slide two-col-list" data-markdown>
<script type="text/template">
# Exemple d'une bonne expérience utilisateur
* Effacer un compte Mailchimp
<img src="framework\img\good-ux-mailchimp.png" alt="Exemple d'une bonne UX dans Mailchimp" style="width: 600px;">
* Exemple d'une mauvaise expérience utilisateur</h3>
<img src="framework\img\Bad-UX-Update-Messenger.jpg" alt="Exemple d'une manoeuvre trompeuse d'expérience utilisateur dans Facebook Messenger" style="width: 350px;">
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Résumé
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#La conception d'expérience utilisateur est...
* <!-- .element: class="delayed" -->Le processus de <b>développement et d'amélioration de l'interaction</b> entre un utilisateur et toutes les étapes d'un service ou d'un produit d'une entreprise.
* <!-- .element: class="delayed" -->La mise en place du processus complet de recherche, d'essai, de développement, de contenu et de création de prototype pour <b>valider une conception.</b>
* <!-- .element: class="delayed" -->En théorie, un processus analogique (pas numérique) qui est quand même <b>utilisé et défini par les entreprises numériques</b> aujourd'hui.
**Stratégie, découverte, analyse, conception et production.**<!-- .element: class="delayed" -->
<!--<img src="framework\img\Cindy-Wilcox-UX-Process.png" alt="Le processus d'expérience utilisateur par Cindy Wilcox" style="padding: 1em 0;">-->
---
###Ressources
* [Cindy Wilcox - Le processus d'expérience utilisateur](http://cindyology.com/process/)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Qu'est-ce que l'interface utilisateur? (IU)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce que la conception de l'interface utilisateur?
L'interface utilisateur réfère à <b>l'apparence et à la sensation</b> ou à la <b>présentation et à l'interactivité</b> d'un produit.
Elle s'applique strictement aux interfaces numériques, contrairement à l'expérience utilisateur.
<img src="framework\img\Sterre Hendriks-3dsnow.gif" alt="Image d'effet de lancer par Sterre Hendriks" style="padding: 1em 0;">
[Image d'effet de lancer par Sterre Hendriks](https://dribbble.com/shots/2397610-Snowy-day)
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Les éléments de l'IU
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les éléments de l'IU
**Apparence et sensation** : analyse de la clientèle, études sur la conception, image de marque et graphiques, témoignages d'utilisateurs<br>
**Réactivité et interactivité** : maquettes haute fidélité, interactions et animations, adaptation aux différentes tailles d'écran, collaboration avec les développeurs<br>
<img src="framework\img\ui-lookandfeel_fr.png" alt="Apparence et sensation de l'IU" style="width:40%;">
<img src="framework\img\ui-interaction_fr.png" alt="Interaction avec l'IU" style="width:40%;">
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Résumé
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#La conception de l'interface utilisateur est...
* <!-- .element: class="delayed" -->La transposition des atouts et des graphiques d'une marque dans l'interface d'un produit pour <b>améliorer l'expérience de l'utilisateur.</b>
* <!-- .element: class="delayed" -->Le processus d'<b>orientation visuelle</b> dans l'interface d'un produit avec des éléments interactifs sur toutes les plateformes (p. ex., macOS, Windows) et tailles d'écran.
* <!-- .element: class="delayed" -->Principalement l'affaire des <b>interfaces numériques,</b> contrairement à l'UX qui s'applique tant aux produits numériques qu'analogiques.
---
###Ressources
* [UXPin - Processus de conception d'une l'interface utilisateur Web](https://www.uxpin.com/studio/ebooks/mockups-ux-design-process/)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Comment l'UX et l'IU sont-elles liées?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#La complémentarité de l'UX et de l'IU
### « Un produit magnifique, mais difficile à utiliser, est un exemple d'interface utilisateur réussie et d'expérience utilisateur ratée. Si un produit est facile d'utilisation, mais que son apparence laisse à désirer, on parle d'une interface utilisateur ratée et d'une expérience utilisateur réussie." _-Helga Moreno_
<br/>
Bouteille de ketchup Heinz : IU (gauche) et UX (droite)
<img src="framework\img\heinz-ketchup-ux-ui.png" alt="Une comparaison des changements apportés à la bouteille de ketchup Heinz. L'image à gauche est la bouteille originale en verre (qui représente l'IU) et l'image à droite est la bouteille à presser (qui représente l'EU).">
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Outils et méthodes
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Le cycle de conception
<img src="framework\img\design-thinking_fr.png" alt="Diagramme du cycle de conception participatoire" style="width:70%;"><!-- .element: class="delayed" -->
##Étapes abordées :<!-- .element: class="delayed" -->
* Découverte des besoins<!-- .element: class="delayed" -->
* Remue-méninges<!-- .element: class="delayed" -->
* Mise à l'essai des idées<!-- .element: class="delayed" -->
---
###Ressources
* Le design thinking en design de service Credit : SIGMA
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
<img src="framework\img\yougotthis.gif" alt="Gif de Franchesca Ramsey disant « You Got This »" style="width: 600px;">
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Introduction aux études sur les utilisateurs
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#L'importance des études sur l'EU
<img src="framework\img\why-ux-research.png" alt="Image drôle d'un homme qui essaie de boire dans une tasse avec une conception qui lui fait mal aux yeux" style="height: 500px;">
---
###Ressources
* [Image de Twitter](https://twitter.com/fahmitsu/status/1107543711469072384)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce que la recherche sur les utilisateurs?
<!-- .element: class="delayed" -->Le processus servant à comprendre <b>le comportement, les besoins et les attitudes des utilisateurs</b> à l'aide de méthodes différentes d'observation et de collecte de rétroactions.
<!-- .element: class="delayed" -->Les études sur les utilisateurs nous aident à développer de l'empathie envers les utilisateurs et à comprendre leur mode de vie. Grâce à ces connaissances, nous pouvons <b>concevoir des solutions et les adapter à leurs besoins de manière éclairée.</b>
---
###Ressources
* [Automattic - Les quatre planètes de la conception](https://automattic.design/2019/03/03/the-four-planets-of-design/)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Découverte
##Comprendre les utilisateurs
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Découverte
### Comprendre et définir des idées. 📝
* <!-- .element: class="delayed" -->Objectifs
- Quelles sont les informations manquantes?
* <!-- .element: class="delayed" -->Hypothèses
- Quelles sont mes connaissances des utilisateurs, selon moi?
* <!-- .element: class="delayed" -->Méthodes
- Selon le temps et la main-d'oeuvre dont je dispose, quelles méthodes devrais-je utiliser?
* <!-- .element: class="delayed" -->Réaliser
- Collecter des données avec mes méthodes choisies.
* <!-- .element: class="delayed" -->Synthétiser
- Trouver les informations manquantes, confirmer ou infirmer mes hypothèses et explorer des occasions pour la conception.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Comment puis-je comprendre mes utilisateurs? 🤔
* <!-- .element: class="delayed" -->Se mettre à la place d'un débutant
* <!-- .element: class="delayed" -->Utiliser le produit
* <!-- .element: class="delayed" -->Poser les cinq questions (qui, quoi, quand, où, comment)
* <!-- .element: class="delayed" -->Faire des entrevues individuelles en faisant preuve d'empathie
* <!-- .element: class="delayed" -->Développer son empathie avec des analogies
* <!-- .element: class="delayed" -->Utiliser des journaux photo et vidéo basés sur les expériences des utilisateurs
* <!-- .element: class="delayed" -->Discuter avec des utilisateurs types
* <!-- .element: class="delayed" -->Récits d'expérience
* <!-- .element: class="delayed" -->Jeux de rôle
* <!-- .element: class="delayed" -->Créer des cartes de parcours et d'affinités
##<!-- .element: class="delayed" -->Avant tout : **observer 👀 et écouter** 👂
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Examples
<img src="framework\img\nn-empathy-map.png" alt="Exemple d'une carte d'empathie" style="height: 400px;">
Carte de l'empathie
* La carte indique quatre aspects principaux (dire, penser, faire, ressentir) sur lesquels nous devrions nous concentrer. Ils nous permettent d'avoir un aperçu de l'expérience d'un utilisateur.
<img src="framework\img\nn-journey-map.png" alt="Exemple d'une carte de parcours" style="height: 400px;">
Carte du parcours du client
* La carte raconte le parcours d'engagement d'une personne avec une marque ou un produit pour atteindre un but.
<img src="framework\img\affinity-map.jpg" alt="Exemple d'une carte d'affinités" style="height: 350px;">
Carte d'affinité
* La carte nous aide à collecter une grande quantité de données et à les diviser en groupes ou en thèmes selon leurs liens.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Personas
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce qu'un persona?
<!-- .element: class="delayed" -->Un persona est une représentation du **groupe principal de personnes** qui utiliseraient un produit. Les personas sont des profils fictifs fondés sur de **véritables données** qui décrivent les utilisateurs finaux. Ces utilisateurs peuvent être des utilisateurs actuels ou futurs.
<!-- .element: class="delayed" --><img src="framework\img\persona-template_fr.png" alt="Exemple de persona d'utilisateur"/>
---
###Ressources
* [Neilsen Norman Group - Personas](https://www.nngroup.com/articles/persona/)
* [Modèles de personas JustInMind](https://www.justinmind.com/blog/user-persona-templates/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#<!-- .element: class="delayed" -->Pourquoi les personas sont-ils importants?
* <!-- .element: class="delayed" -->Ils nous permettent de nous concentrer sur certains utilisateurs.
* <!-- .element: class="delayed" -->Ils sont une façon de tisser des liens avec les utilisateurs.
* <!-- .element: class="delayed" -->Ils servent de point de référence pendant la conception d'un produit ou d'un logiciel.
* <!-- .element: class="delayed" -->Ils nous aident à développer de l'empathie, à comprendre les gens pour qui nous concevons le produit et à définir les problèmes à résoudre.
- <!-- .element: class="delayed" -->Remarque - l'empathie n'est **pas** la même chose que la sympathie. La sympathie est le sentiment de pitié ou de tristesse pour l'utilisateur. En tant que concepteurs, nous souhaitons comprendre le point de vue des utilisateurs, leurs sentiments et leurs difficultés.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Faisons une activité!
##Formez des groupes de 3 ou 4 personnes à votre table.
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 1 - Remue-méninges sur un problème - 10 minutes
En grand groupe, trouvons de 3 à 5 problèmes fréquents rencontrés au quotidien.
Ensuite, nous passerons au vote pour attribuer un problème aux équipes. Les équipes travailleront sur ce problème durant le reste de l'atelier.
##Si vous avez de la difficulté à trouver des idées, voici quelques exemples :<!-- .element: class="delayed" -->
* Comment encourager les gens à manger de la nourriture qui est bonne pour la santé?<!-- .element: class="delayed" -->
* Comment encourager les gens à marcher ou à faire plus d'exercice?<!-- .element: class="delayed" -->
* Comment prévenir l'intimidation?<!-- .element: class="delayed" -->
* Comment encourager les gens à recycler?<!-- .element: class="delayed" -->
* Comment réduire les problèmes de surachalandage du transport en commun?<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 2 - Résolution de problèmes avec les personas - 20 minutes
##Maintenant que vous comprenez les personas, le temps est venu d'en créer un!
<ol class="delayed">
<li>
Utilisez le modèle de persona, remplissez les catégories et créez un persona d'utilisateur qui pourrait rencontrer le problème. Consultez l'[exemple précédent](#slide37) au besoin.
</li>
<li>Trouvez des idées pour résoudre les problèmes de vos utilisateurs à l'aide de vos personas.</li>
<li>Écrivez **une idée** par papillon adhésif.</li>
<li>Prenez les 5 dernières minutes pour déterminer les idées les plus **pratiques** (une ou deux idées). Vous concrétiserez ces idées dans la prochaine activité!</li>
<li> N'oubliez pas que votre but est de créer une **solution numérique** (un site Web ou une app) qui **répond aux besoins des utilisateurs**.</li>
</ol>
<img src="framework\img\persona-template_blank_fr.png" alt="Image d'un modèle de persona vierge" style="width:40%;"/>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Prototypes
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce qu'un prototype?
* <!-- .element: class="delayed" -->Un prototype est une **représentation simple** de l'apparence ou du fonctionnement d'un produit. Les prototypes sont créés avec un **effort minimal** pour faciliter l'improvisation.
* <!-- .element: class="delayed" -->Le prototype peut être fait tout simplement en papier ou sur un support numérique interactif.
* <!-- .element: class="delayed" -->Un bon prototype devrait être capable **de représenter le produit et d'en réaliser les fonctions** autant que possible.
* <!-- .element: class="delayed" -->Les prototypes peuvent être de basse ou de haute fidélité, peu importe le support.
<div class="float-left delayed">
Prototype en papier, basse fidélité
<br />
<img src="framework\img\paper-prototype.jpg" alt="Image d'un prototype en papier" style="width: 600px;"></div>
<div class="float-right delayed">
Prototype numérique, haute fidélité
<br />
<img src="framework\img\digital-prototype.png" alt="Image d'un prototype numérique" style="width: 550px;"></div>
<div class="clear-float"></div>
---
###Ressources
* [Amy Mae Roberts - créer un prototype vestimentaire](http://www.amymaeroberts.com/paper-prototype-wearable-uis/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Pourquoi créer un prototype?
###Les prototypes nous permettent de valider rapidement des idées. ✔ <!-- .element: class="delayed" -->
* Comme les prototypes sont créés avec un effort minimal, il est facile d'apporter des changements à la conception ou aux fonctionnalités.<!-- .element: class="delayed" -->
Ainsi, nous pouvons générer et valider des idées rapidement.
###Les prototypes nous permettent d'économiser du temps et de l'argent. 💰⌛ <!-- .element: class="delayed" -->
* Les aspects problématiques peuvent être trouvés et résolus le plus rapidement possible dans le processus de conception. Plus vous réglerez les problèmes tôt dans le processus, plus votre équipe économisera du temps et de l'argent.<!-- .element: class="delayed" -->
###Les prototypes nous permettent d'inclure tout le monde dans le processus de conception. 👨🏾💻👩🏻💻 <!-- .element: class="delayed" -->
* Même les plus petits projets ont plusieurs parties prenantes. Il est important d'engager tout le monde dans vos projets du début jusqu'à la fin, c'est-à-dire de la simple idée au produit fini.<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 3 - Prototype papier - 30 minutes
<ol class="delayed">
<li>
Avec vos personas et vos idées, commencez à dessiner des prototypes simples en papier qui représenteront l'apparence et la fonctionnalité du produit.</li>
<li>N'hésitez pas à regarder les apps qui comblent un besoin similaire pour vous en inspirer.</li>
</ol>
<img src="framework\img\tom-paper-iphone.gif" alt="Gif de Tom Haverford de Parks and Recreation qui tient un iPhone en papier." class="delayed"></div>
*Un iPhone en papier*<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##Objectifs :
* <!-- .element: class="delayed" -->Quel est le problème à régler ou le besoin à combler?
* <!-- .element: class="delayed" -->Qui sont les utilisateurs ou les clients?
* <!-- .element: class="delayed" -->Que doit faire le produit?
##<!-- .element: class="delayed" -->Comprendre les besoins :
* <!-- .element: class="delayed" -->Quelle est l'action que l'utilisateur souhaite accomplir au quotidien? Comment ce produit peut-il l'aider?
* <!-- .element: class="delayed" -->Comment le produit peut-il rendre sa vie plus agréable ou amusante?
##<!-- .element: class="delayed" -->Comprendre les difficultés :
* <!-- .element: class="delayed" -->Quels sont les problèmes rencontrés par l'utilisateur? Quelles sont ses critiques les plus importantes?
* <!-- .element: class="delayed" -->Comment aider l'utilisateur à accomplir sa tâche ou à atteindre son but facilement?
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Version et livraison
##Systèmes de conception et création de maquette
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce qu'une maquette?
* <!-- .element: class="delayed" -->Une maquette est une **représentation visuelle** d'une page ou d'une app tôt réalisée tôt dans le processus d'un projet afin d'obtenir l'approbation des parties prenantes et des membres de l'équipe avant l'étape de création.
* <!-- .element: class="delayed" -->Les maquettes peuvent servir à **créer une aide à la navigation** qui s'assurera que la terminologie est uniforme et que la structure du projet répond aux attentes des utilisateurs.
<div class="float-left delayed">
Maquette d'un site Web
<br />
<img src="framework\img\nn-wireframe.png" alt="Image d'une maquette" style="width: 550px;">
</div>
<div class="float-right delayed">
Maquette papier d'un flux d'app
<br />
<img src="framework\img\nn-wireflow.jpg" alt="Image d'une maquette papier d'un flux d'app" style="width: 550px;">
</div>
<div class="clear-float"></div>
---
###Ressources
* [Images de NN Group](https://www.nngroup.com/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Qu'est-ce qu'un système de conception?
Il s'agit d'un langage visuel commun compris par toutes les équipes qui travaillent sur le produit.<!-- .element: class="delayed" -->
##À quoi sert-il?<!-- .element: class="delayed" -->
Il sert à réduire la « dette de conception », à accélérer le processus de conception et à bâtir des ponts entre les différentes équipes du projet.<!-- .element: class="delayed" -->
##En quoi le système de conception nous aide-t-il?<!-- .element: class="delayed" -->
Il facilite la transition entre les prototypes et les maquettes.<!-- .element: class="delayed" -->
##<!-- .element: class="delayed" -->Exemples de systèmes de conception
* <!-- .element: class="delayed" -->[Apple : règles directrices sur l'interface humaine](https://developer.apple.com/design/human-interface-guidelines/)
* <!-- .element: class="delayed" -->[IBM : Carbon](https://www.carbondesignsystem.com/)
* <!-- .element: class="delayed" -->[Shopify : Polaris](https://polaris.shopify.com/)
---
###Ressources
* [Guide sur les systèmes de conception](https://www.designbetter.co/design-systems-handbook)
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 4 - Prototype interactif - 15 minutes
##Utilisez vos prototypes pour créer des maquettes interactives!
* Les maquettes nous permettent de **simplifier l'interface** avec des formes et une disposition idéales. Elles sont pratiques lorsque l'on veut communiquer des structures de haut niveau.
* Il n'est **pas obligatoire** d'utiliser de la couleur si vous avez une maquette de basse (ou de moyenne) fidélité.
Découvrez comment utiliser Marvel dans la prochaine diapositive.
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 4 - Marvel
##Avez cette app, vous pouvez ajouter de l'interactivité à vos prototypes papier et les essayer!
<br>
##Tutoriel :
<iframe width="300" height="550" src="framework\img\marvel-pop-tutorial.mp4" frameborder="0"></iframe>
##Conseil :
* Tapez le bouton bleu pour afficher un aperçu du prototype.
* Tapez « Add Link » pour jumeler vos écrans et vos interactions.
* Tapez les trois points '...' pour afficher plus d'options de modification d'écran.
<img src="framework\img\marvel-pop-tips.jpg" alt="Captures d'écran de l'app Marvel Pop">
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Essai par les utilisateurs
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#En quoi consiste un essai par les utilisateurs?
<p class="delayed">Les essais par les utilisateurs nous permettent d'obtenir le plus de rétroactions possible, le plus tôt possible.</p>
<h3 class="delayed">Les essais peuvent être faits en tout temps, mais voici quelques situations où ils sont particulièrement appropriés :</h3>
<ul class="delayed">
<li>Lorsque vous souhaitez essayer un produit dont vous changerez la conception bientôt.</li>
<li>Lorsque vous essayez les produits des concurrents afin de vous en inspirer, surtout si vous visez le même public.</li>
<li>Lorsque vous mettez à l'essai un produit en cours de développement.</li>
</ul>
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Pourquoi faire des essais avec les utilisateurs?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##Plus vous déterminerez les problèmes rapidement, moins ils seront coûteux à régler.
<h3 class="delayed">Les essais d'utilisation vous aideront à :</h3>
<ul class="delayed">
<li>Voir si les utilisateurs sont capables d'accomplir certaines tâches.</li>
<li>Voir l'efficacité des utilisateurs lorsqu'ils réalisent des tâches prédéterminées.</li>
<li>Déterminer des changements à apporter à la conception afin de régler des problèmes et d'améliorer la performance.</li>
<li>Comprendre si la conception règle le problème.</li>
<li>Comprendre si la conception est agréable pour l'utilisateur.</li>
</ul>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Essai par les utilisateurs - Partie 1
##Avant l'essai
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
<h2 class="delayed">Partie 1 - Avant l'essai</h3>
<h3 class="delayed">Créer un plan d'essai et un script</h3>
<ol class="delayed">
<li>Un essai efficace prend habituellement de 30 à 60 minutes par utilisateur.</li>
<ul><li>Plus l'essai est long, plus l'utilisateur se fatigue. Il est donc conseillé de bien planifier votre essai.</li>
<li>Idéalement, une séance d'essai est réalisée en équipe de deux : un **animateur** et un **preneur de notes**. </li></ul>
<ul>
<li>L'animateur se concentre sur la mise en oeuvre de l'essai et l'interaction avec le participant.</li>
<li>Le preneur de notes observe et écrit le déroulement de la séance.</li>
</ul>
<li>Développez un **plan d'essai solide** qui décrit l'essai d'utilité. Ainsi, lorsque vous réaliserez l'essai avec d'autres personnes, le déroulement se fera de manière constante.</li>
</ol>
<h3 class="delayed">Trouver des participants</h3>
<ol class="delayed">
<li>Déterminez des critères de recrutement de participants afin que vous puissiez réaliser vos essais avec des utilisateurs qui **correspondent exactement au public pour lequel vous concevez le produit**.</li>
<li>Pensez à offrir une **rémunération** (p. ex., une carte-cadeau, un compte gratuit au moment de la sortie) pour remercier les participants.</li>
<li>Menez l'essai dans un **endroit convenable** où vous ne serez pas dérangés pendant la séance.</li>
</ol>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Essai par les utilisateurs - Partie 2
##Durant l'essai
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##Partie 2 - Essayer le prototype
<h3 class="delayed">Introduction</h3>
<ul class="delayed">
<li>Présentez-vous et indiquez l'objectif de l'essai.</li>
<li>Parlez des parties prenantes et de l'intention derrière leur engagement. Expliquez que pendant l'essai, une personne prendra des notes et enregistrera les rétroactions.</li>
<li>Informez le participant que le prototype mis à l'essai n'est pas final et que vous souhaitez obtenir des critiques.</li>
</ul>
<h3 class="delayed">Réaliser une entrevue et faire preuve d'empathie</h3>
<ul class="delayed">
<li>Informez le participant qu'il n'est pas évalué lui-même : vous mettez le produit, le logiciel ou l'app à l'essai. Il n'y a pas de mauvaise réponse.</li>
<li>Résistez à l'envie d'interrompre le rythme d'essai du participant en lui offrant de l'aide et des conseils. Encouragez-le plutôt à expliquer les raisons derrière ses choix.</li>
<li>Assurez-vous d'avoir vos questions et votre script d'essai sous la main.</li>
</ul>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##Exemples de questions :
<h3 class="delayed">Première impression</h3>
<ul class="delayed">
<li>À quoi pensez-vous lorsque vous regardez ce produit?</li>
<li>Quelle est la première action que vous feriez avec ce produit?</li>
<li>Quelles sont vos attentes quant aux actions?</li>
<li>Si vous souhaitiez accomplir [tâche], que feriez-vous?</li>
</ul>
<h3 class="delayed">Comprendre l'utilisation</h3>
<ul class="delayed">
<li>Utiliseriez-vous ce produit aujourd'hui?</li>
<li>Comment décririez-vous ce produit?</li>
<li>Combien voudriez-vous payer pour ce produit?</li>
<li>Si vous aviez une baguette magique, que changeriez-vous ou qu'ajouteriez-vous sur le produit?</li>
<li>Pensez-vous que le produit a été conçu pour quelqu'un comme vous?</li>
</ul>
---
###Ressources
* [Questions d'essai par les utilisateurs](https://uxdesign.cc/questions-ux-designers-should-be-asking-bc9a6ba87a34)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Essai par les utilisateurs - Partie 3
##Après l'essai
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##Partie 3 - Finalisation
1. Remerciez vos participants et notez leurs coordonnées pour leur offrir une rémunération et faire un suivi. 🙌<!-- .element: class="delayed" -->
1. Demandez aux participants s'ils sont ouverts à un suivi potentiel.<!-- .element: class="delayed" -->
1. Rassemblez vos informations.<!-- .element: class="delayed" -->
* Créez une feuille de calcul qui comprend vos questions et les réponses de l'utilisateur.<!-- .element: class="delayed" -->
* Écrivez les tendances dans les rétroactions dans la section des résultats clés.<!-- .element: class="delayed" -->
* Faites une liste de problèmes d'utilisation et de bogues rencontrés par les participants.<!-- .element: class="delayed" -->
---
### Ressources
* [Comment écrire un rapport d'essai par les utilisateurs](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
* [Modèle de rapport d'essai par les utilisateurs Xtensio](https://app.xtensio.com/folio/xgipqa0z)
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Activité n° 5 - Essai par les utilisateurs - 20 minutes
Chaque groupe collaborera avec un autre groupe et fera des rétroactions sur la solution de l'autre équipe.
Chaque équipe choisira un membre qui présentera les résultats à la classe plus tard.
**Ayez votre téléphone en main lorsque vous testez avec d'autres groupes 📱**
##Voici quelques conseils pour commencer :
* Vérifiez s'il y a un biais de confirmation.
* Demandez à quelqu'un de regarder votre plan d'essai et de donner des rétroactions.
* Évitez de poser des questions orientées. (p. ex., Avez-vous choisi X à cause de Y?)
##Observez si l'utilisateur :
* Préfère des éléments de conception plus que d'autres.
* Passe beaucoup de temps à lire une section sans agir.
* A de la difficulté à accomplir une tâche ou revient toujours à un même élément en pensant que quelque chose se produira.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Compilez vos résultats!
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
#C'est qui les meilleures? C'est vous!
<img src="framework\img\proud.gif" alt="Femme qui tape des mains, gif" style="width: 500px;">
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Présentations
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Réflexion - 2 minutes par groupe
Prenez quelques minutes pour parler de vos découvertes avec votre groupe.
Nommez une personne dans le groupe qui partagera vos réponses à ces questions avec le reste de la classe :
1. Quel était le problème?
* Quelle était la solution?
* Quel est un élément à retenir ou qu'avez-vous appris d'important?
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Éthique
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
##« La conception est une discipline d'action. Les concepteurs sont responsables de leurs créations. Leur nom est inscrit sur leurs produits. Même s'il est impossible de prédire les façons dont nos produits seront utilisés, il ne faut pas être étonné que quelque chose de nuisible atteigne son but."
_-Mike Monteiro_
---
###Ressources
* [Code d'éthique des concepteurs](https://deardesignstudent.com/a-designers-code-of-ethics-f4a88aca9e95)
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
<img src="framework\img\23andme.png" alt="Image de la page d'accueil de 23andMe, utilisateur connecté"/>
Que font des sites du domaine de la santé comme 23andMe avec nos renseignements? 🤔<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Que font des sites du domaine de la santé comme 23andMe avec nos renseignements?
###Au Canada, GlaxoSmithKline détient des droits exclusifs sur les renseignements de 23andMe.<!-- .element: class="delayed" -->
###L'entreprise utilise les renseignements pour :<!-- .element: class="delayed" -->
* Concevoir et fabriquer de nouveaux médicaments.<!-- .element: class="delayed" -->
* Surveiller plus de 5 millions d'utilisateurs de 23andMe pour déterminer les différences génétiques qui peuvent affecter les traitements.<!-- .element: class="delayed" -->
* Trouver des candidats potentiels pour l'essai de médicaments.<!-- .element: class="delayed" -->
###Aux États-Unis, les renseignements sur la santé sont aussi utilisés pour :<!-- .element: class="delayed" -->
* Fixer des prix d'assurance médicaments selon les conditions médicales d'une personne.<!-- .element: class="delayed" -->
* Mettre au point des publicités hautement ciblées.<!-- .element: class="delayed" -->
* Faire le suivi des rendez-vous médicaux et découvrir les habitudes des utilisateurs.<!-- .element: class="delayed" -->
---
###Ressources
* [Problème de confidentialité : 23andMe partage des renseignements sur la génétique avec une grande entreprise pharmaceutique](https://www.ctvnews.ca/health/privacy-concerns-after-23andme-shares-genetic-data-with-major-drugmaker-1.4030480)
* [Les informations que vous ignorez sur votre santé vous rendront malade](https://www.fastcompany.com/90317471/what-you-dont-know-about-your-health-data-privacy-will-make-you-sick)
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Pourquoi l'éthique est-elle importante?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Conception éthique :
* Protège la confidentialité des utilisateurs<!-- .element: class="delayed" -->
* Réduit la méfiance chez les utilisateurs en mettant l'accent sur leurs besoins<!-- .element: class="delayed" -->
* N'encourage pas les dépendances et abus<!-- .element: class="delayed" -->
* Réduit les risques<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Éthique et équité
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Quel est le lien entre l'éthique et l'équité?<!-- .element: class="delayed" -->
<!-- .element: class="delayed" -->En tant que concepteurs, l'éthique nous permet de **répondre aux besoins des utilisateurs et des individus**.
En considérant les questions d'éthique, nous nous assurons que la conception de notre produit offre aux utilisateurs une solution qui **améliorera leur quotidien**.
<p><!-- .element: class="delayed" -->
« L'objectif d'un concepteur est d'écouter, d'observer, de comprendre, de faire preuve de sympathie et d'empathie, de synthétiser et de collecter des informations afin de rendre « l'invisible » visible. »
-_Hillman Curtis_
</p>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Conception universelle
##Diversité
</script>
</section>
<!--
<section class="slide" data-markdown>
<script type="text/template">
#Cela vous dit-il quelque chose?
(Amazon Echo, Apple Siri, Google Home)
<iframe width="560" height="400" src="https://www.youtube.com/embed/NMS2VnDveP8" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</script>
</section>
-->
<section class="slide" data-markdown>
<script type="text/template">
#Qu'ont en commun ces images?