A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>La fin du like ? (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://www.affordance.info/mon_weblog/2019/11/la-fin-du-like-.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. La fin du like ? (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://www.affordance.info/mon_weblog/2019/11/la-fin-du-like-.html">Source originale du contenu</a></h3>
  445. <p>C'est donc fait. Instagram (propriété de Facebook) a annoncé officiellement que <a href="https://twitter.com/instagram/status/1195009164470181888" rel="noopener" target="_blank">le nombre de "Likes" allait désormais être masqué</a> et ne serait visible que pour les propriétaires du compte. Les visiteurs, les suiveurs, les likers, eux, ne verront plus combien d'autres semblables à eux-mêmes auront "aimé" tel ou tel contenu. </p>
  446. <p>Cette annonce s'inscrit dans le cadre d'un mouvement que l'on voit de dessiner depuis maintenant quelques années et qui, pour les cadres de la Silicon Valley et les spin-doctors des GAFAM, vise à afficher une forme de résilience sur la question des phénomènes d'exposition de soi et autres (re)conquêtes d'un temps de connexion qui serait plus vertueux que vicieux, anxiogène et potentiellement addictogène. </p>
  447. <p>Facebook a lui aussi annoncé réfléchir, pour son propre réseau social, à masquer le nombre de Likes. Twitter a de son côté et dans sa nouvelle interface, déjà masqué le nombre d'abonnés à un compte pour le propriétaire du compte (qui doit désormais cliquer sur son profil pour voir son nombre d'abonnés) et son patron <a href="https://techcrunch.com/2019/04/16/jack-dorsey-ted/" rel="noopener" target="_blank">Jack Dorsey répète à qui veut l'entendre</a> que s'il devait tout refaire il referait tout pareil <em>sauf</em> la mise en avant du nombre d'abonnés et du nombre de "j'aime" (se déclinant en "fav" et "RT"). </p>
  448. <h2>De l'éco-anxiété à l'ego-anxiété.</h2>
  449. <p>Semblable à l'éco-anxiété (ou "<a href="https://fr.wikipedia.org/wiki/Solastalgie" rel="noopener" target="_blank">solastalgie</a>") palpable de nos sociétés, et surfant sur la vague de la "crainte des écrans" (scientifiquement inepte sauf en ce qui concerne des usages spécifiquement pathologiques qui désignent le symptôme et non la maladie), le discours médiatique ambiant majoritaire concernant les grandes plateformes renvoie une ego-anxiété tout aussi problématique dans sa manière de mal poser les questions pour n'y apporter que les réponses confortant les plateformes dans leur routine mercantile et les internautes dans leur culpabilité artificiellement entretenue. </p>
  450. <p>L'idée est en gros de combattre, notamment chez les publics enfantins et adolescents, les effets de normalisation induits par l'intégration d'une forme d'injonction sociale à ne partager que ce que l'on anticipe comme étant susceptible de l'être en grand nombre, et de ne se définir, par effet miroir, qu'à l'aune du désir d'appartenance et de ressemblance à ce que l'on partage. Comme rappelé dans <a href="https://www.bfmtv.com/tech/instagram-teste-la-disparition-des-likes-dans-le-monde-entier-1806539.html" rel="noopener" target="_blank">l'article d'Elsa Trujillo</a> :  </p>
  451. <blockquote>
  452. <p>"Une étude conduite en 2018 aux Etats-Unis par le <a href="http://www.pewresearch.org/internet/2018/05/31/teens-social-media-technology-2018/">Pew Research Center</a> a montré que, sur les 72% des adolescents du pays à utiliser Instagram, près de 40% se sentaient obligés de ne partager que les contenus à même de susciter beaucoup de likes ou de commentaires."</p>
  453. </blockquote>
  454. <p><a href="https://www.pewresearch.org/internet/2018/05/31/teens-social-media-technology-2018/" rel="noopener" target="_blank">L'étude complète du Pew Internet</a> révèle par ailleurs que les usages "positifs" restent majoritaires pour ces publics adolescents, et que les aspects négatifs relevant de ce pourquoi on nous annonce masquer le nombre de Like sont largement minoritaires (ce qui, bien sûr, ne veut pas dire qu'il ne faut pas les traiter). </p>
  455. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4c75ef4200d-pi"><img alt="PI_2018.05.31_TeensTech_0-03" class="asset asset-image at-xid-6a00d8341c622e53ef0240a4c75ef4200d img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a4c75ef4200d-500wi" title="PI_2018.05.31_TeensTech_0-03"/></a></p>
  456. <p>Le "masquage" des Like est, en tout cas dans les discours des plateformes, d'abord proposé pour limiter les 3 effets négatifs qui sont la "déréalisation de la vie des autres", la pression de ses pairs (biais de conformité sociale), et, marginalement du point de vue du ressenti des adolescents, la question des atteintes pathologiques en termes de santé mentale. </p>
  457. <h2>Petit retour en arrière. </h2>
  458. <p>Nous sommes donc en Novembre 2019 et plusieurs plateformes expérimentent (rappelons qu'il ne s'agit pour l'instant que d'une expérimentation) la possibilité non pas de supprimer les marqueurs sociaux de la viralité mais de les masquer en partie, et ce pour les seules logiques de consultation (les auteurs des contenus pourront toujours voir combien de Likes ils reçoivent). </p>
  459. <p><strong>Il y eut, dans l'histoire "moderne" de l'internet et du web, deux changements paradigmatiques majeurs</strong>, et les deux furent initiés par la grande plateforme bleue. D'abord la nature même de Facebook fut d'indexer des profils comme celle de Google et des moteurs de recherche était d'indexer des documents. Et <a href="https://archivesic.ccsd.cnrs.fr/sic_00377457v2" rel="noopener" target="_blank">avec Facebook l'être humain devint un document comme les autres</a>. S'ensuivirent deux révolutions absolues dans les usages.</p>
  460. <p><strong>La première fut celle de l'arrivée du Newsfeed</strong> et, <a href="http://an-2000.blogs.liberation.fr/2016/09/08/le-news-feed-facebook-10-ans/" rel="noopener" target="_blank">pour reprendre la formule et l'analyse de Vincent Glad, "celle de l'internet moderne"</a>. C'était en 2006. </p>
  461. <blockquote>
  462. <p>"Le <em>news feed</em> marque le passage de l’Internet de la visite à celui de la notification. On ne "<em>visite"</em> plus la page de ses amis, elle s’impose à nous, son contenu nous est notifié. Le web passe alors du modèle de la bibliothèque universelle — celui de Google et Wikipedia — à un nouveau modèle, celui du flux, qui va la faire se rapprocher de plus en plus de la télévision. Le web devient un média aussi actif que passif." <a href="http://an-2000.blogs.liberation.fr/2016/09/08/le-news-feed-facebook-10-ans/" rel="noopener" target="_blank">Vincent Glad</a>.</p>
  463. </blockquote>
  464. <p><strong>Et l'autre grande révolution des usages fut celle de l'arrivée du bouton Like</strong>. Avec là aussi la remarquable <a href="http://an-2000.blogs.liberation.fr/2016/02/25/une-breve-histoire-du/" rel="noopener" target="_blank">synthèse de Vincent Glad sur le sujet</a> d'où il ressort que Zuckerberg avait initialement refusé cette fonctionnalité craignant qu'elle ne concurrence le bouton "share" et qu'elle ne fasse baisser le nombre de commentaires et d'interactions, avant de finalement se laisser convaincre que conjuguée au News Feed elle allait tout au contraire permettre l'inverse.</p>
  465. <p>A l'occasion du lancement du bouton Like et surtout à l'occasion, en 2010, de sa stratégie de dissémination virale permettant à n'importe quel site de l'incorporer au coeur même de ses contenus, j'avais annoncé que "le Like allait tuer le lien" (<a href="https://affordance.typepad.com/mon_weblog/2010/05/le-like-tuera-le-lien.html" rel="noopener" target="_blank">version longue</a> et <a href="https://affordance.typepad.com/mon_weblog/2010/06/facebook-le-web-social-comme-nouvelle-arme-de-distraction-massive.html" rel="noopener" target="_blank">version courte republiée dans Libé</a>). Que le bouton poussoir émotionnel et pulsionnel à coût cognitif nul allait annihiler le lien hypertexte et, ce faisant, nous installer dans des <a href="https://www.lemonde.fr/idees/article/2010/11/30/choisir-le-web-que-nous-voulons-l-exploration-ou-la-prison_1446539_3232.html" rel="noopener" target="_blank">logiques de navigation davantage carcérales</a> que réellement émancipatrices.  </p>
  466. <p>Je vous laisse juge du résultat 10 ans plus tard, mais accordons-nous sur le fait qu'à l'exception d'usages de niche - ou de quelques bloggueurs dinosaures - et en dehors de la sphère commerciale, la capacité de créer des (hyper)liens pour signaler et partager des contenus se limite aujourd'hui à la capacité de "rediffuser" (share, RT) ou d'acquiescer cognitivement (Like, Fav) à ces contenus <strong>à l'intérieur de la plateforme où nous en avons initialement pris connaissance</strong>. L'internet moderne, celui <a href="https://affordance.typepad.com/mon_weblog/2014/07/notification-internet-in-medias-res.html" rel="noopener" target="_blank">de la notification permanente</a> et <a href="https://affordance.typepad.com/mon_weblog/2011/02/les-5-moments-ecriture-web-reseau.html" rel="noopener" target="_blank">de la sous-cription</a>, cet internet est aussi celui de l'assignation à résidence et en cela il rompt avec les <a href="https://www.persee.fr/doc/reso_0751-7971_1991_num_9_46_1831" rel="noopener" target="_blank">principes fondateurs du web et de l'hypertexte</a>. Pour le dire autrement, nous avons troqué des externalités (parfois) fécondes mais (toujours) cognitivement coûteuses contre des internalités réflexes, pulsionnelles et paresseuses. Si l'on ajoute la disparition toujours plus marquée des systèmes d'adressage (URL) eux-même rendus en apparence caduques par le recul des liens dans les usages de partage, la situation est, toutes choses égales par ailleurs, tout à fait alarmante. </p>
  467. <p>Dix ans plus tôt, et en réaction à ma tribune, <a href="https://www.liberation.fr/ecrans/2010/06/03/pourquoi-nous-n-aimons-pas-les-j-aime_953543#ob-player" rel="noopener" target="_blank">l'équipe de Libération (en tout cas celle d'Ecrans) entrait en résistance</a> et décidait de ne pas installer ce mouchard sur leur site. Résistance difficile à tenir sur la durée, et qui ne tînt d'ailleurs pas. </p>
  468. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef0240a49e4e97200c-pi"><img alt="Capture d’écran 2019-11-18 à 18.23.10" class="asset asset-image at-xid-6a00d8341c622e53ef0240a49e4e97200c img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef0240a49e4e97200c-500wi" title="Capture d’écran 2019-11-18 à 18.23.10"/></a></p>
  469. <p>En quelques années, le bouton Like est devenu le nouveau centre de gravité de l'écosystème du partage et de la circulation de contenus. Il a totalement phagocyté l'ensemble des interactions dites "sociales" pour faire de Facebook la place de marché attentionnelle qui occupe aujourd'hui la situation dominante qu'on lui connaît. </p>
  470. <p>Toujours pour bien comprendre l'enjeu de l'annonce actuelle du masquage du nombre de likes, il faut se représenter ce qu'était le web en 2009.</p>
  471. <h2>Il y a 10 ans.</h2>
  472. <p>Il y a 10 ans Twitter, créé en 2006, n'était encore qu'un site relativement confidentiel et n'avait pas atteint le statut de relai médiatique incontournable qu'il est aujourd'hui. C'est justement en 2009 que les usages du réseau vont exploser <a href="https://www.lemonde.fr/pixels/article/2019/01/15/il-y-a-un-avion-dans-l-hudson-il-y-a-dix-ans-un-tweet-revolutionnait-la-transmission-de-l-information_5409381_4408996.html" rel="noopener" target="_blank">lorsqu'un Twittos de l'époque capte "en live" l'atterrissage en catastrophe d'un avion dans l'Hudson</a> et publie la photo qui sera reprise par la presse mondiale.</p>
  473. <p>Il y a 10 ans <a href="https://blog.nordnet.com/loeil-sur-le-web/focus/bilan-2009-5-phenomenes-internet.html" rel="noopener" target="_blank">la "catch-up TV" étonnait encore</a>. On restait bouche-bée devant la possibilité de visionner des contenus après leur horaire habituel de diffusion. On découvrait aussi le streaming comme phénomène de diffusion mainstream venant concurrencer les audiences et les ventes physiques.</p>
  474. <p>Il y a 10 ans, Delicio.us et Flickr étaient encore hyper tendances et <a href="https://fr.statista.com/statistiques/565258/facebook-nombre-d-utilisateurs-actifs-mensuels-dans-le-monde/" rel="noopener" target="_blank">Facebook n'avait "que" 360 millions d'utilisateurs</a>.</p>
  475. <p>En 2009, <a href="https://web.archive.org/web/20090701092719/http://blogsearch.google.com/?hl=en&amp;tab=wb" rel="noopener" target="_blank">Google disposait d'un onglet permettant de chercher uniquement dans les ... blogs</a> !!! D'ailleurs en 2009 il y avait encore <a href="https://www.challenges.fr/magazine/nos-stars-de-la-blogosphere-2009_340890" rel="noopener" target="_blank">des classements des Bloggueurs influents</a>. En 2009 enfin, "<a href="https://www.frenchweb.fr/annee-internet-2009-vue-par-mediametrie-propulsion-dans-lere-du-temps-reel/2425" rel="noopener" target="_blank">le réflexe de la quotidienneté de la connexion à internet se répand</a>" (genre il existait donc en 2009 des gens qui ne se connectaient pas tous les jours à Internet OMFG).</p>
  476. <p>Bref 2009 c'était vraiment la préhistoire. Et c'est donc le <a href="http://an-2000.blogs.liberation.fr/2016/02/25/une-breve-histoire-du/" rel="noopener" target="_blank">9 Février 2009 que Facebook lance officiellement les Like</a>. </p>
  477. <h2>Et 10 ans plus tard ... annonce vouloir en partie les masquer sur Instagram.</h2>
  478. <p>Alors je ne crois pas une seule seconde que le fait de masquer en consultation le nombre de likes permettre de résoudre le quart du commencement de l'un des problèmes que l'on prétend ainsi traiter. Je ne crois pas de toute façon que l'on puisse résoudre un problème en cachant ce problème. </p>
  479. <p>Je crois que cette annonce est purement cosmétique, conjoncturelle et que c'est d'une réforme structurelle dont les architectures techniques toxiques des grandes plateformes ont besoin. Je crois qu'il faut, par exemple, structurellement limiter, contraindre, et ajouter de la friction dans les interactions techniques. Le masquage des Like, cette logique d'obfuscation ne fait qu'entretenir une opacité sur des métriques qui restent parfaitement opératoires et transparentes pour les plateformes elles-mêmes, lesquelles demeurent donc parfaitement libres de continuer à organiser la circulation et l'affichage des contenus en fonction du nombre de Like, et le problème de l'identification et des logiques de conformité sociale se trouvent donc parfaitement inchangées et même d'une certaine manière confortées. </p>
  480. <p>On m'objectera que si on ajoute de la friction on limitera les possibilités de partage à coût cognitif nul. C'est exact. C'est d'ailleurs le principal enjeu. Et c'est pour cela que <a href="https://affordance.typepad.com/mon_weblog/2011/12/le-mot-friction.html" rel="noopener" target="_blank">toutes les plateformes ont horreur de la friction</a>.</p>
  481. <p>Je crois aussi (et je le répète depuis ... longtemps) que pour rétablir l'équilibre dans la force <a href="https://www.affordance.info/mon_weblog/2015/04/symptome-acces-mal-internet.html" rel="noopener" target="_blank">il faut créer un index indépendant du web</a>. Et que l'un ne va pas sans l'autre. </p>
  482. <p>La domination actuelle des plateformes et les questions qu'elles posent (sur des sujets qui vont du droit de la concurrence jusqu'à des enjeux politiques majeurs en passant par toute une gamme de sujets de société) sont un problème à trois <span>corps</span> étages :</p>
  483. <p>Pour résumer - et sur le dernier des 3 points précédents - je crois que le problème n'est pas la viralité mais l'architecture technique de la viralité et le déterminisme algorithmique qui la sous-tend. </p>
  484. <h2>Friction. (ad)Diction. Miction.</h2>
  485. <p>Je crois qu'il n'y a pas de problème <em>d'addiction</em> au Like mais que nous avons un problème de <em>diction </em>qui naît de l'absence de <em>frictions</em>. Qu'il nous faut parvenir à "dire", à rendre explicite et public ce qui nous émeut, ce qui nous révolte, ce qui nous attendrit, ce qui nous blesse, ce qui nous choque, ce qui nous intéresse, ce qui nous informe, et plus que tout ce qui nous lie. Et que cette "<em>diction</em>" est une <em>friction</em> ; que le prix à payer pour cette <em>diction</em> est celui d'une <em>friction</em> ; que cette <em>diction</em> a un coût et ce que coût n'est ni nul ni entièrement substituable ou déléguable à des entreprises qui ne pissent de l'interaction qu'à la condition que nous pissions de la donnée ; des entreprises de <em>miction</em>.
  486. </article>
  487. </section>
  488. <nav id="jumpto">
  489. <p>
  490. <a href="/david/blog/">Accueil du blog</a> |
  491. <a href="https://www.affordance.info/mon_weblog/2019/11/la-fin-du-like-.html">Source originale</a> |
  492. <a href="/david/stream/2019/">Accueil du flux</a>
  493. </p>
  494. </nav>
  495. <footer>
  496. <div>
  497. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  498. <p>
  499. Bonjour/Hi!
  500. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  501. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  502. </p>
  503. <p>
  504. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  505. </p>
  506. <p>
  507. Voici quelques articles choisis :
  508. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  509. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  510. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  511. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  512. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  513. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  514. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  515. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  516. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  517. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  518. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  519. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  520. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  521. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  522. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  523. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  524. </p>
  525. <p>
  526. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  527. </p>
  528. <p>
  529. Je ne traque pas ta navigation mais mon
  530. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  531. conserve des logs d’accès.
  532. </p>
  533. </div>
  534. </footer>
  535. <script type="text/javascript">
  536. ;(_ => {
  537. const jumper = document.getElementById('jumper')
  538. jumper.addEventListener('click', e => {
  539. e.preventDefault()
  540. const anchor = e.target.getAttribute('href')
  541. const targetEl = document.getElementById(anchor.substring(1))
  542. targetEl.scrollIntoView({behavior: 'smooth'})
  543. })
  544. })()
  545. </script>