[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"page-application-test-environnemental":3},{"doc":4,"isFallback":149},{"id":5,"title":6,"body":7,"description":147,"extension":148,"featureImage":20,"featured":149,"links":150,"meta":151,"navigation":91,"order":152,"path":153,"seo":154,"stem":155,"tags":156,"tools":159,"__hash__":176},"work_fr\u002Fwork\u002Fapplication-test-environnemental.md","Application de test environnemental",{"type":8,"value":9,"toc":137},"minimark",[10,14,21,24,29,32,35,51,54,58,61,64,70,76,79,85,94,98,101,107,110,114,117,121,130,134],[11,12,6],"h1",{"id":13},"application-de-test-environnemental",[15,16,17],"p",{},[18,19],"img",{"alt":6,"src":20,"title":6},"\u002Fimages\u002Fenvironmental-testing-app\u002Flegionella-mobile-feature.jpg",[15,22,23],{},"J'étais le seul designer sur un client mobile pour le test Legionella de Spartan, travaillant avec un développeur mobile pour porter un système sur ordinateur vers iOS et Android. La plupart des fonctionnalités principales ont été conçues et développées avant que le projet ne soit annulé lors de la fermeture de l'entreprise.",[25,26,28],"h2",{"id":27},"le-problème","Le problème",[15,30,31],{},"Le système original fonctionnait sur un ordinateur portable connecté au Spartan Cube par câble, un ordinateur par Cube, filaire. Les responsables d'installation effectuant des tests sur des sites plus grands avaient besoin de plusieurs systèmes, devaient relever manuellement les résultats sur chaque ordinateur, et géraient un encombrement physique important. Le système fonctionnait. L'usage en conditions réelles avait rendu ses limites évidentes.",[15,33,34],{},"La refonte y répondait directement :",[36,37,38,42,45,48],"ul",{},[39,40,41],"li",{},"Contrôle mobile remplaçant l'ordinateur dédié",[39,43,44],{},"Connectivité sans fil via Bluetooth Low Energy (BLE)",[39,46,47],{},"Capable de surveiller plusieurs Cubes simultanément",[39,49,50],{},"Résultats envoyés vers un serveur distant",[15,52,53],{},"Les fonctionnalités principales de l'original ont été conservées : un workflow de test guidé, des instructions étape par étape et un journal de résultats recherchable.",[25,55,57],{"id":56},"structure-et-wireframes","Structure et wireframes",[15,59,60],{},"J'ai commencé par cartographier la structure de l'application autour des cas d'usage plutôt que des types de données, aboutissant à cinq sections : workflow de test, statut du Cube, journal de résultats, paramètres et gestion des sources d'eau.",[15,62,63],{},"Les wireframes ont suivi pour les écrans clés. L'écran d'instructions nécessitait des actions principales accessibles sans s'étirer sur les grands téléphones, ce qui a écarté d'emblée plusieurs dispositions trop denses en haut de l'écran. Pour le journal de résultats, j'ai wireframé quatre approches avant de retenir une liste segmentée avec des en-têtes sticky, qui offrait le meilleur équilibre entre densité d'information et facilité d'utilisation.",[15,65,66],{},[18,67],{"alt":68,"src":69,"title":68},"Wireframes de l'écran d'instructions","\u002Fimages\u002Fenvironmental-testing-app\u002Finstructions-wire.png",[15,71,72],{},[18,73],{"alt":74,"src":75,"title":74},"Wireframes de l'écran du journal","\u002Fimages\u002Fenvironmental-testing-app\u002Flog-wire.png",[15,77,78],{},"La navigation était une question ouverte. J'ai construit un prototype dans Adobe XD, l'ai chargé sur mon téléphone et effectué des tests de couloir. La disposition avec barre inférieure l'a emporté. Les participants appréciaient le chemin rapide pour démarrer un test, et trouvaient la carte du journal de résultats sur l'écran d'accueil déroutante.",[15,80,81],{},[18,82],{"alt":83,"src":84,"title":83},"Wireframes de l'écran d'accueil","\u002Fimages\u002Fenvironmental-testing-app\u002Flanding-wire.png",[15,86,87],{},[88,89],"video",{"src":90,"controls":91,"muted":91,"style":92,"poster":93},"\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation.webm",true,"max-height: 400px;","\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation-poster.png",[25,95,97],{"id":96},"design-et-prototype","Design et prototype",[15,99,100],{},"Après le wireframing, je suis passé à Framer, écrivant un prototype entièrement interactif avec des données en direct et des interactions codées. C'était l'outil de transfert principal. Le développeur signalait tout ce qui ne pouvait pas être implémenté ou nécessitait une révision, et on le travaillait ensemble.",[15,102,103],{},[88,104],{"src":105,"controls":91,"muted":91,"style":92,"poster":106},"\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype.webm","\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype-poster.png",[15,108,109],{},"L'écran de statut du Cube nécessitait un contournement pour la limitation fondamentale du BLE : le Bluetooth ne se connecte qu'en 1-à-1, ce qui aurait complètement compromis la surveillance multi-Cube. En travaillant avec le développeur, on a opté pour la lecture des paquets d'annonce que les Cubes diffusent passivement plutôt que de maintenir une connexion continue. Pour un test en cours, on combinait un minuteur (les tests durent un peu moins d'une heure) avec les mises à jour de paquets disponibles à portée. Les utilisateurs hors de portée lors de la fin d'un test recevaient une notification. Ceux à proximité recevaient le résultat directement depuis l'annonce BLE. On pouvait également attribuer des noms significatifs aux Cubes, et le journal de résultats supportait le filtrage.",[18,111],{"src":112,"alt":113,"title":113},"\u002Fimages\u002Fenvironmental-testing-app\u002Fapplied-filters.png","Filtres appliqués",[15,115,116],{},"Un problème non résolu avant la fin du projet : le curseur double du filtre de résultats. La plage de valeurs significatives était fortement regroupée à l'extrémité basse d'une échelle 0-1000, ce qui le rendait difficile à utiliser précisément. La correction était planifiée (le remplacer par des cases à cocher) mais n'avait pas été implémentée avant l'annulation.",[25,118,120],{"id":119},"développement","Développement",[15,122,123,124,129],{},"J'ai étendu les design tokens de ",[125,126,128],"a",{"href":127},"\u002Fwork\u002Fschedio","Schedio"," dans Theo pour ajouter un format de définition TypeScript et des transformations spécifiques à React Native, donnant au développeur une base de style cohérente. J'ai également contribué au code de style côté implémentation.",[25,131,133],{"id":132},"résultat","Résultat",[15,135,136],{},"La plupart des fonctionnalités principales ont été conçues et développées avant la fermeture de Spartan. Le projet n'a pas atteint la production, mais le travail de design a tenu. Le processus de wireframing et de prototype a mis en évidence de vrais problèmes d'utilisabilité tôt, et la contrainte BLE a produit une solution viable qui aurait été réellement utile sur le terrain.",{"title":138,"searchDepth":139,"depth":140,"links":141},"",2,1,[142,143,144,145,146],{"id":27,"depth":139,"text":28},{"id":56,"depth":139,"text":57},{"id":96,"depth":139,"text":97},{"id":119,"depth":139,"text":120},{"id":132,"depth":139,"text":133},"Effectue le test Legionella de Spartan depuis ton téléphone.","md",false,null,{},5,"\u002Fwork\u002Fapplication-test-environnemental",{"title":6,"description":147},"work\u002Fapplication-test-environnemental",[157,158],"Design","Mobile",[160,164,168,172],{"name":161,"img":162,"href":163},"Adobe XD","\u002Fimages\u002Ftools\u002Fxd.svg","https:\u002F\u002Fwww.adobe.com\u002Fca\u002Fproducts\u002Fxd.html",{"name":165,"img":166,"href":167},"Framer","\u002Fimages\u002Ftools\u002Fframer.svg","https:\u002F\u002Fwww.framer.com\u002F",{"name":169,"img":170,"href":171},"React Native","\u002Fimages\u002Ftools\u002Freact.svg","https:\u002F\u002Freactnative.dev\u002F",{"name":173,"img":174,"href":175},"Theo","\u002Fimages\u002Ftools\u002Ftheo.png","https:\u002F\u002Fgithub.com\u002Fsalesforce-ux\u002Ftheo","NU_7QcTsbm4Xb6aZq3cb8jUPBum0BfU22xjZfewfI8E",1782790338322]