davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
72 Révisions
1 Branche
Aborescence: ce3bfdcef2
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'ce3bfdcef2'
${ noResults }
larlet-fr-david-cache/cache/0d020640f938182ac3368bcf418.../index.html

index.html 32KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577 
  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>Comment nous passer de la personnalisation ? (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.internetactu.net/2017/09/27/comment-nous-passer-de-la-personnalisation/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Comment nous passer de la personnalisation ? (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.internetactu.net/2017/09/27/comment-nous-passer-de-la-personnalisation/">Source originale du contenu</a></h3>

  463.     <p>La personnalisation est toujours présentée à la fois comme le Graal de la transformation numérique et la raison de l’exploitation toujours plus poussée des données personnelles des utilisateurs. Elle est une promesse qui ne se suffit jamais à elle-même : sa précision, son efficacité, son adaptabilité sont toujours améliorables et perfectibles. Pour s’ajuster parfaitement à chacun d’entre nous, elle nécessite toujours plus de données, pareil à un puits sans fond qui espère toujours trouver dans notre intimité l’information ultime qui nous caractérisera uniquement, exactement et complètement. </p>

  464. 

  465. <h2>Mais où est passée la personnalisation ?</h2>

  466. 

  467. <p>Pourtant, quand on regarde un peu le fonctionnement des services en ligne, force est de constater qu’à mesure qu’elle nous est assénée comme notre avenir le plus certain, la personnalisation ressemble chaque jour un peu plus à une illusion. En fait, ce qu’on tente d’adapter, ce n’est pas notre unicité à un service, mais les caractéristiques d’un service à de grands ensembles d’utilisateurs auxquels les systèmes tentent de nous faire correspondre peu ou prou. La publicité en ligne ne nous cherche plus nous, internaute unique dans l’océan des logs, elle cible les cohortes auxquels nous correspondons : cohortes d’âges, de revenu, de résidences, d’intérêts… Hormis quand nous revenons d’un magasin en ligne, où elle s’affole pour nous montrer les produits qu’on a le plus souvent déjà acheté, la publicité nous montre, au mieux ce qu’ont vus nos cohortes d’amis, ce qu’ont vus des cohortes de gens censés nous ressembler, au pire ce que voit n’importe qui. </p>

  468. 

  469. <p>Après avoir longtemps cherché à découvrir nos singularités, les grandes machineries du web semblent même avoir fait machine arrière sur la question de la personnalisation. <a href="http://www.internetactu.net/a-lire-ailleurs/comment-youtube-sest-transforme/">Le moteur de recommandation de YouTube en fournit une très bonne illustration</a> : les outils de personnalisation comme l’historique où les abonnements à des chaînes ont été peu à peu abandonné au profit d’outils qui produisent du consensus, de l’adhésion, de l’engagement. Le <em>Time Watch</em>, le temps passé des autres utilisateurs, et la fraîcheur des contenus, sont devenus les critères principaux de la recommandation. On vous recommande ce que les autres ont vu, viennent de voir, ce qu’ils sont censés avoir le plus apprécié seulement parce qu’ils y ont passé du temps. On en revient – ou on ne sort pas – au plus lu, au plus vu, au plus recommandé… La personnalisation semble en passe de devenir rien d’autre qu’un prétexte pour adapter les contenus les plus vus à notre réceptivité. Elle ressemble de plus en plus à une optimisation de l’audience qu’à une personnalisation. </p>

  470. 

  471. <p>La personnalisation visait originellement à moduler les services numériques auxquels on accédait selon ses caractéristiques et préférences personnelles. Son objectif était de rendre chaque service unique, adapté aux besoins et goûts de l’utilisateur. Mais est-ce vraiment cela que proposent les services en ligne ? Cherchent-ils à donner à chacun une information unique depuis ce qu’ils savent de nous ? Force est de constater que ce que les systèmes poussent jusqu’à chacun ce n’est pas le spécifique, mais bien ce qui est le plus commun. Nous ne sommes pas devant une personnalisation, mais bien confrontés à son contraire : une dépersonnalisation. Nous sommes fondus dans les cohortes et catégories auxquelles nous sommes reliés. Plutôt que d’être individualisés, nous sommes généralisés… ce qui participe largement à la polarisation et aux discriminations dont se font l’écho chaque jour les informations sur nos rapports aux services numériques et réseaux sociaux du web.  </p>

  472. 

  473. <p>Dans ce contexte, la personnalisation ressemble de plus en plus à une cosmétique gentille et indolore. Facebook souhaite son anniversaire à chacun. Mais il nous propose pour cela le même outil qu’il propose à tous les autres. La personnalisation est devenue une façade, pareille à un appartement-témoin dont on nous dirait qu’il a été décoré spécialement pour nous, alors qu’il a seulement été conçu pour convenir au plus grand nombre de personnes possible. </p>

  474. 

  475. <h2>Gérer la masse est plus simple que gérer chacun</h2>

  476. 

  477. <p>La catégorisation est finalement bien plus simple que la personnalisation. Gérer des catégories, des familles, des groupes, de larges pans d’utilisateurs est bien plus commode. Cela permet de créer quelques profils types… et depuis eux, quelques routines qui suffises pour gérer des millions d’utilisateurs. <a href="http://www.internetactu.net/2013/05/29/theorie-du-drone-de-la-fabrique-des-automates-politiques/">L’identification des schémas</a> ne consiste pas à identifier chacun, mais seulement des caractéristiques qui se prêteront à l’exploitation. Or, l’enjeu de la catégorisation est bien de rendre les profils productifs, ce que ne permet pas en fait l’individualisation. </p>

  478. 

  479. <p><img src="http://www.internetactu.net/wp-content/uploads/2017/09/personnalisation-marketing-800x600.png" alt="" class="aligncenter size-full wp-image-29942" srcset="http://www.internetactu.net/wp-content/uploads/2017/09/personnalisation-marketing-800x600.png 800w, http://www.internetactu.net/wp-content/uploads/2017/09/personnalisation-marketing-800x600-300x225.png 300w, http://www.internetactu.net/wp-content/uploads/2017/09/personnalisation-marketing-800x600-768x576.png 768w" sizes="(max-width: 800px) 100vw, 800px"/></p>

  480. 

  481. <p>Les algorithmes ne cherchent pas à nous distinguer, mais à nous catégoriser. Et ceux qui se servent des catégories ne cherchent pas à nous atteindre – à atteindre chacun d’entre nous spécifiquement – mais à toucher des catégories de personnes, des profils types auxquels nous correspondons. L’enjeu est bien de nous discréditer, c’est-à-dire de nous faire entrer dans quelques cases d’une catégorisation assez élastique. Nous ne lirons pas demain des articles de presse avec un titre différent par utilisateur. L’A/B testing, l’outil principal de l’amélioration des services, ne teste qu’une maigre poignée d’option, 2 le plus souvent, 4 ou 5 au mieux. Et au final, il finit par servir la même à tout le monde : celle qui a le mieux marché ! Le test psychologique <a href="http://www.internetactu.net/2013/12/05/en-quoi-les-big-data-sont-elles-personnelles/">des Big Five</a> distingue une poignée de profils différents et permet d’établir quelques variations pour mieux cibler une offre marketing. Mais là encore, l’enjeu n’est pas tant de distinguer chacun que de faire entrer chacun d’entre nous dans la catégorie la mieux adaptée à son profil. La personnalisation n’a rien de personnel : elle vise juste à vous faire entrer dans une case comme si c’était dans un moule. Les bulles de filtres d’Eli Pariser ne sont pas tant des bulles personnalisantes que des bulles catégorisantes. </p>

  482. 

  483. <p>En fait, force est de constater que servir le plus vu, le plus partagé, le plus écouté… fonctionne bien mieux qu’un matching qui serait taillé sur mesure pour chacun. Certes, en étant au croisement de multiples catégories publicitaires, chacun est unique. Mais cette unicité, tout le monde s’en fout. Ceux qui cherchent à nous atteindre ne regardent au mieux que les catégories, les communautés, les groupes auxquels on appartient… Si nous n’entrons dans aucune, au pire, ils feront ce qu’ils ont toujours fait : ils déverseront ce qui marche le mieux, ce qui marche pour le plus grand nombre. </p>

  484. 

  485. <p>Sous les strass et paillettes du « digital », nous restons des produits de masse. Les systèmes suivent des modèles établis. Si les relations qui nous informent sont différentes pour chacun, les modèles sont communs. Facebook se sert de notre profilage comme d’une pilule pour mieux nous montrer finalement le plus commun : il ne cesse de nous mettre en avant les liens les plus chauds que nos relations ont partagés et des millions d’autres partagent au même moment, les vidéos les plus vues, les statuts qui ont recueilli le plus de commentaires. Nous avons beau nous ingénier méthodiquement à faire disparaître ces contenus dont on ne veut pas et ces flux continus de vidéos, ils reviennent aussitôt qu’on les signale, qu’on les masque, qu’on demande à ne plus les suivre… via une autre de nos relations, prétexte à nous servir toujours ce qui s’agite et agite le plus. La seule concession à la personnalisation semble n’être plus que la surprésence qu’une poignée de proche (une 30aine d’amis sur les milliers que nous avons), mais qui semble surtout là pour s’assurer de notre assiduité. Pour l’essentiel, nous sommes toujours ramenés aux troupeaux auxquels nous appartenons, à l’audience et à son volume. Notre personne n’intéresse personne.  </p>

  486. 

  487. <p>En fait, <a href="http://www.internetactu.net/2017/05/31/notre-identite-calculee-est-elle-notre-identite/">tout cela calcule une identité fluide, contingente</a>, qui n’est pas tant notre identité que la somme des caractéristiques que nous partageons avec d’autres. </p>

  488. 

  489. <h2>Si la personnalisation est un leurre, alors la collecte de nos données est inutile</h2>

  490. 

  491. <p>Si la personnalisation est un leurre, une chimère, un objectif inatteignable… et que les grandes entreprises du web ont finalement renoncé à atteindre, alors se pose la question de nos données personnelles… Si la personnalisation n’est plus de mise, alors la collecte – complète, totale, incessante – de nos données ne sert à rien. </p>

  492. 

  493. <p>L’inutilité d’une collecte de données exhaustives est depuis longtemps documentée. <a href="http://www.internetactu.net/2013/12/05/en-quoi-les-big-data-sont-elles-personnelles/">Les services de musique en ligne par exemple</a> n’ont pas besoin d’accéder à toutes les chansons que nous écoutons pour faire des recommandations pertinentes. Au pire, quelques testeurs qui livreraient leurs données détaillées seraient largement suffisants pour mettre à jour les moteurs de recommandation et leur permettre de s’entraîner sur de nouvelles données… pour produire les recommandations alimentant les autres utilisateurs. Au mieux, une fois les données entraînées, elles pourraient continuer sans avoir besoin d’enregistrer le jour et l’heure de chacune de vos écoutes. </p>

  494. 

  495. <p>Si les données personnelles s’avèrent ne plus être le pétrole des grandes machineries du web, alors la collecte sans fin de la moindre de nos données n’a plus d’intérêt. Cela signifie que si l’on reconnaissait que la personnalisation est un échec et qu’elle ne mène nulle part, nous pourrions enfin nous attaquer à réduire l’hypersurveillance organisée. </p>

  496. 

  497. <p>Pour autant, personne ne semble être prêt à céder. Même si elle est un leurre pour entretenir notre consentement à l’utilisation de nos données, nulle ne souhaite reconnaitre que la personnalisation est un mythe, de plus en plus délaissé par ceux-là mêmes qui la portaient aux nues. Tous les business models de demain continuent à reposer sur l’analyse de toujours plus de données. Même si dans la réalité, les services commencent à se rendre compte que cette perspective hypercroissantiste ne mène nulle part… En attendant, l’or noir coule à flots et nul ne souhaite en tarir le flux. <a href="https://fredcavazza.net/2017/09/25/la-gdpr-signe-t-elle-la-fin-de-lage-dor-de-la-publicite-en-ligne/">Si on espère que le Règlement Général sur la Protection des Données (RGPD) participera à un certain coup d’arrêt</a>, il ne fera pas pour autant réfléchir ceux qui exploitent nos données de la vacuité de cette exploitation. Il ne permettra pas de prendre conscience que plus qu’un or noir qu’il nous faut exploiter sans entrave, les données personnelles sont des déchets toxiques que nous devrions gérer avec précaution et retenue. </p>

  498. 

  499. <h2>Comment nous défaire du mythe de la personnalisation ?</h2>

  500. 

  501. <p>Le problème demeure que nous avons intégré la personnalisation comme l’une des plus grandes promesses des outils numériques. Bien sûr : on nous promet que les systèmes d’Intelligence artificielle, eux, réussiront là où les algorithmes ont échoué. On nous promet <em>Her</em>, le compagnon parfait, Jarvis, le majordome obéissant et toujours prévenant, <a href="http://www.internetactu.net/a-lire-ailleurs/watson-une-revolution-pour-lutter-contre-le-cancer-nous-en-sommes-loin/">Watson, le médecin sans faille</a>… Mais c’est la promesse qu’on fait à tous et l’aboutissement que nous semblons tous vouloir. Les systèmes d’IA ont les mêmes défauts. Ils n’apprennent pas de tant de chacun que de tous. Ils maximalisent non pas l’apprentissage individuel, mais d’une agrégation de millions d’apprentissages. Et c’est bien d’ailleurs les IA de YouTube qui lui ont montré que la personnalisation n’était pas le critère à optimiser pour développer le temps passé à regarder des vidéos. L’exploitation de nos biais psychosociaux, <a href="https://fr.slideshare.net/HubertGuillaud/attention-lattention">comme la réciprocité sociale ou l’approbation sociale</a>, fonctionnent bien mieux. </p>

  502. 

  503. <p>Pour autant, la personnalisation est un argument marketing très fort qui nous promet que le service va nous satisfaire puisqu’il est fait pour nous. Qu’importe si en réalité, on se retrouve avec des appartements à louer qui se ressemblent tous. Les systèmes d’apprentissages automatisés ne se passeront pas demain de nos données personnelles. Non pas tant qu’ils les utilisent effectivement, mais parce que leurs apprentissages ne sont jamais terminés. </p>

  504. 

  505. <p>Le problème est, <a href="http://www.internetactu.net/2017/05/31/notre-identite-calculee-est-elle-notre-identite/">comme le soulignait Rob Horning</a>, que <em>« la collecte de données est utilisée pour créer des marqueurs d’identité à propos de nous que nous ne voyons pas et que nous ne contrôlons pas, que nous ne pouvons pas évaluer, ni accéder, ni modifier directement »</em>. Nous sommes à chaque instant discriminés, calculés, intégrés dans des catégories… sans être capable de voir les catégories produites par-devers nous, ni ceux qui sont catégorisés avec et en même temps que nous, ni bien sûr comment elles sont utilisées par-devers nous. Pourrions-nous imaginer alors remettre un peu de symétrie entre calculés et calculateurs ? Non pas seulement en nous montrant quelles catégories nous caractérisent, mais leur exploitation même ? </p>

  506. 

  507. <p>L’opacité des traitements, les catégorisations dont nous sommes les sujets, crééent une <a href="https://fr.wikipedia.org/wiki/Apoph%C3%A9nie">apophénie</a> qui nous fait croire que le monde tourne autour de nous quand nous n’en sommes que le produit. <em>« Quand on impose des modèles ou des relations sur des choses non reliées, on l’appelle apophénie. Quand on créé ces connexions en ligne, on l’appelle internet »</em>, ironisait avec mordant Molly Sauter <a href="http://reallifemag.com/the-apophenic-machine/">pour <em>Real Life</em></a>. </p>

  508. 

  509. <p>La personnalisation est finalement une promesse bien plus agréable et satisfaisante pour l’égo que l’idée que nous sommes les victimes consentantes des rets de systèmes qui exploitent nos biais sociaux. Pourtant, apprendre à faire le deuil nous permettra peut-être enfin de remédier aux problèmes dans lesquels le mythe de la personnalisation nous maintient.</p>

  510. 

  511. <p>Hubert Guillaud</p>

  512. 

  513. <p>Reste que si ces perspectives s’avèrent fondées, ces questionnements en apportent d’autres. Comment désigner cette personnalisation qui n’en est plus une ? Par quoi la remplacer ? Comment nous aider à nous en défaire, c’est-à-dire nous aider à arrêter de croire qu’elle est l’avenir des services ? </p>

  514.   </article>

  515. </section>

  516. 

  517. 

  518. <nav id="jumpto">

  519.   <p>

  520.     <a href="/david/blog/">Accueil du blog</a> |

  521.     <a href="http://www.internetactu.net/2017/09/27/comment-nous-passer-de-la-personnalisation/">Source originale</a> |

  522.     <a href="/david/stream/2019/">Accueil du flux</a>

  523.   </p>

  524. </nav>

  525. 

  526. <footer>

  527.   <div>

  528.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  529.     <p>

  530.       Bonjour/Hi!

  531.       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>

  532.       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>).

  533.     </p>

  534.     <p>

  535.       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>.

  536.     </p>

  537.     

  538.     <p>

  539.       Voici quelques articles choisis :

  540.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  541.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  542.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  543.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  544.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  545.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  546.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  547.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  548.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  549.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  550.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  551.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  552.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  553.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  554.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  555.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  556.     </p>

  557.     <p>

  558.       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>.

  559.     </p>

  560.     <p>

  561.       Je ne traque pas ta navigation mais mon

  562.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  563.       conserve des logs d’accès.

  564.     </p>

  565.   </div>

  566. </footer>

  567. <script type="text/javascript">

  568.   ;(_ => {

  569.     const jumper = document.getElementById('jumper')

  570.     jumper.addEventListener('click', e => {

  571.       e.preventDefault()

  572.       const anchor = e.target.getAttribute('href')

  573.       const targetEl = document.getElementById(anchor.substring(1))

  574.       targetEl.scrollIntoView({behavior: 'smooth'})

  575.     })

  576.   })()

  577. </script>