STIC:STIC IV (2017)/Break the ice with embroidery

Broderie machine
Module: STIC:STIC IV (2017)/Projets ◀▬
◀▬▬▶
⚐ à finaliser	☸ débutant
⚒ 2018/04/03
Objectifs
promouvoir le contact entre les étudiants d’une même faculté
Catégorie: Broderie machine

Badges mascottes du projet 'Break the ice with embroidery'

Auteurs : Jessica Ceresa, Quentin Gyger et Arthur Mérat

Description du projet

Break the ice with embroidery a pour but de promouvoir le contact entre les étudiants d’une même faculté par le biais de la transmission de badges brodés et d’une activité collaborative d'écriture liée à cette transmission.

Contexte et problématique

Au cours de leurs études, les étudiants de l’université entrent généralement peu en contact les uns avec les autres en dehors de cercles déterminés d’amis et de collègues. Leur socialisation au sein de leur faculté (au sens commun du terme) reste donc parfois limitée. Or, il est avéré que la façon dont les étudiants communiquent et collaborent avec leurs collègues constitue un facteur important contribuant à leur réussite et leur satisfaction dans le cadre académique : c'est par exemple par le biais des pairs que se transmettent des pratiques et conseils informels permettant de mieux s'adapter à ce cadre. Il y a par conséquent un intérêt à entreprendre des actions à large échelle favorisant une socialisation relativement étendue des étudiants, et ce dès leur entrée dans le monde académique.

Apports théoriques

D'après Alava et Romainville (2001), le passage de l’enseignement secondaire à l’université constitue une fracture à plusieurs niveaux pour l’étudiant d’aujourd’hui. En termes organisationnels et scolaires d’abord, puisqu’il jouit désormais d’une flexibilité et d’une responsabilité nouvelles dans la conduite de ses études, mais également en termes sociaux. En effet, la transition qui s’opère lors de la fin des études de second cycle est parfois brutale : l’éloignement géographique naturellement dû au petit nombre d’établissements universitaires, les spécificités élevées de chacune des formations proposées et le changement de domicile parfois nécessaire qui en découle (sans oublier la nécessité de trouver un travail pour le financer) sont autant de facteurs qui poussent l’étudiant à prendre des distances avec ses anciens cercles de fréquentation. Arrivé au sein d’un système institutionnel inédit, son manque de repères est caractéristique des premiers temps de sa formation.

Dans ce contexte, la socialisation est un phénomène-clef, tant pour le succès de ses études que pour le contentement qu’il pourra en retirer, ainsi que pour la satisfaction vis-à-vis de sa situation en général : elle permet la construction d'une communauté, au sens d'un ensemble de personne rapproché par les mêmes buts et les mêmes valeurs, voyant un intérêt à chercher des consensus dans leurs pratiques et à collaborer pour atteindre leurs buts . Or, l’explosion des effectifs universitaires depuis les années 1980 a conduit à de nombreux bouleversements dans l’organisation des établissements et facultés. A l’exception de quelques cursus particuliers, les études de bachelor sont aujourd’hui suivies par des nombres élevés d’étudiants, dont l’hétérogénéité en termes d’origine sociale, de moyens financiers et d’objectifs est avérée  : l’encadrement de ces cursus est nécessairement réduit par rapport au contexte de l’enseignement secondaire, tout comme l’occasion de faire réellement connaissance avec ses pairs et professeurs. Cette perte de repères n’affecte cependant pas tous les étudiants de la même manière : les personnes de milieu socio-économique plus modeste ou originaires d’ailleurs sont les plus vulnérables.

Il est par conséquent nécessaire d’épauler l’étudiant par différents moyens, afin de favoriser sa réussite scolaire et sociale. Ces moyens sont en partie mis en place par les organisations d’établissement, ainsi que par la formation d’associations d’étudiants regroupées autour de facultés ou de centres d’intérêts spécifiques. L'engagement des étudiants autour de projets à valeur communautaire et le fait de "bousculer" les normes du milieu académique pour la création de nouvelles relations sociales sont deux des principes fondamentaux dont l'application permet d'atteindre cet objectif social .

Description de la solution

Public cible

Le projet cible avant tout les étudiants de niveau Bachelor, puisque c'est à ce stade des études que la taille souvent importante des classes défavorise un contact concret entre collègues d'une même volée. En raison de la nature de l'activité, une certaine maîtrise du français (B2) est nécessaire.

Implémentation

