Projet Émoticônes

Création d’une plateforme de vote pour récolter de la data et l’interpréter sous forme de graphiques, dans le but de répondre à un sujet donné par un enseignant.


En bref :

Le projet Émoticônes est tout simplement une plateforme de vote sur laquelle les visiteurs sont amenés à associer trois mots ou moins à une émoticône. Grâce aux votes, des statistiques sont établies et ressorties sous forme de graphiques, véritable but du site.


  • Durée du projet : 2 semaines
  • Commanditaire : IUT du Puy-en-Velay
  • Mon rôle dans le projet : Développeur Full-Stack
  • Autres personnes sur le projet : 0

Le projet en détail :

Le projet Émoticônes a vu le jour dans le cadre du module de data-visualisation. Pour ce cours, nous devions récolter de la data et mettre cette dernière en forme, soit par le biais d’une infographie, d’une photo, animation ou d’un site web. C’est vers cette dernière option que je me suis tourné. Pour récolter la data, j’avais dans l’idée de mettre à contribution les futurs visiteurs du site.

Le concept

Le principe est simple : faire venir les visiteurs qui, en se rendant sur une page, associent jusqu’à trois mots à une émoticône. Là ils renseignent également leur tranche d’âge et leur genre, à des fins statistiques. Les données récoltées sont ensuite ressorties sous forme de graphiques.

Comment ça marche ?

L’ajout d’émoticônes

En premier lieu, on retrouve notre liste d’émoticônes. Cette dernière est assemblée à la main via une page d’upload réservée à l’administrateur qui se charge juste d’attribuer un nom et un identifiant textuel à l’émoticône choisie. Une fois ces champs remplis, l’émoticône est mise en ligne et est disponible au vote.

Les votes

Pour ce qui est de l’attribution des impressions (mots à associer à l’émoticône qui est présentée), les utilisateurs sont invités à se rendre sur la page de chacune des émoticônes. Pour accéder à cette dernière, ils sont libres de choisir de se rendre sur la page d’accueil et de choisir eux-mêmes l’émoticône pour laquelle ils veulent voter ou, s’ils le préfèrent d’aller sur une page de vote qui propose une émoticône aléatoire pour laquelle le visiteur n’a pas encore voté.

En milieu de page se trouve un champ qui demande à l’utilisateur de bien vouloir associer jusqu’à trois mots à l’émoticône qui lui est présentée. Une liste des impressions possibles est affichée juste en dessous et, en cliquant sur celles-ci, l’utilisateur est à même de les ajouter à la liste qu’il va soumettre pour l’émoticône qu’il interprète. Un champ de recherche lui permet de filtrer les différentes impressions, afin qu’il puisse y trouver celle qu’il recherche. Si jamais le mot qu’il souhaite ajouter ne s’y trouve pas, il peut tout simplement l’ajouter en cliquant sur un bouton juxtaposant celui de recherche, afin d’ajouter le contenu du champ de recherche en tant qu’impression.

Enfin, si c’est son premier vote, il est également demandé à l’utilisateur de saisir son genre et sa tranche d’âge.

L’affichage des résultats

Les résultats sont affichés sous réserve que l’émoticône choisie ait assez de votes pour permettre la sortie des résultats. Ensuite, via l’utilisation de la librairie Chart.js, les résultats sont interprétés sous forme de diagrammes circulaires. On retrouve ainsi :

  • un top 10 des impressions
  • un top 5 des impressions par genre
  • un top 3 des impressions par tranche d’âge

Leur affichage étant chacun conditionné par le fait d’avoir assez de données pour les afficher. Par exemple, si il y a moins de 10 impressions différentes pour une émoticône, le diagramme du top 10 ne ressort pas et un message invitant l’utilisateur à voter pour cette émoticône s’affiche à la place.

Les utilisateurs, pierre angulaire du projet

Vous aurez sans doute remarqué que les utilisateurs constituaient ici l’élément majeur sur lequel l’ensemble du projet repose ? Eh bien oui, c’est vrai. En d’autres termes, pour que mon projet fonctionne, il me fallait fédérer assez d’utilisateurs pour que les statistiques ressortent.

Une mobilisation sur les réseaux sociaux

Le premier réflexe qui m’est venu a été celui de demander de l’aide à l’ensemble de mon réseau Facebook. Les premiers ciblés ont bien entendu été :

  • ma promotion de DUT : j’ai effectivement pu compter sur leur soutien après avoir publié un message dans le groupe
  • quelques amis proches et la famille, que j’ai pris le temps de contacter par message privé afin de maximiser leur participation

J’ai également rajouté un bouton de partage Facebook à un endroit stratégique du site, là où il ressortait le mieux grâce à sa couleur bleue.

L’ajout d’un compteur de nombre de vote, afin de motiver les votants

Je suis tout de suite parti du principe qu’une large proportion des visiteurs du site n’allait pas se rendre sur le site dans l’idée première de voter. Ils y iraient dans un premier temps pour voir de quoi il s’agit, par pure curiosité. Mon but serait donc de faire en sorte qu’étant donné qu’ils étaient déjà là, autant les faire voter.

L’ajout d’un compteur de vote sert exclusivement ce dessein puisqu’il sert à montrer aux visiteurs que le site est actif, que des personnes réelles votent et supportent le projet. Il existe néanmoins une petite subtilité : le compteur de votes ne montre pas le nombre de votants, comme beaucoup pourraient le croire. Il montre en réalité le nombre de votes, donc le nombre d’impressions qui ont été choisies par les utilisateurs. En partant du principe que l’on peut associer jusqu’à trois impressions par émoticônes, je savais que cela gonflerait très vite le compteur.

De cette manière je pouvais convaincre plus de monde plus rapidement et maximiser mon impact. Résultat : pari réussi, en seulement deux jours j’ai eu assez de données pour rendre mon sujet.

Arthur EUDELINE 2017

Designed by Arthur EUDELINE with and lot of coffee

ipsum in et, vel, lectus libero odio ut id amet,