Newer
Older
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Ecolyo, Premiers retours utilisateurs" />
<link rel="stylesheet" href="./style.css" />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
rel="stylesheet" />
<link rel="icon" href="assets/ecolyo-icon.svg" />
<title>ECOLYO - Premiers retours utilisateurs</title>
</head>
<body class="experimentation-page">
<header>
<nav>
<div class="main-logo">
<img src="assets/logo-with-text.svg" alt="ecolyo-logo-with-text" />
<img src="assets/beta.svg" alt="beta-logo" class="beta-logo" />
</div>
<div class="links">
<a href="#intro">Intro</a>
<a class="navlink" href="#method">Méthode</a>
<a class="navlink" href="#results">Résultats</a>
<a class="navlink" href="#tasks">Nos tâches à venir</a>
<a class="navlink" href="#contact">Contact</a>
</div>
</nav>
<div class="banner-exp">
<img src="assets/banner-experimentation.jpg" alt="surface de la terre">
</div>
</header>
<main>
<div class="wrapper">
<h1>ECOLYO - Premiers retours utilisateurs</h1>
<section id="intro">
<h2 class="title">Commencez à économiser de l'énergie !</h2>
<p>A la fin de l'année 2020, l'équipe du service Ecolyo a souhaité proposer à un petit groupe de testeurs d'essayer une
première version de l'application.</p>
<p>Cette synthèse a pour objectif de vous partager succinctement les résultats de ces tests.</p>
<p>La version d'Ecolyo évaluée ici possède uniquement un premier niveau de fonctionnalités simples.</p>
<p>L'objectif de ces tests était de répondre à trois questions :</p>
<ul class="list">
<li>
<span class="item icon-tools">L'application propose-t-elle un service utile ?</span>
<span class="item-img">
<img src="assets/particles.png" alt="icone de particule">
</span>
</li>
<li>
<span class="item icon-folded-hands">Est-ce facile d'utiliser Ecolyo ?</span>
<span class="item-img">
<img src="assets/clouds.png" alt="homme sur un nuage tenant des éclairs">
</span>
</li>
<li>
<span class="item icon-star-struck">Quelle(s) fonctionnalité(s) aimeriez-vous voir apparaître dans Ecolyo ?</span>
<span class="item-img">
<img src="assets/snowman.png" alt="bonhomme de neige sur un radiateur">
</span>
</li>
</ul>
</section>
<section id="method">
<h2>Méthodes</h2>
<p>Pour répondre à ces trois questions deux méthodologies différentes ont été utilisées :</p>
<div class="method-container">
<h3>Une méthode quantitative :</h3>
<div class="method-number">
<p class="content">Consiste à diffuser l'application à un grand nombre de testeurs et recueillir leurs retours via un questionnaire.
</p>
<p class="number">80 personnes</p>
</div>
<div class="tips-frame">
<p class="icon-light-bulb">Ce retour d'expérience a été obtenu grâce au travail mené dans le cadre du DATA Challenge, concours organisé par
Enedis,
GRDF, l'ADEME et le Ministère de la Transition Energétique à l'automne 2020. Ecolyo y a d'ailleurs reçu le 3ème prix
du
Jury lors de ce concours !</p>
</div>
</div>
<div class="method-container">
<h3>Une méthode qualitative :</h3>
<div class="method-number">
<p class="content">Consiste à suivre un faible nombre de testeurs, individuellement, pendant une heure lors de son parcours dans
l'application. Nous observons ici ses remarques, ses réactions, ses parcours, etc...
</p>
<p class="number">6 personnes</p>
</div>
<div class="method-test">
<div class="container-img">
<img src="assets/anim-method.webp" alt="animation d'un laboratoire">
</div>
<p>A la suite de ce test, l'application était remise au testeurs pour plusieurs semaines et leurs utilisation était
ensuite
évaluée par un questionnaire en ligne.</p>
</div>
</div>
</section>
<section id="results">
<h2>Résultats</h2>
<h3>L'application propose-t-elle un service utile ?</h3>
<p>Pour synthétiser les retours concernant Ecolyo nous pouvons dire que <strong>ce premier niveau de service présente une réelle utilité perçue</strong></p>
<div class="usages">
<h4>Les usages principaux de l'applications</h4>
<p>Plusieurs réponses possibles</p>
<ul class="list">
<li class="item">
<span class="green icon-glass">
Suivre mes consommations d’énergies = 100% des répondants
</span>
</li>
<li class="item">
<span class="orange icon-target">
Me lancer un défi et suivre son avancement = 50% des répondants
</span>
</li>
<li class="item">
<span class="pink icon-light-bulb">
Consulter les écogestes = 33,3 % des répondants
</span>
</li>
</ul>
<p>Réponses des personnes ayant participé aux tests utilisateurs à la suite de la période d'autonomie (méthode
qualitative)</p>
</div>
<div class="consumption">
<h4>Plus fort suivi des consommations !</h4>
<p>Nous avons pu observer que le suivi des consommations est rendu plus fréquent grâce à l'existence et à l'utilisation
de
l'application. Cela illustre également une prise de conscience des dépenses énergétiques.</p>
<img src="assets/exp-conso-graph.png" alt="diagramme à barres">
</div>
<div class="changes">
<h4>Des changements d'habitudes ont également été relevés par les testeurs</h4>
<div class="container-habits">
<div class="col-2">
<div class="item">
<p class="orange icon-speak">Douches moins longues</p>
</div>
<img src="assets/anim-wow.webp" alt="homme qui dit wow">
<div class="item">
<p class="pink icon-speak">Je fais un peu plus attention à ma consommation (par exemple j'essaie d'éteindre mon ordi plus souvent)</p>
</div>
</div>
<div class="col-2">
<div class="item">
<p class="green icon-speak">On vivait les lumières allumées dans beaucoup de pièces. Maintenant j'ouvre les fenêtres (notamment les chambres)
pour
faire entrer la lumière naturelle. Je fais attention à décongeler au réfrigérateur et non au micro-ondes. Même si
les
compteurs d'eau ne sont pas reliés on fait plus attention aussi à la consommation d'eau et notamment d'eau chaude.
</p>
</div>
<div class="item icon-speak">
<p class="blue">Eteindre la lumière en quittant une pièce, veiller à ne plus laisser les appareils en veille ou en charge
</p>
</div>
</div>
</div>
<p>Cependant pour être encore plus pertinente l'application Ecolyo devra proposer de nouvelles fonctionnalités ! Et
là-dessus, nos testeurs n'ont pas manqué d'idées. <span class="icon-wink"></span></p>
</div>
<div class="easy">
<h3>Est-ce facile d'utiliser Ecolyo ?</h3>
<p>L'interface sobre et simple a plu à la totalité des testeurs. La visualisation est très facile même si on peut noter
des
attentes supplémentaires du coté de la manipulation des données (plus de comparaison, navigation plus simple entre les
fluides, plus d'infos contextualisées, etc.).</p>
<div class="sus">
<p class="sus-title">Score au System Usability Scale : 69,5/100</p>
<img src="assets/system-usability-scale.png" alt="scale usability scale">
<button class="btn-more" id="btn-sus">En savoir plus sur le System Usability Scale</button>
<div class="info-sus">
<p>Le SUS est un questionnaire créé par John Brooke en 1986, pour répondre à un besoin de mesure rapide d’un système
électronique. Le SUS se compose de dix questions qui permettent de recueillir le point de vue subjectif de
l’utilisateur
sur un système ou un service.</p>
<p>Le SUS se base sur une échelle de Likert qui permet à l’utilisateur de répondre sur une échelle en 5 ou 7 points de
“Pas
du tout d’accord” à “Tout à fait d’accord”. Le SUS donne un score unique représentant une mesure composite de la
convivialité générale du service étudié.</p>
</div>
</div>
<div class="access">
<h4>Un accès au service à simplifier</h4>
<p>L'accès à l'application n'est cependant pas aisée. La création de compte est assez simple, même si la compréhension
de
ce qu'est Cozy est à améliorer.</p>
<div class="reasons">
<h4 class="blue">Pour quelle(s) raison(s) n’avez-vous pas pu vous inscrire au service ?</h4>
<img src="assets/exp-subscribe-graph.png" alt="diagramme à barre horizontale">
</div>
<div class="container-alert">
<h4>Points d'alertes !</h4>
<div class="alert">
<div>
<div class="item">
<p class="icon-alert">Sur un groupe de 218 personnes 80 personnes soit environ 37% des utilisateurs ont pu accéder au service. L'accès
au
service est donc un point à améliorer grandement.</p>
</div>
<div class="item">
<p class="icon-alert">Les connecteurs qui permettent de récupérer la donnée énergétique ou eau restent encore trop instables pour
imaginer un
déploiement grand public d'Ecolyo.</p>
</div>
</div>
<div>
<img src="assets/plumber.png" alt="illustration d'un plombier">
</div>
</div>
</div>
</div>
</div>
<div class="features">
<h3>Quelle(s) fonctionnalité(s) aimeriez-vous voir apparaître dans Ecolyo ?</h3>
<p>Ces tests ont été l'occasion d'évaluer les fonctionnalités attendues par les utilisateurs. Après analyse, nous
retenons
principalement :</p>
<ul>
<li class="item"><span class="green icon-tree">M'accompagner pour baisser ma consommation d'énergie</span></li>
<li class="item"><span class="orange icon-target">M'aider à identifier les moments où je consomme dans la journée et les appareils qui consomment le
plus</span></li>
<li class="item"><span class="purple icon-note">Me proposer un bilan tous les mois.</span></li>
<li class="item"><span class="red icon-alert">M'alerter en cas de surconsommation</span></li>
<li class="item"><span class="yellow icon-wrestling">Me comparer pour savoir si je consomme normalement ou non.</span></li>
</ul>
</div>
</section>
<section id="tasks">
<h2>Nos tâches à venir !</h2>
<p>Fort de ces retours nous allons poursuivre le travail sur Ecolyo dans différents axes :</p>
<div class="col-task">
<div class="container-img">
<img src="assets/anim-connectors.webp" alt="animation câble usb">
</div>
<div class="task-content">
<div class="item">
<p class="yellow icon-link">Améliorer les connecteurs</p>
</div>
<p>Simplifier et fiabiliser techniquement l'accès à l'application est crucial pour envisager un passage a l'échelle.</p>
</div>
</div>
<div class="col-task">
<div class="task-content">
<div class="item">
<p class="yellow icon-wrestling">Pouvoir se comparer !</p>
</div>
<p>Comme observé dans les tests, la possibilité de comparer sa consommation à une norme est une fonctionnalité clé que nous
ajouterons pour la version grand public d'Ecolyo.</p>
</div>
<div class="container-img"><img src="assets/anim-comparison.webp" alt="animation homme"></div>
</div>
<div class="col-task">
<div class="container-img">
<img src="assets/challenge-view.png" alt="ecran d'un défi">
</div>
<div class="task-content">
<div class="item">
<p class="yellow icon-target">Mieux accompagner dans les défis !</p>
</div>
<p>La partie défi était un élément manquant de clarté dans les actions à réaliser, nous l'avons donc entièrement
repensée.</p>
</div>
</div>
<div class="col-task">
<div class="task-content">
<div class="item">
<p class="yellow icon-file-cabinet">Plus d'informations mais mieux diffusées !</p>
</div>
<p>Mieux diffuser certaines informations et simplifier la présentation des écogestes sont des éléments sur lesquels nous
travaillons en ce moment également.</p>
</div>
<div class="container-img"><img src="assets/action-view.jpg" alt="ecran d'un cogeste"></div>
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
</div>
<div class="container-team">
<p class="msg">Nous profitons de cette synthèse pour vous remercier de l'intérêt que vous portez au projet !</p>
<p>Nous vous solliciterons prochainement pour des tests sur cette nouvelle version ! <span class="icon-wink"></span><span class="icon-microscope"></span></p>
<p class="text-bold">A très vite,</p>
<p class="team">L'équipe Ecolyo</p>
</div>
</section>
<section id="contact">
<h2>Nous contacter</h2>
<iframe id="contact-form"
src="https://form.typeform.com/c/q1n59U?typeform-medium=embed-snippet">
</iframe>
</section>
</div>
</main>
<footer>
<div class="content">
<div class="bottom wrapper">
<div class="logos-footer">
<img src="assets/logo-grandlyon.svg" alt="logo-grandlyon" />
<img src="assets/logo-tiga.svg" alt="logo-tiga" />
</div>
<div class="info">
<img src="assets/info.svg" alt="info-métropole" />
<a href="https://www.grandlyon.com/" target="_blank">
<p>Un site de la Métropole de Lyon</p>
</a>
</div>
</div>
</div>
</footer>
<script>
const navBar = document.querySelector("nav");
//smooth scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
let item = document.querySelector(this.getAttribute("href"));
window.scrollTo({
top: item.offsetTop - 90,
behavior: "smooth",
});
});
});
//Hide menu on scroll down
let scrollUp = true;
let hideDistance = 200;
let headerHeight = "6.25rem";
let vw;
const setDeviceWidth = () => {
vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
};
onload = setDeviceWidth();
window.addEventListener("resize", () => {
setDeviceWidth();
});
window.addEventListener("scroll", () => {
if (vw < 1200) {
if (scrollY > hideDistance) {
scrollUp = this.oldScroll > this.scrollY;
if (scrollUp === false) {
navBar.style.marginTop = "-" + headerHeight;
}
if (scrollUp === true) {
navBar.style.marginTop = "0";
}
this.oldScroll = this.scrollY;
}
}
});
const btnCollapse = document.querySelector('#btn-sus');
const infoSus = document.querySelector('.info-sus');
btnCollapse.addEventListener('click', (e) => {
e.preventDefault()
btnCollapse.classList.toggle('arrow-down');
infoSus.classList.toggle('collapsed');
})
</script>
</body>
</html>