Le dispositif s’articule autour de deux éléments : des avatars représentant des animaux et associés à des QR codes réalisés en broderie machine, et une activité collaborative médiatisée par le biais de pages Wordpress liées aux différents avatars, accessibles via les QR codes susmentionnés. Par ce biais, l'idéal est de parvenir à concrétiser les deux principes de 'community building' énoncés plus haut : la fédération d'étudiants autour d'une activité commune et collaborative d'une part, et l'infraction des normes attendues afin de favoriser de nouveaux contacts entre pairs. Le scénario d'utilisation, détaillé plus bas, constitue cette concrétisation, médiatisée par les objets brodés et le dispositif web.

Objets brodés

Ces objets se présentent sous la forme de six patches de broderie de forme carrée de 7 centimètres de côté :

• Trois patches accueillent un QR code qui, lorsqu’il est scanné avec une application appropriée, envoie vers une page Wordpress permettant la réalisation de l’activité. En-dessous du QR code se trouve une adresse url raccourcie menant vers la même page.
• Les trois autres patches consistent en animaux stylisés faisant office « d’avatars ».

Chaque animal est associé à un QR code et une couleur spécifique pour former une paire, créant ainsi trois « factions » distinctes pour la réalisation de l’activité. Se référer aux images ci-contre.

• 

  Patch côté animaux

• 

  Patch côté QR codes

Scénario d'utilisation

Nous pouvons schématiser le déroulement de l'activité de la façon suivante :

• L'étudiant reçoit l’un des trois patchs de la part d’un de ses pairs, qui lui explique le principe de l’activité et des factions
• A l’aide de son téléphone ou d’une tablette, il scanne le QR code se trouvant sur le recto du patch, et accède à une page web Wordpress liée à une faction déterminée par le patch en question (animal/couleur)
• Il lui est demandé, sur cette même page web, d'apporter une contribution textuelle sous forme de commentaire blog, afin de donner suite à une histoire préexistante (cf. plus bas)
• Une fois terminée, la contribution est enregistrée et mise à la suite des précédentes
• L'étudiant ayant effectué sa contribution transmet à son tour le patch à une tierce personne en lui expliquant le principe de l'activité

La contribution en ligne suit les règles d'un cadavre exquis sous forme de compétition. A titre de rappel, le cadavre exquis est un jeu surréaliste consistant à faire composer des phrases ou dessins à plusieurs personnes sans qu'aucune d'elles ne puisse tenir compte de ce qui a été fait précédemment (ou de façon très limitée). Dans ce projet, ce principe est repris pour la création d’une histoire : chaque personne contribuant au cadavre exquis a donc pour tâche d’écrire une ou plusieurs phrases, en se basant uniquement sur la contribution précédente, et en respectant un nombre de caractères limité. Dans la mesure où chacune des trois paires de patchs mise en circulation comporte un animal, une couleur et un QR code différent, trois histoires en cadavres exquis vont été élaborées simultanément, à partir d’une même amorce. Cette amorce est la suivante :

"Il était une fois un étudiant, ou peut-être une étudiante. Son entrée à l'université était récente, et il espérait découvrir où se trouvait un mystérieux bar et lieu de rencontre entre étudiants, dont il n'avait entendu parler qu'à mots couverts dans les couloirs les plus reculés de l'université."

A l’issue d’une période de 5 semaines (précisée sur chacune des pages de production), les histoires dans leur ensemble sont remises en forme et repostées sur Wordpress avec des liens permettant de passer de l'une à l'autre, permettant ainsi à chacun de les consulter dans leur intégralité et de comparer leurs déroulements.

En principe, l'activité est relancée à l'issue de la période de consultation des histoires (par exemple, après une semaine). La même amorce peut être utilisée, dans la mesure où le cadavre exquis amènera des déroulements toujours différents. Un point de récupération doit être prévu pour récupérer les broderies, en cas de problème éventuel : le lieu en question est affiché sur les différentes pages Wordpress.

Réalisation

Patchs brodés

Les modèles d'animaux sont des SVG sous licence CC-BY 3.0 issus de Noun Project représentant un hibou, un panda et une méduse. Ils ont été modifiés sous GIMP afin de supprimer ou remodeler certains détails dont le rendu en broderie n'était pas assuré. Les QR codes ont quant à eux été générés via QRcode Monkey et directement téléchargés en SVG. Il a été nécessaire de procéder à une broderie-test pour vérifier la lisibilité des QR codes, et leur trouver une taille appropriée, qui allait par là-même définir la taille des patches. Tous les patchs ont également été refaits en paramétrant le passage horizontal de la brodeuse, afin d'éviter l'effet "stretch". Enfin, les URL raccourcies ont été générées via bitly.com L'assemblage des différents éléments a été effectué sous GIMP, et la broderie supervisée sous Stitch Era.

