Nous avons eu récemment l'opportunité de travailler avec EDF sur un dispositif interactif pour la biennale de Saint Etienne. Ce dispositif devait offrir aux visiteurs la possibilité de construire et tester librement des systèmes électriques à l'échelle de la France, via une interface tangible conjuguant des écrans et la manipulation d'objets "communicants".

La technologie de détection de ces objets a été créée par la start-up ePawn. Nous sommes intervenus sur le design et le développement de l'application exploitant les déplacement des objets pour générer des informations et des scénarios.

Petit retour sur le déroulement et les principaux enjeux de ce projet.

Le déroulement du projet

Nous avons travaillé en méthode agile (SCRUM). La mise en place de l'API pour récupérer les informations des objets, le design et le développement du workflow, des mécanismes d'interaction, l'intégration des données et algorithmes de production d'énergie, le design graphique comme l'intégration ont été menés en parallèle, à travers les différents cycles du projet.

Comme l'interface est pilotée par la manipulation des objets tangibles, nous avons mis en place un protocole nous permettant de simuler facilement les déplacements des objets, et de tester l'interface en conséquence. Nous avons ainsi pu constamment travailler par tests et itérations.

Enfin, le designer a assumé le rôle du scrum master, ce qui a permis d'impliquer le design à toutes les étapes du projet, y compris de développement. Cela a contribué à garantir la cohérence du projet en termes d'usages. Des ateliers avec le client ont également été menés très régulièrement.

La communication en temps réel : un enjeu crucial

La manipulation des objets par le visiteur produisent des informations. Ces information déclenchent des actions et évènements dans l'interface, et sont associées à des représentations graphiques sur les deux écrans. Un des principaux enjeux du projet a été de permettre que les objets, les deux écrans et les représentations graphiques communiquent constamment en temps réel, afin de garantir la fluidité et les performances de l'interface.

Pour cela :

• Les deux écrans sont en fait deux fenêtres de navigateur (Chrome)
• Un serveur en nodejs sert à synchroniser les deux écrans en leur envoyant des événements en EventSource
• La position des pions est récupérée via un daemon en C utilisant la technologie ePawn, puis transmise au serveur nodejs pour qu'il puisse traiter les déplacements.

Des modalités d'interaction inédites

Le caractère hybride de l'interface (objets physiques / interfaces numériques) a requis de mettre en place des outils de prototypage spécifiques. Nous avons d'abord modélisé l'interface et les objets en papier pour tester et préciser le workflow. Puis nous avons réalisé une maquette échelle 1 pour mieux percevoir les encombrements, définir les éléments graphiques et ajuster leur taille en conséquence.

Par ailleurs, le fait de manipuler des objets physiques pour interagir avec des informations numériques ouvre des perspectives d'usages et d'interfaces inédites. Nous avons tenté de sortir du langage informatique traditionnel, pour proposer des représentations et interactions ayant du sens par rapport aux objets manipulés.

Légende : représentation des différents usages ayant eu lieu dans la journée

Légende : étape de configuration de la saison et des sources d'énergie

Des animations full-CSS

Pour offrir une expérience d'usage incitant à expérimenter le dispositif, nous avons créé un univers graphique et des animations riches, depuis les datavisualisations affichées autour des objets, jusqu'à la simulation du déroulement d'une journée.

Pour obtenir cette richesse graphique avec des technologies purement web, nous avons utilisé :

• D3 et JS pour les animations en temps réel
• Full CSS3 pour les autres animations

Pour conclure

Le fait d'utiliser des technologies web pour ce type de dispositif permet d'obtenir un résultat flexible, qui pourra facilement évoluer par la suite… Mais cela a aussi amené de nombreux challenges tant pour les développeurs back et front que les designers.

Ces challenges, ainsi que la très forte implication du client dans le projet ont enthousiasmé toute l'équipe qui s'est énormément investie pendant les deux mois et demi du projet. Nous sommes très heureux de voir à présent le dispositif installé et utilisé avec succès à la biennale de design !

L'équipe du projet :

• Chez af83 : Alice, Arnaud, Bruno, Gilles, Mathilde, Maxim, Victor
• Sur la partie design graphique : Adrien Bridet