A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 17KB

1 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Avantages et limites (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.maiwann.net/blog/laventuredelamoderation4/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Avantages et limites</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.maiwann.net/blog/laventuredelamoderation4/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Alors maintenant que je vous ai dit tout ça, faisons un petit bilan des avantages et surtout des limites de ce système !</p>
  71. <p>Si vous avez raté les articles précédents, vous pouvez ls retrouver par ici :</p>
  72. <ul>
  73. <li>Chapitre 1 : <a href="https://www.maiwann.net/blog/laventuredelamoderation1/">Un contexte compliqué</a></li>
  74. <li>Chapitre 2 : <a href="https://www.maiwann.net/blog/laventuredelamoderation2/">La découverte de la modération</a></li>
  75. <li>Chapitre 3 : <a href="https://www.maiwann.net/blog/laventuredelamoderation3/">La pratique de la modération</a></li>
  76. </ul>
  77. <h2 id="les-avantages">Les avantages</h2>
  78. <p>Je vais être courte parce que mon point n’est pas ici d’encenser Mastodon, donc je ne creuserai pas trop les avantages. Cependant je ne peux pas m’empêcher de remettre en avant deux points majeurs :</p>
  79. <p>Indéniablement, <a href="https://mstdn.social/@nassiraelmoaddem/109298566075349373">on bloque très vite les fachos.</a> C’est quand même, à mon avis, le grand intérêt, qui n’est pas assez connu au-delà de Mastodon. De ce fait nous avons une exigence collective très faible par rapport à la modération : Quand Twitter annonce qu’il ne peut pas faire mieux, on le croit sur parole alors qu’une alternative sans moyens d’envergure y arrive… Journalistes spécialisés si vous lisez ce message !</p>
  80. <p>Ensuite, le fonctionnement est beaucoup plus démocratique car : ce sont des humains que vous choisissez qui font la modération. Et ça, ça change beaucoup de choses. Déjà parce qu’on est dans un fonctionnement beaucoup plus… artisanal de la modération, donc potentiellement avec plus de proximité, dans l’idéal on peut discuter / appeller à l’aide ses modérateurices… et même selon les endroits, proposer de participer à la modération et ça, ça compte pour se rendre compte du boulot que c’est, et participer aux décisions importantes !</p>
  81. <h2 id="les-limites">Les limites</h2>
  82. <p>Comme rien n’est parfait, et que nous sommes sur une alternative qui évolue tout le temps, quelques points qui restent des limites malgré le modèle anti-capitaliste de Mastodon :</p>
  83. <h3 id="temps-de-traitement-dun-signalement">Temps de traitement d’un signalement</h3>
  84. <p>Il y a un difficile équilibre entre le temps de traitement d’un signalement et le temps d’entendre plusieurs avis du collectif de modération. Je pense qu’il est sain de prendre le temps, mais il y a des situations où l’un·e des modérateurices peut considérer qu’il y a “urgence” et dans ce cas, attendre 48h c’est beaucoup (pour protéger une personne par exemple). C’est un point que nous n’avons pas encore creusé à Framasoft (comment gérer le dilemme rapidité d’action VS disponibilité du collectif), mais que je me note de rajouter en discussion pour nos prochaines retrouvailles !</p>
  85. <p>Encore une fois je parle là des cas difficiles à départager. Si il s’agit de pédopornographie, les salariés de Framasoft sont déjà habitués à devoir réagir rapidement pour supprimer le contenu, donc je ne traite pas ce sujet ici car il n’est pas spécifique.</p>
  86. <h3 id="beaucoup-dutilisateurices-beaucoup-de-problèmes">Beaucoup d’utilisateurices, beaucoup de problèmes</h3>
  87. <p>Framasoft est une association très connue, et nos utilisateurices nous choisissent souvent car iels ont confiance en nous (merci !)
  88. Mais du coup, cela entraîne une responsabilité compliquée à gérer : Plus de monde chez nous, ça nous fait plus de travail, de modération notamment.</p>
  89. <p>Aussi, dans un cadre plus large qui était celui de la <a href="https://framablog.org/2019/09/24/deframasoftisons-internet/">déframasoftisation d’Internet</a>, nous avons fermé les inscriptions, ce qui nous a permis d’alléger la charge de notre coté.</p>
  90. <p>Et comme tous les Mastodon sont interconnectés, il est possible d’aller s’inscrire ailleurs pour suivre ce qui se passe chez nous, donc c’est un fonctionnement technique qui nous permet de mieux vivre le travail de modération… youpi !</p>
  91. <h3 id="éviter-la-spécialisation-des-modérateurices">Éviter la “spécialisation” des modérateurices</h3>
  92. <p>Lors de la mise en place d’une équipe de modération à Framasoft, il a fallu faire un petit temps de formation-découverte à l’interface de modération de Mastodon.</p>
  93. <p>Or on a vu apparaître assez rapidement une “spécialisation” entre celleux qui “savaient” utiliser l’interface, et celleux qui n’osaient pas car ne “savaient pas” l’utiliser.</p>
  94. <p>Pourtant il y a beaucoup de valeur à ce que la connaissance autour des outils circule auprès de tou·tes celleux que cela peut intéresser :</p>
  95. <ul>
  96. <li>Pour qu’il y ait de plus en plus de modérateurices, ce qui répartit le temps dédié à la modération,</li>
  97. <li>Pour que la discussion soit ouverte à des personnes qui n’ont pas la tête plongée dans la modération, ça permet d’entendre d’autres paroles, c’est appréciable,</li>
  98. </ul>
  99. <p>Pour résoudre ce problème, nous avons organisé des visios de modération !
  100. C’est une pratique que nous avons dans <a href="https://lechappeebelle.team/">ma coopérative</a> : faire des tâches chiantes, c’est quand même bien plus sympa ensemble !
  101. Alors quand l’un de nous disait “bon, là, il y a quand même beaucoup de signalements qui s’accumulent” je répondais parfois “ça vous dit on fait une visio pour les traiter ensemble ?!”</p>
  102. <p>Nous n’avions pas besoin d’être beaucoup, à 2, 3 ou 4 c’était déjà bien plus sympa, même les contenus agressifs sont plus faciles à traiter quand les copains sont là pour faire des blagues ou râler avec toi ! Nous lancions un partage d’écran, idéalement d’une personne pas hyper à l’aise pour l’accompagner, et nous traitions les signalements.</p>
  103. <p>Autre effet bénéfique : <strong>la boucle de “je demande leur avis aux copaines, j’attends, je traite le signalement” est raccourcie</strong> car nous pouvons collectivement débattre en direct du problème. C’est vraiment une façon très sympa de faire de la modération !</p>
  104. <h2 id="les-on-va-voir-et-autres-on-peut-pas-savoir">Les “On va voir” et autres “On peut pas savoir”</h2>
  105. <p>Enfin, si tout cela est possible actuellement, une part de moi me demande si ce n’est pas dû au fait que Mastodon passe encore “sous les radars”.
  106. C’est un sentiment que j’ai tendance à minimiser vu que cela ne nous a pas empêché d’avoir des hordes de comptes d’extrêmes droites qui se ramenaient. Donc une part de moi pense que le réseau (qui a déjà 6 ans donc on est loin du petit truc tout nouveau qui a 6 mois) a un fonctionnement déjà résilient.
  107. Et une autre partie de moi sait qu’elle n’est pas voyante, donc on verra bien dans le futur !</p>
  108. <p>Par contre je voudrais insister sur le fait qu’on ne peut pas savoir. Tous les articles qui vous expliqueront que Mastodon ne peut pas fonctionner parce que <em>“intégrer un argument d’autorité sur le fait que ce n’est pas assez gros”</em> ne sont pas mieux au courant que les utilisateurices et administrateurices depuis des années. Et je n’ai pour l’instant vu aucun argument pertinent qui aurait tendance à montrer que le réseau et ses modérateurices ne peut pas supporter une taille critique.</p>
  109. <p>Note : Rajouter une partie “Mastodon n’est pas safe par nature, évidemment” ?</p>
  110. <h2 id="comme-dhab-le-secret--il-faut-prendre-soin">Comme d’hab, le secret : il faut prendre soin</h2>
  111. <p>Cette conclusion ne va étonner personne : La solution pour une bonne modération, c’est de prendre soin.</p>
  112. <p>Prendre soin des utilisateurices en n’encourageant pas les discours haineux (techniquement et socialement), en ne les propageant pas (techniquement et socialement).</p>
  113. <p>Prendre soin des structures qui proposent des petits bouts de réseaux en leur évitant d’avoir trop de pouvoir et donc trop de responsabilités sur les épaules (et trop de coûts).</p>
  114. <p>Prendre soin des modérateurices en les soutenant via un collectif aimant et disponible pour leur faire des chocolats chauds et des câlins.</p>
  115. <p>Cher·e modérateurice qui me lis, tu fais un boulot pas facile, et grâce à toi le réseau est plus beau chaque jour. Merci pour ton travail, j’espère que tu as un collectif qui te soutiens, et que se soit le cas ou non, pense à avoir sous la main le numéro d’un·e psychologue, au cas où un jour tu tombes sur quelque chose de vraiment difficile pour toi/vous.</p>
  116. <p>Coeur sur vous &lt;3</p>
  117. <h2 id="et-pour-finir-">Et pour finir ?</h2>
  118. <p>Je n’ai pas pu m’empêcher de conclure avec un billet dédié au contraste entre mon expérience de la modération et ce qui se passe sur Twitter. Voici donc un billet spécialement dédié à l’oiseau bleu : <a href="https://www.maiwann.net/blog/laventuredelamoderation5/">Et Twitter alors ?</a></p>
  119. </article>
  120. <hr>
  121. <footer>
  122. <p>
  123. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  125. </svg> Accueil</a> •
  126. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  128. </svg> Suivre</a> •
  129. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  131. </svg> Pro</a> •
  132. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  133. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  134. </svg> Email</a> •
  135. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  136. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  137. </svg> Légal</abbr>
  138. </p>
  139. <template id="theme-selector">
  140. <form>
  141. <fieldset>
  142. <legend><svg class="icon icon-brightness-contrast">
  143. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  144. </svg> Thème</legend>
  145. <label>
  146. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  147. </label>
  148. <label>
  149. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  150. </label>
  151. <label>
  152. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  153. </label>
  154. </fieldset>
  155. </form>
  156. </template>
  157. </footer>
  158. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  159. <script>
  160. function loadThemeForm(templateName) {
  161. const themeSelectorTemplate = document.querySelector(templateName)
  162. const form = themeSelectorTemplate.content.firstElementChild
  163. themeSelectorTemplate.replaceWith(form)
  164. form.addEventListener('change', (e) => {
  165. const chosenColorScheme = e.target.value
  166. localStorage.setItem('theme', chosenColorScheme)
  167. toggleTheme(chosenColorScheme)
  168. })
  169. const selectedTheme = localStorage.getItem('theme')
  170. if (selectedTheme && selectedTheme !== 'undefined') {
  171. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  172. }
  173. }
  174. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  175. window.addEventListener('load', () => {
  176. let hasDarkRules = false
  177. for (const styleSheet of Array.from(document.styleSheets)) {
  178. let mediaRules = []
  179. for (const cssRule of styleSheet.cssRules) {
  180. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  181. continue
  182. }
  183. // WARNING: Safari does not have/supports `conditionText`.
  184. if (cssRule.conditionText) {
  185. if (cssRule.conditionText !== prefersColorSchemeDark) {
  186. continue
  187. }
  188. } else {
  189. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  190. continue
  191. }
  192. }
  193. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  194. }
  195. // WARNING: do not try to insert a Rule to a styleSheet you are
  196. // currently iterating on, otherwise the browser will be stuck
  197. // in a infinite loop…
  198. for (const mediaRule of mediaRules) {
  199. styleSheet.insertRule(mediaRule.cssText)
  200. hasDarkRules = true
  201. }
  202. }
  203. if (hasDarkRules) {
  204. loadThemeForm('#theme-selector')
  205. }
  206. })
  207. </script>
  208. </body>
  209. </html>