Une application pour les Marins-Pompiers de Marseille
Damien Lockner
Voici un petit retour sur l'un de nos premiers projets 'full-stack', depuis l'étude ergonomique jusqu'à la publication de l'application.
Pour inaugurer ce nouveau blog, commençons par un projet qui date déjà de 2013, mais qui nous tient vraiment à cœur. Que le temps passe vite ! :)
Il s'agit d'une application portée par Mermed, l'association des médecins du Bataillon de Marins-Pompiers de Marseille.
Le contexte et les besoins du commanditaire
Les médecins urgentistes doivent intervenir dans des situations variées, complexes, et avec une importante pression temporelle. De plus, il faut pouvoir faire appel à de très nombreuses connaissances et de savoir-faire, tant pour le diagnostic que pour le choix des traitements ou des gestes adéquats.
Or, les capacités cognitives de rappel, de synthèse, et de prise de décision peuvent être affectées par ces facteurs de stress et par le niveau d'expérience des médecins.
Ainsi, historiquement, les médecins urgentistes disposaient d'un manuel papier auquel se référer en cas de besoin. Cet ouvrage souffrait cependant de quelques inconvénients : il était quelque peu lourd et encombrant, et sa consultation n'était pas des plus rapides.
Mermed a donc développé une première application iOS afin de disposer d'une alternative numérique à l'encombrant mais indispensable ouvrage.
Mermed a identifié plusieurs limitations à cette première version :
- De nombreux problèmes d'utilisabilité (identifiés par notre confrère ergonome Florian Such)
- Une distribution limitée aux appareils Apple
- Des mises à jour des contenus nécessitant une republication systématique de l'application
Les connaissances et les protocoles ne sont en effet ni figés ni universels. Les contenus proposés au sein de l'application sont en fait la résultante d'un important travail de synthèse réalisé par l'association des médecins Marins-Pompiers, identifiant les bonnes pratiques, et combinant les recommandations de chaque praticien.
Ainsi, un travail éditorial de fond alimente constamment l'application en nouveaux contenus.
C'est dans ce contexte que Mermed a fait appel à Spicy Life pour réaliser une nouvelle version de l'application de protocoles SMUR.
La solution proposée
Avant de se consacrer pleinement au travail de développement, nous avons commencé par reconsidérer la demande du commanditaire : l'indispensable étape de "reformulation de la demande" propre à toute démarche ergonomique. A partir de cette reformulation, nous avons identifié les objectifs à atteindre, l'expérience d'utilisation correspondante, et enfin la solution technique à mettre en oeuvre.
Cette approche est relativement constante pour l'ensemble de nos projets :
- Reformulation de la demande
- Définition des objectifs d'utilisation
- Définition et design de l'expérience d'utilisation
- Sélection des options techniques
- Réalisation
Le développement n'est donc que la partie émergée de l'iceberg ; une démarche rigoureuse a été mise en oeuvre en amont.
Reformulation de la demande et objectifs d'utilisation
Utilisabilité générale
L'étude initiée par Florian a mis en évidence des défaillances d'utilisabilité de la version pré-existante. Il a notamment souligné des problèmes de repérage, d'homogénéité et de densité informationnelle.
Le contexte spécifique d'utilisation de l'application implique un stress important de l'utilisateur ; les enjeux sont de taille, la pression temporelle est forte, et la situation environnementale n'est pas toujours calme et sereine. Dans ce contexte particulier, les limites de nos capacités cognitives peuvent être affectées. Les enjeux d'ergonomie sont donc particulièrement importants pour retrouver très rapidement une information ; il s'agit notamment de :
- Simplifier le repérage
- Limiter les étapes de navigation
- Accélérer le parcours des pages longues
- Faciliter l'apprentissage de l'application par une homogénéité rigoureuse du design d'information
Expertise des utilisateurs
Le porteur de projet a évoqué assez tôt des différences d'utilisation de l'application selon le degré d'expertise de l'utilisateur. Les "débutants" devaient pouvoir disposer d'informations précises et complètes afin de compléter leur formation, notamment en dehors d'une utilisation de terrain. En revanche, les "experts" ont besoin de l'application durant les interventions. Ils doivent pouvoir accéder rapidement à une information claire et synthétique.
Mermed a donc avancé l'idée d'un mode "synthèse", qui pouvait effectivement compléter les informations riches et précises de chaque protocole par une version alternative courte et opérationnelle.
Mise à jour des contenus et utilisation hors ligne
Un autre enjeu consistait à proposer une infrastructure répondant aux exigences des processus rédactionnels spécifiques des médecins Marins-Pompiers. Plusieurs contraintes ont ainsi été identifiées :
- Pouvoir modifier les contenus indépendamment du code de l'application.
- Disposer de contenus en mode "brouillon", non publiés, facilitant le travail collaboratif des rédacteurs.
- Synchroniser les applications clientes.
- Et permettre à l'application de fonctionner hors ligne.
L'ensemble de ces "objectifs d'utilisation" ont déterminé des "contraintes de conception" orientant la définition d'une expérience d'utilisation optimale.
Expérience d'utilisation
La première étape du design a consisté à identifier les éléments constitutifs de l'ensemble des protocoles et des présentations thérapeutiques (traitements médicamenteux). La structuration employée par les marins-pompiers était déjà assez claire. Cependant, la structure n'était pas systématiquement identique, et les éléments présentaient également parfois des variations de libellé.
Un travail d'architecture de l'information, assorti d'un contrôle du vocabulaire et d'une utilisation rationnelle du code couleur pré-existant, a permis d'uniformiser et d'améliorer la cohérence de la structure des protocoles constitués de plus de 600 composantes.
Ce travail d'architecture a guidé la transformation de la mise en page des écrans pour optimiser le repérage et la navigation dans l'application. Plusieurs options ont ainsi été retenues :
- Un mode synthèse et un mode détail, le passage de l'un à l'autre étant réalisé par un simple bouton, et ce choix mémorisé pour les utilisations ultérieures.
- Un moteur de recherche filtrant sans nécessité de valider la saisie.
- Un mode de protocoles ou thérapeutiques "favoris" permettant de se constituer un ensemble de protocoles et de thérapeutiques "critiques" ou fréquemment utilisés.
- Une navigation secondaire exploitant les codes couleurs définis, pour accéder directement à une section spécifique.
Outre la présentation de pages informationnelles, l'application propose des outils de calculs, par exemple pour évaluer rapidement le degré de brûlure, la vitalité d'un nouveau né, ou le débit d'une perfusion.
Un soin particulier a été apporté pour rendre la prise en main immédiate, et minimiser le nombre d'étapes et de gestes nécessaires à l'obtention du résultat.
Options techniques
Nous avons choisi de réaliser une application hybride sur une base HTML5/CSS3. En effet, associée à Phonegap/Cordova, un travail de développement unique permettait un portage facilité pour iOS et Android. Cordova permettait en outre d'accéder à un base de données locale en WebSQL. Cette infrastructure permettait donc de synchroniser les contenus de l'application avec une base de données distante. L'interface de gestion des contenus éditoriaux a fait l'objet d'un développement sur mesure pour simplifier et accélérer au maxium les tâches de saisie. Il s'agissait également d'encoder les éléments interactifs des contenus (images et tableaux affichables en plein écran) pour qu'ils soient reconnus en JavaScript côté application. Nous apprécions particulièrement les CMS minimalistes et efficients, mais ceci fera l'objet d'un autre petit billet consacré entièrement à ces sujet...
L'application a ensuite été composée au sein d'une structure unique dont les "pseudo-pages" sont chargés dynamiquement en JavaScript. Plusieurs options d'infrastructure avaient alors été comparées. Nous avions choisi jQuery Mobile avant de nous tourner finalement vers un développement propre. Aucun framework responsive ne semblait alors proposer à la fois une bibliothèque d'interactions et de transitions riches et une structure CSS facilement personnalisable. Je crois que nous ne réaliserons plus jamais aucun projet avec jQuery Mobile ! Depuis, bien des frameworks d'applications "one page" sont arrivés à maturité, qui auraient drastiquement accéléré notre travail de développement...
Enfin, la plupart des visuels sont présentés en SVG, que ce soit pour les icônes accompagnant les libellés, ou bien pour les interactions nécessaires à certaines pages de scores telles que la page de calcul de brûlures.
Pour conclure...
Cette collaboration avec Mermed aura été particulièrement enrichissante : il s'agissait d'un de nos premiers projets "full stack", depuis l'analyse ergonomique des besoins jusqu'à la publication des applications. Nous avions ainsi pu proposer des axes intéressants en termes de design d'information et d'interactions, et identifier des solutions techniques adaptées aux spécificités de la demande.
L'application est téléchargeable depuis Google Play et l'AppStore.
Si vous avez des remarques, des questions, ou des commentaires, n'hésitez pas bien sûr à nous envoyer un petit mot. Ce sera un plaisir de pouvoir échanger avec vous.
