Le smArtMarie : un exemple d’application créative

smartapps
inside-smartapps
5 min readMay 3, 2018

--

Vous connaissez peut-être Marie, notre cheffe de projet. Il y a quelques mois, elle vous présentait le processus qui nous permet d’améliorer régulièrement notre plateforme. Aujourd’hui, on vous en dit plus sur l’application « guide de visite » qu’elle a réalisée à son arrivée. En utilisant seulement des fonctionnalités standards, elle est parvenue à conférer à son application une ambiance très personnelle et à proposer une forme d’interaction avec ses utilisateurs.

L’esprit

Passionnée par les jeux de rôles et les univers fantastiques, Marie est également une grande amatrice de Lovecraft. Son application est l’occasion de faire vivre l’univers de l’écrivain américain sur un nouveau support.

Marie a créé la majeure partie des contenus présentés dans son application — les textes et même la vidéo d’introduction sont d’elle, seules les images sont préexistantes. Pour ces contenus, elle s’est inspirée des jeux vidéo et des « livres dont vous êtes le héros ». Ces inspirations l’ont conduite à privilégier certains types de cadrages et des textes courts, s’adressant directement à l’utilisateur.

L’application comporte quatre onglets. L’introduction met en exergue une citation de Lovecraft et comprend une vidéo, qui introduit l’enquête à laquelle les utilisateurs vont être confrontés et les invite à découvrir la ville d’Arkham. Le rôle de ce premier onglet est d’instaurer une atmosphère.

Les deux onglets suivants — la liste de POI et la carte — permettent aux utilisateurs de découvrir les quatre quartiers d’Arkham et les lieux les plus importants de la ville. Marie s’est amusée à entretenir une ambiance angoissante, présentant chaque espace — le laboratoire, la bibliothèque, le poste de police… — sous un angle flatteur en dépit de leur incontestable aspect inquiétant.

Marie a particulièrement soigné les transitions qui surviennent au cours de cette exploration. À la gare, l’utilisateur trouve un billet de train ; à l’université, il obtient une carte de lecteur pour la bibliothèque… Chaque enchaînement d’action est cohérent et plausible, renforçant une impression de réel et permettant de disséminer des indices dans l’application. Les descriptions s’adressent directement à l’utilisateur et l’invitent à explorer les lieux plus en avant, à cliquer sur les boutons.

À l’issue de cette exploration, l’utilisateur est dans de bonnes conditions pour débuter l’enquête. Ainsi, un « simple » travail sur le ton d’une application permet de créer une forme d’interaction avec l’utilisateur et de le transformer en héros de sa visite.

Le dernier onglet prend la forme d’un « livre dont vous êtes le héros » et propose un jeu sous forme d’enquête. Chaque page comprend un petit texte décrivant une situation et proposant divers chemins narratifs. Pour venir à bon de son enquête, il devra faire les bons choix !

L’application de Marie ; un regard technique

Impressionnant, n’est-ce pas ? Maintenant, décortiquons ensemble l’application ; vous allez voir : elle n’a rien de sorcier. 😉

Pour présenter les quatre quartiers d’Arkham et leurs lieux emblématiques, Marie a utilisé des POI père et fils. Un POI père permet d’imbriquer sous lui, à la place d’un texte, plusieurs POI fils. Cette utilisation des POI père et fils permet en outre de créer une impression de progression, comme si le joueur s’avançait dans la ville : il a d’abord un aperçu général des quartiers avant de pouvoir explorer chacun plus en détails.

Pour ce qui est de la carte, Marie n’a pas eu besoin de détourner cette fonctionnalité pour obtenir le résultat souhaité. Elle a simplement choisi une image qui correspondait à l’atmosphère qu’elle recherchait et y a placé ses POI.

L’imbrication des POI père et fils donne une impression de progression dans la ville et l’application.

Les deux derniers onglets — l’introduction et l’enquête — sont des zip html, c’est-à-dire des pages qui intègrent des éléments de code. Ne vous inquiétez pas : si vous ne vous sentez pas à l’aise avec les langages html et css, vous n’aurez pas à coder ; ce sont nos équipes qui s’en chargeront. 😊

Comment préparer un zip html « dont vous êtes le héros » alors ? C’est très simple. Pour chaque page, préparez un texte introductif décrivant la situation à laquelle le joueur est confronté ainsi que deux ou trois options d’actions. Pour chaque option, préparez une nouvelle page et indiquez quelle action mène à quelle page.

Pour vous y retrouver plus facilement, n’oubliez pas de numéroter vos pages et de réaliser un schéma illustrant votre logique sur le modèle de l’architecture de votre site. Par exemple : le choix A de la page 1 conduit à la page 7, le choix B à la page 4, etc…

Vous aussi vous avez une idée d’application ludique et scénarisée ? Participez à notre appel à projets, « L’application la plus créative » ! Le projet lauréat sera réalisé gratuitement par nos soins avant la fin de l’année 2018. 🎉

--

--

smartapps
inside-smartapps

smartapps accompagne les sites culturels et touristiques dans l'adaptation de leurs outils de #médiation aux nouveaux usages des #publics. #Musée #Digital #App