{"id":4979,"date":"2025-02-26T16:00:50","date_gmt":"2025-02-26T21:00:50","guid":{"rendered":"https:\/\/adonato.dectim.ca\/agencetim\/?p=4979"},"modified":"2025-04-06T14:11:53","modified_gmt":"2025-04-06T18:11:53","slug":"mise-en-contexte","status":"publish","type":"post","link":"https:\/\/adonato.dectim.ca\/agencetim\/mise-en-contexte\/","title":{"rendered":"Collaboration – L’art de la mise en contexte pour toucher la cible"},"content":{"rendered":"\n

[Ce texte est le fruit d\u2019une collaboration conversationnelle et it\u00e9rative entre Alexandre Donato et ChatGPT, une intelligence artificielle. L\u2019id\u00e9e originale a parfois \u00e9merg\u00e9 des propositions de l\u2019IA, parfois de l\u2019auteur. Chaque id\u00e9e a ensuite \u00e9t\u00e9 d\u00e9velopp\u00e9e, enrichie et finalis\u00e9e par Alexandre Donato, garantissant une r\u00e9flexion humaine et adapt\u00e9e au contexte. Ce document illustre une synergie entre cr\u00e9ativit\u00e9 algorithmique et expertise humaine. Vos remarques et suggestions pour am\u00e9liorer encore ce contenu sont les bienvenues.]<\/em><\/p>\n\n\n\n

Dans un projet multim\u00e9dia, bien contextualiser une demande ou une information permet d’\u00e9viter les malentendus, d’am\u00e9liorer la collaboration et de gagner du temps. Voici des situations cl\u00e9s o\u00f9 la mise en contexte est essentielle, avec des exemples concrets.<\/h5>\n\n\n\n
\n\n\n\n

1. Expliquer un bogue<\/strong> \ud83d\udc1b<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Le bouton ne marche pas.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Le bouton \u2018Valider\u2019 du formulaire de contact ne r\u00e9agit pas sous Chrome (version 121.0) sur mobile Android. Il fonctionne sous Firefox. Voici une capture d\u2019\u00e9cran et la console d\u2019erreur.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Pr\u00e9ciser o\u00f9 et quand le probl\u00e8me survient
\u2714 Indiquer l\u2019environnement (appareil, navigateur, version)
\u2714 Joindre des preuves (captures, logs, vid\u00e9o)<\/p>\n\n\n\n

\n\n\n\n

2. Demander une modification<\/strong> \u270f\ufe0f<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Peux-tu changer la couleur du texte ?\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Le texte du call-to-action \u2018Acheter maintenant\u2019 manque de contraste avec le fond. Il ne respecte pas les normes d\u2019accessibilit\u00e9 (WCAG). Peux-tu essayer une couleur plus fonc\u00e9e pour am\u00e9liorer la lisibilit\u00e9 ?\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Justifier la modification (lisibilit\u00e9, UX, accessibilit\u00e9)
\u2714 Pr\u00e9ciser l\u2019\u00e9l\u00e9ment concern\u00e9
\u2714 Donner des crit\u00e8res clairs d\u2019am\u00e9lioration<\/p>\n\n\n\n

\n\n\n\n

3. Donner une r\u00e9troaction<\/strong> \ud83d\udde3\ufe0f<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Le design est trop charg\u00e9.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0L\u2019objectif \u00e9tait d\u2019avoir une interface \u00e9pur\u00e9e pour une lecture fluide. Actuellement, il y a trois polices diff\u00e9rentes et beaucoup d\u2019\u00e9l\u00e9ments visuels qui d\u00e9tournent l\u2019attention. Peut-on tester une mise en page plus minimaliste ?\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Rappeler l\u2019objectif initial
\u2714 Expliquer ce qui fonctionne et ce qui pose probl\u00e8me
\u2714 Proposer une piste d\u2019am\u00e9lioration<\/p>\n\n\n\n

\n\n\n\n

4. Pr\u00e9senter un projet \u00e0 un client ou une \u00e9quipe<\/strong> \ud83c\udfa4<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Voici le site web.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Ce site a \u00e9t\u00e9 con\u00e7u pour des utilisateurs d\u00e9butants en finance. Nous avons simplifi\u00e9 la navigation en mettant en avant les outils interactifs et en r\u00e9duisant les distractions sur la page d\u2019accueil. Voici les tests utilisateurs qui appuient ces choix.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Rappeler le public cible et l\u2019objectif
\u2714 Expliquer les choix faits et leur impact
\u2714 Appuyer avec des donn\u00e9es ou des tests utilisateurs<\/p>\n\n\n\n

\n\n\n\n

5. Faire une recommandation technique<\/strong> \u2699\ufe0f<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0On devrait utiliser React.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Comme notre site web inclura beaucoup d\u2019interactions dynamiques (formulaires r\u00e9actifs, animations en temps r\u00e9el), React serait un bon choix. Il est plus performant que jQuery et mieux adapt\u00e9 \u00e0 des projets \u00e9volutifs.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Comparer avec d\u2019autres options
\u2714 Expliquer les avantages dans le contexte du projet
\u2714 Justifier avec des besoins concrets (performance, \u00e9volutivit\u00e9, compatibilit\u00e9)<\/p>\n\n\n\n

\n\n\n\n

6. Briefer une \u00e9quipe sur un projet<\/strong> \ud83d\udccb<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0On fait une vid\u00e9o promotionnelle.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0La vid\u00e9o sera diffus\u00e9e sur Instagram et TikTok, donc elle doit \u00eatre courte (moins de 30s), impactante d\u00e8s les premi\u00e8res secondes, et int\u00e9grer du sous-titrage car beaucoup d\u2019utilisateurs regardent sans le son.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Pr\u00e9ciser la plateforme et les contraintes
\u2714 Expliquer les attentes en termes de format et d\u2019impact
\u2714 Donner des exemples ou r\u00e9f\u00e9rences si possible<\/p>\n\n\n\n

\n\n\n\n

7. \u00c9crire une documentation technique<\/strong> \ud83d\udcda<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Utilisez ce fichier JSON pour configurer l\u2019API.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Ce fichier JSON contient les param\u00e8tres n\u00e9cessaires pour connecter l\u2019API au tableau de bord de l\u2019application. Il est pr\u00e9configur\u00e9 pour notre environnement de test (sandbox), mais il faudra modifier l\u2019URL pour le passage en production.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Expliquer l\u2019objectif du document
\u2714 Indiquer les \u00e9tapes \u00e0 suivre et les pr\u00e9cautions \u00e0 prendre
\u2714 Inclure des exemples concrets<\/p>\n\n\n\n

\n\n\n\n

10. Justifier une prise de d\u00e9cision<\/strong> \u2705<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0On a chang\u00e9 la mise en page.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Suite aux tests utilisateurs, 60 % des participants avaient du mal \u00e0 trouver les informations cl\u00e9s. Nous avons donc restructur\u00e9 la mise en page en pla\u00e7ant les \u00e9l\u00e9ments importants en haut et en augmentant la taille des titres.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Appuyer la d\u00e9cision sur des faits ou tests
\u2714 Expliquer l\u2019impact attendu
\u2714 Montrer que l\u2019alternative a \u00e9t\u00e9 r\u00e9fl\u00e9chie<\/p>\n\n\n\n

\n\n\n\n

14. Former ou int\u00e9grer un nouveau membre dans une \u00e9quipe<\/strong> \ud83c\udf93<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> : \u00ab\u00a0Voici les fichiers du projet.\u00a0\u00bb
\u2705 Avec mise en contexte<\/em> :
\u00ab\u00a0Dans ce projet, nous suivons une approche modulaire. Tous les composants sont regroup\u00e9s dans le dossier \u2018UI Components\u2019, et les styles globaux sont d\u00e9finis dans \u2018theme.scss\u2019. Les t\u00e2ches sont assign\u00e9es via Trello.\u00a0\u00bb<\/em><\/p>\n\n\n\n

\u2714 Expliquer l\u2019organisation du projet
\u2714 Donner des rep\u00e8res concrets (fichiers, outils, m\u00e9thodes)
\u2714 Orienter vers des ressources utiles (guides, r\u00e9f\u00e9rences)<\/p>\n\n\n\n

\n\n\n\n

16. Nommer les t\u00e2ches dans une liste ou un outil de gestion de projet (ex. : Trello)<\/strong> \ud83d\udccc<\/h3>\n\n\n\n

\u274c Sans mise en contexte<\/em> :<\/p>\n\n\n\n

    \n
  • \u00ab\u00a0Corriger bug\u00a0\u00bb<\/li>\n\n\n\n
  • \u00ab\u00a0Modifier image\u00a0\u00bb<\/li>\n\n\n\n
  • \u00ab\u00a0Faire la page d’accueil\u00a0\u00bb<\/li>\n<\/ul>\n\n\n\n

    \u2705 Avec mise en contexte<\/em> :<\/p>\n\n\n\n

      \n
    • \u00ab\u00a0Corriger bug \u2013 Formulaire d\u2019inscription ne fonctionne pas sous Safari (iOS 17)\u00a0\u00bb<\/strong><\/li>\n\n\n\n
    • \u00ab\u00a0Remplacer l\u2019image du header \u2013 Version mobile floue, ajouter une image en 2x\u00a0\u00bb<\/strong><\/li>\n\n\n\n
    • \u00ab\u00a0Cr\u00e9er la page d’accueil \u2013 Suivre la maquette Figma v3 + ajouter animation sur le CTA\u00a0\u00bb<\/strong><\/li>\n<\/ul>\n\n\n\n

      \u2714 \u00catre pr\u00e9cis et descriptif
      \u2714 Utiliser un format clair ([Action] \u2013 [Lieu] + [D\u00e9tail]<\/code>)
      \u2714 Inclure des r\u00e9f\u00e9rences (Figma, bug report, specs)<\/p>\n\n\n\n

      \n\n\n\n

      17. Demander des commentaires sur une cr\u00e9ation<\/strong> \ud83c\udfa8\u270d\ufe0f<\/h3>\n\n\n\n

      \u274c Sans mise en contexte<\/em> : \u00ab\u00a0Qu\u2019en penses-tu ?\u00a0\u00bb
      \u2705 Avec mise en contexte<\/em> :<\/p>\n\n\n\n

        \n
      • \u00ab\u00a0J\u2019ai ajust\u00e9 la lisibilit\u00e9 du logo. Est-ce que cette version fonctionne mieux en petit format ?\u00a0\u00bb<\/strong><\/li>\n\n\n\n
      • \u00ab\u00a0L\u2019animation dure 5s. Trouves-tu le timing fluide ou trop long ?\u00a0\u00bb<\/strong><\/li>\n\n\n\n
      • \u00ab\u00a0L\u2019objectif de cette page est de mettre en avant les t\u00e9moignages clients. La mise en page guide-t-elle bien l\u2019utilisateur ?\u00a0\u00bb<\/strong><\/li>\n<\/ul>\n\n\n\n

        \u2714 Cibler l\u2019\u00e9l\u00e9ment sur lequel on veut un retour
        \u2714 Expliquer l\u2019intention initiale
        \u2714 Poser une question pr\u00e9cise<\/p>\n\n\n\n

        \n\n\n\n

        Conclusion<\/strong><\/h3>\n\n\n\n

        Dans un projet multim\u00e9dia, la mise en contexte transforme une simple demande en un message clair et exploitable. Elle \u00e9vite les retours inutiles, facilite la collaboration et am\u00e9liore la qualit\u00e9 du travail livr\u00e9. En appliquant ces bonnes pratiques, on optimise la communication et l\u2019efficacit\u00e9 de toute l\u2019\u00e9quipe. \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"

        [Ce texte est le fruit d\u2019une collaboration conversationnelle et it\u00e9rative entre Alexandre Donato et ChatGPT, une intelligence artificielle. L\u2019id\u00e9e originale […]<\/p>\n","protected":false},"author":1,"featured_media":4980,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-objectif-dapprentissage-2-mettre-en-pratique-les-normes-professionnelles-en-organisation-communication-travail-dequipe-et-archivage"],"_links":{"self":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/comments?post=4979"}],"version-history":[{"count":3,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4979\/revisions"}],"predecessor-version":[{"id":4984,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4979\/revisions\/4984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media\/4980"}],"wp:attachment":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media?parent=4979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/categories?post=4979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/tags?post=4979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}