Écran tactile interactif « Vanderweil »

Description du projet

Ce projet est une installation éducative interactive. L'écran, installé au Marine Science Magnet High School, affiche les données extraites directement des bouées NERACOOS, ainsi que les informations éditables choisies par les étudiants ou les éducateurs.

Les étudiants peuvent interagir directement avec les écrans tout en explorant les derniers développements dans le monde de la technologie des sciences marines du Long Island Sound.

L'installation est composée de deux grands écrans tactiles placés dos à dos. Chaque écran est entouré d'un cadre PQ labs, qui détecte les points de contact. L'installation s'exécute sur deux ordinateurs indépendants, et l'un de ces ordinateurs fait également office de serveur pour le CMS.

Design

Navigation

Cette installation a été divisée entre trois états d'interaction utilisateur :

• Mode « attraction » : dans un premier temps, attirer l'attention et l'intérêt des utilisateurs.C'est à cet étape qu'on les invite à interagir.
• Mode « engagement » : une fois que les utilisateurs interagissent avec l'application, on ajoute des éléments avec lesquelles les utilisateurs peuvent jouer un peu plus.
• Mode « exploration » : les utilisateurs peuvent explorer l'application plus en profondeur. On peut proposer plus de contenu à la demande des utilisateurs.

Ce ne sont que des points généraux sur la façon dont les utilisateurs peuvent interagier avec une installation. Voyons comment nous avons intégré ces éléments dans cette application.

Design et parcours utilisateur

Le concept original était fortement influencé par le design infographique, avec une grande présentes de polices lourdes, des couleurs en aplat et vives. En toute honneteté, c'était un peu surchargé : trop d'éléments en même temps pour que l'oeil sache où regarder et comment lire. Par contre, l'idée principale était là, il s'agissait simplement de la peaufiner pour en faire un produit fini.

Comme le montrent les images conceptuelles ci-dessus, il existe une nette déconnexion entre la conception de la vue cartographique et la conception de la vue infographique. Il y avait également de nombreux éléments qui n'avaient pas besoin d'être répétés dans chaque état, comme la température et d'autres informations météorologiques.

J'ai travaillé avec Raed Moussa pour rafiner le design en ne conservant que les informations nécessaires. Il a réussi à créer un environnement visuel cohérent entre la carte et la vue latérale.

Quant aux éléments d'information, nous avons choisi de les conserver uniquement là où ils étaient pertinents :

• Le mode attraction contient des informations météorologiques animées sur une carte de la région du Long Island Sound, avec un appel à l'action clair pour inviter les gens à toucher l'écran.
• Le mode engagement présente aux utilisateurs des informations supplémentaires superposées sur la même carte que celle qu'ils ont vue dans la vue d'attraction. Toutes les informations sont relatives à la carte qu'ils voient : profondeur de l'eau, emplacements des bouées, emplacements des épaves et événements historiques.
• Le mode exploration contient une vue en coupe de la région côtière dans la même zone. Les icônes des espèces sont affichées aux endroits où ces espèces vivraient habituellement. Si l'utilisateur le souhaite, plus d'informations sur chaque espèce sont disponibles au toucher.

Profondeur de l'eau

L'une des informations scientifiques que nous avons dû superposer sur la carte était la profondeur de l'eau de la région. Ces informations sont généralement imprimées directement sur les cartes ou intégrées aux systèmes de navigation des navires. Nous voulions afficher ces informations de la même manière que les cartes topographiques affichent les hauteurs.

L'inconvénient était que les cartes disponibles ne le fournissaient pas directement. D'une manière ou d'une autre, la plupart des variations de profondeur sur la carte n'étaient pas assez grandes, la plupart étaient simplement notées par des chiffres.

Nous avons donc eu une idée : mettre en évidence tous les chiffres avec des couleurs différentes afin de créer une carte thermique. Et je veux dire, en surlignant manuellement ! Au début, nous avons commandé les cartes physiques, nous avions prévu de nous asseoir à un bureau avec des marqueurs pour surligner les chiffres. Nous avons cherché comment prendre une photo haute résolution de la carte, mais les chiffres de profondeur sortaient flous. Ce n'était pas possible de procéder de cette façon.

