Dispositif attractif
Recommandation
La visite est pensée comme une histoire à choix multiples.
Visite interactive
- Projet global
- Commanditaire institutionnel
- Rôle
- Gestion de projet, conception, écriture, graphisme et développement
- Commanditaire
- Université de Toulouse
- Outils
- HTML, CSS, JavaScript
La Cité Internationale est un lieu accueillant des étudiant·es et chercheur·es du monde entier. Mais ce lieu est aussi au cœur de l’histoire universitaire toulousaine. L’Université de Toulouse souhaite le valoriser à travers un dispositif numérique.
Étude de cas rétrospective
Ce projet a été réalisé avant ma formation en design UX. Il reste néanmoins représentatif d’une démarche de conception itérative face à un problème complexe : exploration et définition du problème, démarche d’idéation, prototypage. Cette relecture met également en évidence ce que j’améliorerais aujourd’hui dans la recherche : la formalisation et les itérations du projet, et sa qualité de réalisation.
Recherche
Problématisation
La demande ne mène pas à une réponse évidente : c’est un problème « pernicieux » (wicked problem), sans solution unique. Trois questions m’ont permis de préciser la direction du projet.
Comment penser l’interface entre le réel et le virtuel ?
Quels éléments doivent être visibles sur place, lesquels doivent être numériques ? Comment permettre au dispositif de réagir à la position de l’utilisateur ? Comment amener l’utilisateur au dispositif ?
Comment rendre le dispositif attractif ?
Comment rendre attractif un dispositif de médiation quand les supports traditionnels ont échoué ? À quel point gamifier l’expérience ?
Un dispositif numérique, mais lequel ?
Quelle technologie est la plus adaptée pour permettre à un visiteur d’accéder à des informations sur le lieu dans lequel il se trouve ?
Idéation
Pour débuter l’idéation, je suis parti d’un ensemble de termes représentant le projet, que j’ai identifiés avec les personnes concernées.
- Mystérieux
- Dynamique
- Tout public
- Provocateur
- Drôle
- Instructif
Solutions
Relier le réel et le virtuel
Recommandation
Un QR Code permet d’accéder au dispositif.
Se repérer dans le lieu
Recommandation
L’histoire emmène l’utilisateur à se déplacer dans le lieu.
L’idée de l’histoire à choix multiples (ou fiction hypertextuelle) est inspirée de Bandersnatch (2018), le film interactif de la série Black Mirror. Ce format permet de créer de l’interactivité et de l’engagement.
Prototypage
Dispositif narratif
Entre la première itération et la maquette finale, le dispositif a connu 4 versions. Chacune répond à des enjeux apparus au fil du projet, notamment grâce à des tests informels.
Problèmes identifiés
- Comment retourner sur des passages intéressants de l’histoire ?
- Comment faire si l’on ne comprend pas le fonctionnement ?
Changements
- Ajout d’un menu d’accès aux chapitres
- Ajout d’une rubrique “Comment ça marche”
Problèmes identifiés
- Comment revoir rapidement le dernier passage ?
Changements
- Possibilité de revenir en arrière.
- Regroupement des menus du haut sous une icône d’aide « ? », une solution plus courante.
Problèmes identifiés
- Comment revoir rapidement le dernier passage ?
- Texte qui manque de dynamisme
Changements
- Finalisation de l’interface utilisateur et de la direction artistique.
- Retravail du texte : ton plus léger et aguicheur.
QR Code
Le QR Code est la porte d’entrée du dispositif : c’est lui qui relie le lieu réel à l’histoire numérique. L’affiche qui l’accompagne devait attirer l’œil et donner envie aux passant·es de sortir leur téléphone, sans rien dévoiler de l’histoire.
La conception de l’affiche pour le QR Code a également conduit à de nombreuses itérations, avec des avis recueillis auprès de professionnel·les et de non-professionnel·les.
Maquette
Dans sa version finale, la maquette compte 14 étapes narratives, avec 1 ou 2 alternatives pour certaines étapes. Cette forme de narration parallèle permet de rendre le dispositif plus interactif et ludique, tout en gardant des textes très similaires pour chacune des alternatives.
J’ai ensuite codé la maquette en HTML, CSS et JavaScript.
Un travail graphique à partir du fond photographique de l’Université a également été produit.
Et ensuite ?
La visite compte aujourd’hui 14 étapes narratives, codées en HTML, CSS et JavaScript. La prochaine étape serait de l’observer en conditions réelles : suivre des visiteur·ses dans la Cité Internationale permettrait de vérifier que l’histoire les fait vraiment se déplacer et découvrir le lieu.
Si c’était à refaire, j’apporterais 2 améliorations
- Formaliser davantage la recherche : documenter les entretiens et les tests pour garder une trace claire de chaque décision.
- Multiplier les itérations testées avec des visiteur·ses et soigner davantage la qualité de réalisation de chaque version.
Me contacter
Ce projet vous parle ? Écrivez-moi, je serai ravi d’échanger sur ma démarche et sur vos besoins.