{"id":1179,"date":"2026-03-20T13:53:53","date_gmt":"2026-03-20T17:53:53","guid":{"rendered":"https:\/\/ogsl.enconstruction.website\/?p=1179"},"modified":"2026-06-30T10:56:46","modified_gmt":"2026-06-30T14:56:46","slug":"concevoir-nautilo-lexperience-ux-au-coeur-du-projet","status":"publish","type":"post","link":"https:\/\/ogsl.enconstruction.website\/en\/concevoir-nautilo-lexperience-ux-au-coeur-du-projet\/","title":{"rendered":"Concevoir Nautilo : l\u2019exp\u00e9rience UX au c\u0153ur du projet"},"content":{"rendered":"
\n
\n
\n

Sur Nautilo, les profils de navigateurs sont aussi vari\u00e9s que les courants qui animent le Saint-Laurent. Qu\u2019on soit \u00e0 bord d\u2019un voilier, d\u2019un navire marchand ou d\u2019un bateau scientifique, les besoins en type d\u2019information diff\u00e8rent mais une attente demeure : acc\u00e9der rapidement \u00e0 des donn\u00e9es fiables, dans une interface fluide et intuitive.<\/p>\n

Dans le cadre du d\u00e9veloppement de sa nouvelle plateforme donnant acc\u00e8s aux conditions maritimes sur le Saint-Laurent, l\u2019Observatoire global du Saint-Laurent a fait le choix d\u2019int\u00e9grer une d\u00e9marche d\u2019exp\u00e9rience utilisateur (UX) afin de concevoir un outil \u00e0 partir des usages r\u00e9els de ses utilisateurs.<\/p>\n

Pour y parvenir, l\u2019OGSL s\u2019est notamment appuy\u00e9 sur les expertises de Sophia Thompson, de Francis Gosselin et d\u2019Antoine Biehler. Cet article revient sur cette d\u00e9marche, sur les choix qui en ont d\u00e9coul\u00e9 et sur la mani\u00e8re dont les utilisateurs ont directement influenc\u00e9 la conception de Nautilo.<\/p>\n

Penser \u00e0 l\u2019exp\u00e9rience utilisateur avant l\u2019interface<\/b><\/h3>\n
\n

L\u2019exp\u00e9rience utilisateur, c\u2019est imaginer un concept bas\u00e9 sur des besoins r\u00e9els. On pourrait tr\u00e8s bien concevoir quelque chose de joli sans consulter les gens et partir avec \u00e7a. Mais dans cette direction-l\u00e0, on risque de manquer des \u00e9l\u00e9ments essentiels qui sont vraiment utiles<\/i>\u00a0\u00bb, explique Sophia. \u00ab\u00a0L\u2019objectif, c\u2019est de cr\u00e9er quelque chose qui r\u00e9pond r\u00e9ellement \u00e0 la r\u00e9alit\u00e9 des personnes qui vont l\u2019utiliser<\/i>.<\/p>\n<\/div>\n

Pour Nautilo, l\u2019UX ne s\u2019est donc jamais limit\u00e9e \u00e0 l\u2019esth\u00e9tique de l\u2019interface. La d\u00e9marche a d\u2019abord consist\u00e9 \u00e0 comprendre en profondeur les besoins des utilisatrices et utilisateurs afin de concevoir un outil capable d\u2019y r\u00e9pondre.<\/p>\n

Cette d\u00e9marche s\u2019est structur\u00e9e en quatre grandes \u00e9tapes:\u00a0 une phase de recherche pour mieux comprendre les profils de navigateurs et de plaisanciers, leurs habitudes et leurs irritants ; une r\u00e9flexion sur les solutions num\u00e9riques les plus pertinentes ; l\u2019\u00e9laboration et le test de sc\u00e9narios d\u2019usage ; puis leur validation \u00e0 l\u2019aide de sondages et de cycles de r\u00e9troaction.<\/p>\n

Ces principes se traduisent directement dans l\u2019application. Un travail attentif a \u00e9t\u00e9 men\u00e9 sur l\u2019accessibilit\u00e9 visuelle, notamment dans le choix d\u2019une palette de couleurs adapt\u00e9e et la prise en compte du daltonisme. Une attention particuli\u00e8re a aussi \u00e9t\u00e9 port\u00e9e \u00e0 la constance de l\u2019interface : \u00e9viter les pertes d\u2019information lors de la navigation, assurer une logique claire entre les sections et maintenir des rep\u00e8res stables.<\/p>\n

Naviguer entre vision et contraintes techniques<\/b><\/h3>\n

La programmation de Nautilo a consist\u00e9 \u00e0 transformer cette vision en fonctionnalit\u00e9s concr\u00e8tes. Il fallait donner forme aux intentions, composer avec les contraintes techniques tout en s\u2019assurant que l\u2019outil demeure fluide et coh\u00e9rent sur tous les \u00e9crans.<\/p>\n

\u00ab\u00a0Avec les autres d\u00e9veloppeurs, on \u00e9tait ceux qui devaient traduire la vision de l\u2019application en r\u00e9alit\u00e9. C\u2019est plus facile \u00e0 dire qu\u2019\u00e0 faire, parce que quand \u00e7a devient r\u00e9el, il y a toujours une multitude d\u2019impr\u00e9vus<\/i>\u00a0\u00bb, explique Francis. \u00ab\u00a0Par exemple, l\u2019application \u00e9tant accessible sur ordinateur, tablette et mobile, chaque r\u00e9solution d\u2019\u00e9cran devait \u00eatre prise en compte. Mais au-del\u00e0 de l\u2019adaptation technique, l\u2019enjeu touchait aussi au comportement m\u00eame de l\u2019outil. Il fallait s\u2019assurer que quand on se d\u00e9place dans l\u2019application, ce soit fluide et rapide. Que lorsqu\u2019on revient sur une page, il y ait une constance et qu\u2019on ne perde pas le flux de navigation\u00a0\u00bb, poursuit-il. \u00ab\u00a0Sur la carte, mon travail \u00e9tait beaucoup li\u00e9 \u00e0 l\u2019optimisation, pour que l\u2019application soit\u00a0responsive\u00a0<\/i>et surtout pas frustrante pour l\u2019utilisateur. \u00bb<\/div>\n

Traduire les besoins utilisateurs en choix d\u2019interface a n\u00e9cessit\u00e9 un dialogue \u00e9troit entre UX et programmation. Certaines demandes se heurtaient \u00e0 des contraintes bien r\u00e9elles : accessibilit\u00e9 ou co\u00fbt des donn\u00e9es, limites li\u00e9es aux serveurs, enjeux de performance ou contraintes techniques. D\u2019autres d\u00e9fis ont toutefois \u00e9t\u00e9 relev\u00e9s malgr\u00e9 leur complexit\u00e9, comme l\u2019int\u00e9gration des flux de particules.<\/p>\n

Repr\u00e9senter ces flux, adapt\u00e9s \u00e0 la g\u00e9ographie particuli\u00e8re du Saint-Laurent, \u00e0 partir d\u2019outils\u00a0open source<\/em>\u00a0et de donn\u00e9es sp\u00e9cialis\u00e9es, s\u2019est r\u00e9v\u00e9l\u00e9 particuli\u00e8rement exigeant, comme le r\u00e9sume Francis.<\/p>\n

\n

\u00c7a a \u00e9t\u00e9 une longue croisade<\/i>.\u00a0Ce qui \u00e9tait demandant, c\u2019\u00e9tait de faire une bonne repr\u00e9sentation de particules qui agissent dans un espace restreint, les rivi\u00e8res, le fleuve. Puis de visualiser le tout dans une carte interactive adapt\u00e9e \u00e0 tous les \u00e9crans, de mani\u00e8re optimis\u00e9e et interactive. C\u2019est-\u00e0-dire qu\u2019on attend pas des heures pour acc\u00e9der aux donn\u00e9es, que l\u2019on peut voir les particules qui changent de direction selon l\u2019heure et que le tout reste sobre num\u00e9riquement, sans utiliser trop de donn\u00e9es sur le r\u00e9seau. \u00c7a fait beaucoup de consid\u00e9rations au niveau UX pour ne pas \u00eatre frustr\u00e9 par cette fonction. On est arriv\u00e9s \u00e0 quelque chose de super bien et, \u00e0 notre connaissance, il n\u2019y a pas d\u2019autre application qui le fait comme on le fait.<\/i>\u00a0\u00bb<\/p>\n<\/div>\n

Des choix de conception guid\u00e9s par les utilisateurs<\/b><\/h3>\n

Nautilo est n\u00e9 de la volont\u00e9 de regrouper deux applications existantes :\u00a0Conditions maritimes<\/em>, destin\u00e9e aux professionnels et\u00a0Navigation<\/em>, davantage orient\u00e9e vers les plaisanciers. Afin de cr\u00e9er une plateforme v\u00e9ritablement unifi\u00e9e, l\u2019\u00e9quipe a identifi\u00e9 les besoins de ces deux grands profils d\u2019utilisateurs et int\u00e9gr\u00e9 un \u00e9ventail \u00e9largi de variables au sein de Nautilo.<\/p>\n

L\u2019id\u00e9e \u00e9tait de d\u00e9cloisonner les types de donn\u00e9es disponibles et de permettre \u00e0 chaque utilisateur d\u2019activer les fonctionnalit\u00e9s pertinentes selon sa r\u00e9alit\u00e9.\u00a0 Cette approche permet \u00e0 la fois de r\u00e9pondre \u00e0 des usages tr\u00e8s sp\u00e9cialis\u00e9s mais aussi de stimuler l\u2019int\u00e9r\u00eat d\u2019utilisateurs qui souhaitent explorer davantage les donn\u00e9es disponibles.\u00a0Tout le monde peut ainsi adapter Nautilo \u00e0 ses besoins, selon que l\u2019on recherche une information pointue ou une vue d\u2019ensemble des conditions maritimes.\u00a0L\u2019exercice peut repr\u00e9senter un d\u00e9fi : chaque fonctionnalit\u00e9 doit r\u00e9pondre \u00e0 un besoin r\u00e9el, sans compromettre la fluidit\u00e9, la performance ou la clart\u00e9 de l\u2019interface.<\/p>\n

Au-del\u00e0 de Nautilo, cette mani\u00e8re de faire devient un v\u00e9ritable levier pour l\u2019OGSL et une bonne pratique \u00e0 int\u00e9grer dans la mise \u00e0 jour et le d\u00e9veloppement d\u2019autres applications.<\/p>\n

\u00ab Si l\u2019utilisateur est au centre de la d\u00e9marche, on ne d\u00e9veloppe pas une application en fonction de ce qu\u2019on sait d\u00e9j\u00e0 faire. On la d\u00e9veloppe pour r\u00e9pondre \u00e0 son besoin, m\u00eame si au d\u00e9part on ne sait pas le faire. \u00c7a va m\u00eame devenir un d\u00e9fi pour nous de trouver comment y arriver, souligne Antoine. Certains de nos outils existants sont peu conviviaux, car ils ont \u00e9t\u00e9 con\u00e7us par des sp\u00e9cialistes pour des sp\u00e9cialistes sans tenir compte des utilisateurs non initi\u00e9s. \u00bb<\/div>\n

L\u2019enjeu touche \u00e0 la mission et aux valeurs de l\u2019OGSL.<\/p>\n

\u00ab \u00c7a affecte la r\u00e9tention. \u00c0 quoi \u00e7a sert d\u2019avoir quelque chose qui fonctionne si personne ne sait comment l\u2019utiliser ? Une des missions de l\u2019OGSL, c\u2019est la valorisation des donn\u00e9es. Si on les publie, il faut qu\u2019elles puissent \u00eatre utilis\u00e9es. Et finalement, parler de r\u00e9utilisation sans le r\u00e9utilisateur, c\u2019est un peu antith\u00e9tique. \u00bb<\/div>\n

Ainsi, en d\u00e9veloppant des outils accessibles, pens\u00e9s pour \u00eatre utilis\u00e9s et rapidement adopt\u00e9s par leurs publics, la d\u00e9marche UX contribue directement \u00e0 la diffusion et \u00e0 la valorisation des donn\u00e9es sur le Saint-Laurent.
\n___<\/b><\/p>\n

La d\u00e9marche UX mise en place pour Nautilo s\u2019inscrit dans un processus it\u00e9ratif, appel\u00e9 \u00e0 \u00e9voluer au fil des usages, des besoins et des retours du terrain.<\/p>\n

Un suivi continu permettra de mieux comprendre quelles donn\u00e9es sont les plus consult\u00e9es, lesquelles le sont moins et comment les mettre en valeur. Les retours des utilisateurs joueront un r\u00f4le central dans cette \u00e9volution : une section d\u2019information permet d\u00e9j\u00e0 de signaler des bogues ou de proposer des am\u00e9liorations et l\u2019\u00e9quipe de l\u2019OGSL demeure disponible pour \u00e9changer.<\/p>\n

Comme le souligne l\u2019\u00e9quipe \u00ab\u00a0On a beau en avoir beaucoup, on peut toujours en avoir plus. La question est de savoir comment les int\u00e9grer et comment approfondir les tentacules d\u2019utilisations de Nautilo.<\/strong><\/em> \u00bb<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Sur Nautilo, les profils de navigateurs sont aussi vari\u00e9s que les courants qui animent le Saint-Laurent. Qu\u2019on soit \u00e0 bord d\u2019un voilier, d\u2019un navire marchand ou d\u2019un bateau scientifique, les\u2026<\/p>\n","protected":false},"author":2,"featured_media":1399,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"thematique":[48],"class_list":["post-1179","post","type-post","status-publish","format-standard","has-post-thumbnail","category-non-classe","thematique-thematique-1"],"acf":[],"_links":{"self":[{"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/posts\/1179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/comments?post=1179"}],"version-history":[{"count":2,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/posts\/1179\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/posts\/1179\/revisions\/1400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/media\/1399"}],"wp:attachment":[{"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/media?parent=1179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/categories?post=1179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/tags?post=1179"},{"taxonomy":"thematique","embeddable":true,"href":"https:\/\/ogsl.enconstruction.website\/en\/wp-json\/wp\/v2\/thematique?post=1179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}