Les broderies finales ont été réalisées avec des tissus blancs pour les QR codes, et des tissus de type STEP pour les avatars animaux. Les tissus pour ces derniers sont de couleur jaune, turquoise et verte.

Résultats des badges une fois brodés

Nous avons cousu les bordures des patchs dos à dos pour les associer, en insérant une couche de feutrine de 5mm d'épaisseur entre les deux pour les rendre plus solides et plus agréables au toucher.

Feutrine collée au verso des badges mascotte

Un espace "poinçon" a été prévu sur chaque broderie, afin de les percer et de les accrocher à des rubans de couleurs identiques une fois achevées. Il ne reste plus qu'à coudre les badges mascottes et les badges QR code ensemble. Le résultat final consiste en trois badges carrés d'environ 7 centimètres de côté, portables autour du cou.

Pages Web

Les différentes pages web ont été pensées selon notre propre cahier des charges pour pouvoir remplir les fonctions suivantes :

1. Les pages web doivent être "responsives" (ce qui permet de voir les pages sur différents supports, comme les téléphones portables et tablettes sans problème d'affichage)
2. Chaque QR code doit envoyer vers une page unique, dont le style correspond à la mascotte de son badge
3. L'utilisateur doit pouvoir consulter la dernière phrase du jeu (stockée dans une base de données) et écrire la suivante (qui sera à son tour stockée dans la base de données)
4. Une fois la phrase ajoutée, la page doit renvoyer l'utilisateur vers le texte complet (extrait de la base de données)
5. Un lien final doit proposer une page où l'utilisateur pourra découvrir les textes des trois cadavres exquis après avoir contribué

La réalisation a été faite avec le CMS Wordpress pour des raisons de simplicité et rapidité. En effet, après quelquess recherches, nous avons pu vérifier que les plugins Wordpress pouvaient répondre à nos besoins. Nous avons ensuite pu confirmer notre choix après plusieurs tests et mettre en place la plateforme en concrétisant les cinq critères retenus de la manière suivante :

(1) Il existe de nombreux thèmes "responsive" sur Wordpress et nous sommes partis d'un thème du même nom : Responsive

(2) Les trois QR codes renvoient respectivement vers les pages Wordpress suivantes:

• http://bit.ly/2F8bYR6 : la page de la mascotte méduse
• http://bit.ly/2nc91Zf : la page de la mascotte panda
• http://bit.ly/2BtI1c7 : la page de la mascotte hibou

Les plugins Wp Display Header et Full Background Manager nous ont permis de donner un style unique (bannière et couleur de fond) à chacune des pages.

(3) Avec les plugins Contact Form 7 et Contact Form to Database, nous avons pu créer un formulaire permettant à l'utilisateur de voir la première phrase de l'histoire, la dernière phrase entrée par un utilisateur et d'entrer la nouvelle phrase qu'il veut ajouter à l'histoire.

(4) Avec le plugin Contact Form 7 Redirection, nous avons redirigé l'utilisateur vers une page qui affiche l'histoire complète de sa mascotte construite par les différents étudiants (et affichée grâce au plugins du point 2).

(5) Un lien mène ensuite vers la page finale (http://bit.ly/2Dvi8OL) qui permet à l'utilisateur de lire toutes les histoires construites avec les différentes mascottes et qui affiche en bannière une des mascottes aléatoirement.

Tests utilisateurs

Deux sessions de tests utilisateurs ont été conduites :

• Les premiers tests ont été faits pour tester l'ergonomie du site web. Nous avons donné l'adresse url du site à plusieurs étudiants pour voir s'ils comprenaient le concept du jeu et/ou avaient des problèmes à utiliser la plateforme. Tous les étudiants ont facilement pu utiliser le site sur différents supports et les seules critiques qui en sont ressorties concernaient l'affichage des différents textes : ces remarques ont été prises en compte pour effectuer quelques modifications mineures comme la séparation entre les phrases dans le texte complet par des "|" ou la manière d'afficher les phrases d'amorces.
• le second groupe de tests a été effectué avec les badges brodés : ceux-ci ont été distribué à une dizaine d'étudiants qui ont pu contribuer aux différents cadavres exquis avant de les passer à collègue. Nous avons pu relever quelques problèmes mineurs tels que:

1. L'absence de lecteur QR code sur certains des supports personnels des étudiants.
2. Quelques difficultés de lecture de l'url courte (par exemple, difficulté de différencier un "l", d'un "i" majuscule ou d'un "1").
3. Des problèmes de connexion web inhérents aux appareils personnels des étudiants.

Ces problèmes ont pu être facilement résolu par les étudiants eux-mêmes, qui (1) téléchargeaient une application pour lire le QR code ou (1,3) prêtaient leur appareil personnel à l'étudiant suivant le temps qu'il contribue et qui (2) testaient rapidement les différents possibilités logiques pour trouver le bon caractère.

Ces tests nous confortent dans l'idée que les étudiants pourront participer sans craindre de problème technique majeur. De plus, la plupart des étudiants nous ont confié que le design des badges était réussi et donc assez motivant pour se lancer dans l'activité et les transmettre ensuite à un autre étudiant.

Discussion & conclusion

Interprétation des résultats

Nous avons remarqué que le texte produit à l'issue de nos premiers tests utilisateurs et ceux récoltés lors de tests utilisateurs plus récents comportaient certaines différences. En effet, le premier était une histoire assez décousue, tandis que les secondes suivaient un certain fil logique malgré le fait qu'il s'agisse de cadavres exquis. Cela était étonnant dans la mesure où nous n'avions pas fait de modification précise dans le but d'améliorer la cohérence des textes produits.

Il était une fois à l'unige...

Texte d'un 'Cadavre exquis' du second test

Notre hypothèse principale concernant ce résultat porte sur les indications données sur les pages web, que nous avions légèrement modifiées. Bien que nous n’ayons pas reçu de feedback direct des utilisateurs concernant les introductions de la première version de nos pages web, nous en avons quelque peu discuté entre nous car elles pouvaient peut-être porter à confusion pour quelqu'un n'ayant pas reçu des explications suffisamment claires à l'oral : nous avons en conséquence tenté de les rendre un peu plus claires afin de faciliter la compréhension de la tâche à effectuer. Cela s'est traduit par un texte plus précis et donnant un meilleur contexte à l'histoire devant être créée. Cela ayant été fait après nos premiers tests utilisateurs, il est possible que cela ait influencé les résultats obtenus de sorte à ce que le texte donne l'impression de suivre un fil plus logique Toutefois, il ne s'agit que d'une interprétation possible, car nous n'avons pas de moyen de vérifier ce qui a réellement causé cette différence.

Les problèmes de lectures des URL raccourcies quant à eux mettent en évidence la difficulté à broder un texte de taille relativement faible : épaissir les lettres via plusieurs passages, agrandir la police de caractère, ou retoucher manuellement le résultat final sont autant de solutions envisageables dans ce contexte. Malgré qu'il s'agisse d'une solution de secours par rapport au QR code, certains utilisateurs pourraient préférer, si leur situation le permet, accéder aux pages web depuis un ordinateur pour pouvoir rédiger plus facilement leur contribution.

Conclusion

Ce projet fut dans l'ensemble une expérience très intéressante, autant dans sa partie de réalisation, qui nous a permis de tester différentes techniques de broderies sur Stitch Era et de création de patchs (e.g. sens de la broderie, etc.). Nous avons également eu l'occasion de travailler sur le design et l'ergonomie de nos trois pages web en ce qui concerne leur interface, et de les tester directement lors de tests utilisateurs pour pouvoir ensuite les améliorer, notamment sur le plan de la "responsivness".

Aussi, nous avons vu que notre projet amenait une large palette de réactions chez nos utilisateurs, ce qui nous permet de penser que nous aurions pu récolter des résultats bien plus complexes en faisant passer nos badges à des étudiants sur une plus longue durée que nous l'avons fait pour le moment.

Par la suite, nous planifions de procéder à un test grandeur nature, ce dès la rentrée de février 2018 à l'Université de Genève. Les étudiants de bachelor pourront alors, conformément au scénario d'usage, se transmettre librement les broderies durant plusieurs semaines. Des tests utilisateurs ciblés auprès de certains participants nous offriraient de plus amples perspectives sur les points forts et faiblesse du dispositif. Nous avons également pensé à élargir notre public cible, de sorte à ce que les enseignants et/ou assistants de l'Université puissent également participer à cette activité, dans une perspective plus large de community building.

Ressources

Les images suivantes sont issues du site Noun Project :

Icône méduse	Icône panda	Icône hibou
Jelly fish (Noun Project)	Panda (Noun project)	Owl (Noun Project)