Enfin, nous avons pu obtenir les cartes numériques de Nautical Charts Online. Ensuite, j'ai passé quelques jours dans Photoshop avec ma tablette graphique pour surligner tous ces chiffres selon une variation que nous avions prédéterminée. Ceci nous a donné une bonne carte thermique.

Il fallait ensuite intégrer les informations de cette carte thermique dans le design. Raed a créé un rendu topographique vectoriel de la carte thermique et a pu l'incorporer dans la carte.

Transition de la vue cartographique à la vue latérale

C'était un peu délicat de penser à une transition entre la vue cartographique, qui est une carte plate de la région de Long Island Sound, et la vue latérale, qui est une vue en coupe d'une zone côtière. À l'époque, je regardais le dessin animé Avatar: the Last Airbender. Durant l'introduction, il y avait exactement ce que je cherchais ! Jetez un oeil entre 0:08 et 0:12.

Cette inspiration était tombée à point. Étant un amateur des vieux jeux de la série Final Fantasy, j'ai aussi pensé à la façon dont la carte était inclinée vers l'arrière lorsque les personnages embarquaient dans un dirigeable.

Avec le storyboard ci-dessus, Francis Dakin-Côté a pu animer la transition parfaite dont nous avions besoin entre la vue cartographique et la vue latérale. Cette animation est présentée lorsqu'un utilisateur choisit d'explorer l'installation plus en profondeur, offrant ainsi une transition logique entre les écrans. La même animation est jouée à l'envers lors du return vers la vue cartographique.

Système de gestion de contenu

Afin de gérer le contenu, nous avons mis à disposition du client un CMS (Content Management System). Je crois que ce projet peut avoir une bonne durée de vie et évoluer en fonction du travail des étudiants. Plutôt que de fournir au client un manuel papier, j'ai adapté la page d'accueil du CMS comme page d'instructions en y ajoutant des sugestions sur comment utiliser cet outil :

Ne considérez pas cette installation simplement comme un référentiel statique d'informations, mais plutôt comme un espace dynamique permettant d'afficher des informations impliquantes et évolutives concernant la région de Long Island Sound. Plutôt que de rassembler toutes les données en même temps, il pourrait peut-être y avoir un thème pour chaque semaine ou chaque mois.

Voici quelques idées :

• Le travail d'un étudiant reçoit une bonne note : si ce travail porte sur un sujet pertinent à l'installation (région du Long Island Sound, histoire ou vie marine) est bien rédigé et mérite d'être partagé avec le reste de l'école, présentez-la en ajoutant des éléments dans les cases appropriées avec des extraits du travail.
• Semaine (ou mois) des épaves : affichez uniquement les épaves dans la section Engage View en désactivant tous les éléments qui ne sont pas des épaves.
• Semaine (ou mois) des coquillages : présentez uniquement les espèces de coquillages dans la section Explore View en désactivant tous les éléments qui ne sont pas des coquillages.

Ce sont des exemples simples, mais c'est à vous d'impliquer les étudiants dans l'utilisation de l'installation et peut-être de rédiger du contenu pour qu'il soit partagé avec d'autres étudiants.

Comme vous pouvez le constater, je pense qu'en tant que créateurs de conteneurs et de contenu, nous pouvons avoir la responsabilité d'inspirer nos clients sur la façon d'utiliser les outils que nous créons pour eux. Parfois, c'est évident (présentation de produits pour entreprise), mais dans ce cas, j'ai pensé qu'il serait préférable de guider également les enseignants et les éducateurs. Ces personnes ont déjà beaucoup à faire, assurons-nous que ce que nous créons répond à leurs besoins et ne complique pas leur travail.

Crédits

• Concept original : Meka, Alexandre Simionescu
• Design UX, direction artistique, architecture d'information : Mat Janson Blanchet
• Design de l'interface : Raed Mousa
• Animation de la transition : Francis Dakin-Côté
• Programmation de l'interface : Mat Janson Blanchet
• Programmation RealMotion™ : Bruno Gohier
• Programmation back-end : WLAB, Simon Arame
• Gestion de projet : Anne Élisabeth Thibault, Géraldine Restani, Mat Janson Blanchet

Tous les droits d'auteur et produits appartiennent à leurs propriétaires respectifs.