A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 33KB

před 4 roky
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  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>Des technologies pour nous aider à retrouver le sens de la vie ? (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="http://internetactu.blog.lemonde.fr/2015/12/24/des-technologies-pour-nous-aider-a-retrouver-le-sens-de-la-vie/">
  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. Des technologies pour nous aider à retrouver le sens de la vie ? (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="http://internetactu.blog.lemonde.fr/2015/12/24/des-technologies-pour-nous-aider-a-retrouver-le-sens-de-la-vie/">Source originale du contenu</a></h3>
  445. <p>Le designer <a href="http://codingconduct.cc/">Sebastian Deterding</a> (<a href="https://twitter.com/dingstweets">@dingstweets</a>), spécialiste de la gamification, était il y a peu invité par le <a href="https://www.media.mit.edu/special/groups/advancing-wellbeing">groupe de travail Advancing well-being</a> (sur le bien-être "avancé") du Media Lab du MIT (<a href="http://www.media.mit.edu/video/view/wellbeing-2015-11-24-2">vidéo</a>). Il y livrait une très intéressante reformulation d’<a href="http://fr.slideshare.net/dings/designing-the-good-life-ethics-and-user-experience-design?ref=http://codingconduct.cc/">une présentation faite il y a un an</a> sur le bien-être à l’heure des nouvelles technologies, permettant de mettre un peu de perspective sur les enjeux des systèmes socio-techniques qui sont les nôtres - on en profitera pour se souvenir de <a href="http://www.internetactu.net/2012/03/08/lift12-comment-le-jeu-code-t-il-le-monde/">sa remarquable présentation lors de Lift 2012</a>. </p>
  446. <h3>Pourquoi concevons-nous des technologies pour nous accabler ?</h3>
  447. <p>Alors que les technologies étaient censées nous libérer, nous nous sentons de plus en plus accablés, surmenés, rappelle le designer. Nous sommes dépendants à la distraction que produisent les technologies. Nous vérifions en moyenne 150 fois par jour notre smartphone. Nous sommes entrés dans <a href="http://alireailleurs.tumblr.com/post/86679371566/hyperemploi-l%C3%A9puisant-travail-des-utilisateurs">ce que le game designer et théoricien des médias Ian Bogost appelle l’hypertravail</a> : nous passons notre temps à gérer les notifications de nos systèmes techniques, à surfer sur le flux constant des sollicitations qui nous accablent. Nous sommes cernés par nos dépendances et notre seul recours consiste à être <a href="http://alireailleurs.tumblr.com/post/132860969903/les-d%C3%A9connexionnistes-new-inquiry">sommé de nous déconnecter</a>, de battre en retraite, pour mieux les affronter. </p>
  448. <p>Or, souligne Deterding, qui construit ces systèmes socio-techniques dans lesquels nous nous débattons ? Ceux-là mêmes qui en souffrent. <i>“La contradiction éthique fondamentale qui est au coeur de l’industrie numérique est que les gens qui souffrent le plus et s’organisent contre cette accélération numérique sont les mêmes que ceux qui en tirent avantage”</i>. Nous sommes nos propres “voleurs de temps” et sommes les premiers concepteurs de ces expériences utilisateurs. Nous créons les formes addictives, ces interfaces qui renforcent nos dépendances, <a href="http://www.internetactu.net/2015/03/12/du-design-de-la-dependance/">comme l’expliquait Natasha Schüll</a>. </p>
  449. <p><br/>
  450. <i><a href="//fr.slideshare.net/dings/designing-the-good-life-ethics-and-user-experience-design" title="Designing the Good Life: The Ethics of User Experience Design" target="_blank">La présentation de Sebastian Deterding de 2014, "Concevoir pour la bonne vie"</a>.</i> </p>
  451. <p>Les designers créent ce que nous ne souhaitons pas faire. Et ce que les gens souhaitent faire n’a rien à voir avec ce que nous proposent ces objets techniques, comme le soulignait très bien le livre de l’infirmière en soins palliatifs <a href="http://bronnieware.com/">Bronnie Ware</a> sur <a href="http://www.slate.fr/lien/49587/SANTE-cinq-regrets-avant-mourir">les principaux regrets que les gens expriment avant de mourir</a>. Nous produisons des systèmes pour perdre notre temps ou l’optimiser, mais pas des systèmes pour vivre par soi-même plutôt que de vivre comme les autres l’attendent de nous, pour travailler moins dur plutôt que pour optimiser notre productivité, pour avoir le courage d’exprimer nos sentiments, pour rester en contact avec nos amis, pour s’autoriser à être plus heureux... </p>
  452. <h3>Les technologies de l'autonomie nous instrumentalisent plutôt que nous aider à retrouver le "sens de la vie"</h3>
  453. <p>Pour Deterding ces constats devraient nous inviter à concevoir des technologies pour bien se comporter plus que pour le bien-être. Mais là encore, <a href="http://www.internetactu.net/tag/quantifiedself/">les applications de la mesure de soi</a> cherchent toutes à promouvoir des comportements vertueux, responsables, autonomes... Or ces technologies qui nous invitent à bien nous comporter nous incitent exclusivement à être plus maîtres de soi, à être finalement plus motivés, plus productifs dans un jeu de la vie qui est défini par d’autres. Pour Deterding, elles instrumentalisent notre bien-être. Comme l’a déjà souligné Michel Foucault, les technologies de soi ne sont rien d’autre que des technologies de domination et du contrôle social. </p>
  454. <p>Pour échapper à cette instrumentation, il faut nous reposer la question du sens de la vie, explique Deterding en faisant référence à <i>l’Ethique à Nicomaque</i> d’Aristote, qui consiste à rechercher un bonheur profond, <a href="https://fr.wikipedia.org/wiki/Eud%C3%A9monisme">l’eudémonisme</a>, la béatitude, le bien-être ou plutôt la “bonne vie” pour faire référence au <i>buen vivir</i>. Cela nécessite des vertus : développer ses compétences, ses pratiques, sa capacité à agir délibérément, consciemment, pour son propre bien et pour le bien commun... </p>
  455. <p>La technologie en nous invitant à éviter toute friction, à répondre immédiatement à la moindre de nos pulsions, ne nous invite pas à la sagesse. Pour y parvenir, il nous faut concevoir les technologies autrement. Concevoir des technologies qui nous invitent à agir délibérément et pas seulement parce qu'elles nous y incitent, comme peut le faire un système ludifié, explique-t-il en faisant référence à <a href="http://www.popsci.com/technology/article/2012-01/can-treating-your-life-game-make-you-better-person">l’expérience du journaliste Matthew Shear</a> qui pendant une semaine avait gamifié son existence pour être un meilleur compagnon, gagnant des points quand il faisait la vaisselle ou qu’il complimentait sa compagne. <i>“Faire les choses parce que nous y sommes incités ou parce que nous l’entendons est très différent”</i>, souligne avec perspicacité le concepteur de systèmes de jeux. Quand nous agissons sans réfléchir, sans intentions, juste poussés par les incitations et les punitions, par le plaisir ou la douleur, nous ne pouvons nous transcender. L’approbation réflexive consiste à comprendre comment nous échappons à l’instrumentalisation. </p>
  456. <h3>Quand on renforce la discipline, la révolution ne peut qu'arriver ! hum !</h3>
  457. <p>La plupart des technologies du bon comportement n’aident qu’à reproduire les systèmes sociaux qui reproduisent eux-mêmes les problèmes qu’ils tentent de résoudre : l’obésité, la vie sédentaire ou le réchauffement climatique par exemple. <i>"Leur grand récit global est de dire que tout est de la faute de l’individu"</i>. Si seulement nous mangions un peu mieux, si nous conduisions d’une manière plus responsable, tout irait mieux ! Ces technologies nous livrent toutes le même storytelling : quand on renforce la discipline, la révolution ne peut qu’arriver. Ce n’est pas un récit nouveau, souligne Deterding avec malice. C’était celui de la propagande maoïste. Quand le plan est irréprochable, le système est sans faille. <i>“Si le “Grand bond en avant” a échoué et a tué des millions de personnes, ce n’est parce que le plan était défectueux, c’est parce que les individus n’ont pas fait assez d’efforts.”</i> </p>
  458. <p><i>“Le problème est qu’à chaque fois que nous mettons en évidence quelque chose, on en dissimule une autre. Lorsqu’on fait reposer le problème sur les individus (via des applications qui les poussent à bien se comporter), nous détournons l’attention et l’énergie des solutions systémiques.”</i> Ainsi, <a href="http://www.theguardian.com/sustainable-business/small-painless-behaviour-change">pour le psychologue de l’environnement John Thogersen</a>, motiver les petits gestes verts est une berceuse qui nous fait nous sentir bien tout en nous distrayant de l’action politique collective nécessaire pour répondre au réchauffement de la planète. Or, trier nos déchets par exemple ne revient à agir que sur une part infime de la production totale des déchets (aux Etats-Unis, les déchets ménagers ne représentent que 3% des déchets). </p>
  459. <h3>Se soucier de l'intention plus que du comportement, de l'attention plus que de l'habitude</h3>
  460. <p>Pour Deterding, il nous faut redécouvrir les véritables technologies du bien-être. A l’image du jeûne, qui nous exhorte à être plus indépendants des contingences immédiates de notre corps pour mieux apprécier ce que manger lui apporte. A l’image de la retraite, qui nous permet de prendre du recul sur notre manière de vivre au quotidien. A l’image de la méditation, de la prière, de la lecture ou du dialogue spirituel qui nous invitent à réfléchir à notre rôle dans l’existence. A l’image des <a href="https://fr.wikipedia.org/wiki/Vanit%C3%A9">Vanités</a>, ces <i><a href="https://fr.wikipedia.org/wiki/Memento_mori">Memento mori</a></i>, ces images qui nous rappellent notre propre finitude. A l’image du Shabbat, des jours fériés ou de commémoration permettant de mettre le travail et la productivité quotidienne en perspective au profit de la communauté et d’un autre rapport aux autres... Cela ne signifie pas qu’il nous faut revenir au religieux, précise le chercheur, mais que la religion, dans nos cultures, a été l’endroit où les technologies du bien-être ont été développées et affinées au cours des siècles. </p>
  461. <p><a href="http://internetactu.blog.lemonde.fr/files/2015/12/mementomori-1.jpg"><img src="http://internetactu.blog.lemonde.fr/files/2015/12/mementomori-1.jpg" alt="mementomori (1)" class="alignright size-full wp-image-1820"/></a></p>
  462. <p>Ces <i>re-minders</i>, ces technologies du rappel, sont fondamentales. Elles nous ralentissent. Elles créent des ruptures plutôt que du "sans-couture". Elles nous interrompent et créent des frictions. Elles offrent de la rareté et des contraintes plutôt que de l’abondance. Elles se soucient de l’intention plus que du comportement, de l’attention plutôt que de l’habitude. <i>“Au lieu d’améliorer nos moyens d’exécution, elles créent un espace où nous pouvons nous demander pourquoi nous faisons ce que nous faisons ?”</i></p>
  463. <p>Pour Deterding, c’est cela que nous devrions tenter de traduire dans la conception, dans le design : faire un travail de "design positif". Certains designers s'y sont déjà intéressés bien sûr, rappelle-t-il. En 2011, l'artiste <a href="https://hassenzahl.wordpress.com/">Marc Hassenzahl</a> expliquait déjà qu'avec une esthétique de la commodité, on ne peut pas inspirer le changement. Pour cela, il faut une esthétique de la friction, à l'image de <a href="http://www.pleasurabletroublemakers.com/the-chocolate-machine/">la machine à chocolat</a> : un appareil qui délivre chaque heure une petite boule de chocolat sur votre bureau que vous pouvez grignoter ou remettre dans la machine qui comptabilise le nombre de fois où vous avez résisté à la tentation. La machine à chocolat vous engage dans un dialogue avec vous-même, avec ce que vous considérez comme important et qui est censé vous aider à développer votre volonté. Il évoque également <a href="http://seeyourfolks.com/">SeeYourFolks</a> ("voir les siens") un site qui estime selon l'âge de vos parents, leur pays de résidence, leur espérance de vie moyenne et le nombre de fois où vous les voyez chaque année, le nombre de fois que allez les voir avant qu'ils ne meurent. Il évoque encore <a href="http://designinghappiness.wordpress.com">les petites tâches</a> du designer Hans Ruitenberg qui vous invite à formuler et imprimer un objectif et à le fixer à un porte-clef par exemple, pour que vos actions quotidiennes vous le rappellent jusqu'à ce que vous l'ayez réalisé. Comme un mémento pour les choses qui vous sont importantes, permettant d'ouvrir dans le quotidien un petit espace de réflexion et de rappel. Deterding évoque bien d'autres petits outils de ce style, comme <a href="https://freedom.to/">Freedom</a> le logiciel de <a href="http://fredstutzman.com/">Fred Stutzman</a> qui permet de couper sa connexion internet sur des plages de temps prédéfini pour reprendre la maîtrise de ce qui nous distrait. Blokket, la petite pochette imaginée par l'agence de design <a href="http://www.thewayweseetheworld.com/">The Way we see the world</a>, qui permet de bloquer son téléphone pour redonner de l'attention à ce que l'on juge important, par le biais d'un rituel volontaire. Il évoque aussi le Game designer <a href="http://www.erasmatazz.com">Chris Crawford</a> qui s'est lui équipé de billes de verres et de pots. Chaque matin, il prend une perle de verre (chacune représente un jour) et la place dans un récipient (qui en contient 365). Un dispositif qui l'invite non pas à vivre de manière plus efficace, mais à vivre de manière consciente du temps qui passe pour que ses choix soient le plus judicieux possible par rapport au temps qui passe. </p>
  464. <h3>Si le design matérialise la morale, alors comment le rendre plus éthique ?</h3>
  465. <p>Ces exemples sont intéressants, bien sûr. Mais ces formes de déconnexion ou de hack cognitif ne sont peut-être pas des réponses suffisantes ou pérennes. <i>"Les designers ne peuvent pas passer leur temps à concevoir des dispositifs qui nous déconnectent ! Alors comment intégrer l'éthique dans la conception des expériences utilisateurs ?"</i> </p>
  466. <p>Deterding n'a pas de réponse. Nous vivons dans une société plurielle, rappelle-t-il. Les valeurs des uns ne sont pas celles des autres. Pour Deterding, tout comme nous y invite <a href="https://fr.wikipedia.org/wiki/Ma%C3%AFeutique_%28philosophie%29">la maïeutique</a>, il faut d'abord poser les questions ce qui permettra de clarifier pour chacun ce qu'est l'éthique de la conception de l'expérience utilisateur. Et le designer d'en égrainer quelques-unes. <i>"Quelles sont vos intentions de conceptions ?"</i> <a href="https://speedbird.wordpress.com/2007/06/22/on-the-ground-running-lessons-from-experience-design/">Pour Adam Greenfield</a>, le talon d'Achille de l'ère d'internet repose sur la sur-solicitation des traitements dont nous sommes l'objet qui exigent sans arrêt notre attention. La plupart des outils techniques que nous utilisons sont construits pour nous faire perdre notre temps. Deterding évoque ainsi Ultrinsic, un outil qui proposait d'utiliser des incitations monétaires pour inciter les élèves à apprendre. Si l'outil semblait inoffensif, le chercheur rappelle que la recherche montre plutôt que les récompenses ont plus tendance à nous démotiver qu'à nous autonomiser. <i>"Grandir dans un environnement qui ne fonctionne que par punition et récompense nous enlève nos capacités à agir de manière autonome pour n'avoir plus qu'à nous soucier des incitations et des résultats. Au final, cela abaisse notre bien-être psychosocial"</i>. Chaque fois que nous avons recours à des récompenses de ce type, nous cultivons et nourrissons des tendances qui ne sont pas bonnes pour nous... </p>
  467. <p>Pour Deterding, il faut se poser la question à court et à long terme des effets de ce que nous concevons. <i>"Quelle vision les systèmes que vous concevez proposent de la "bonne vie" ?"</i> A l'heure de l'informatique ubiquitaire et de l'internet des objets, le rôle des designers devient omniprésent, or <i>"nous nous concentrons uniquement sur la pointe de l'iceberg, sur les exigences de nos clients plus que sur celles des utilisateurs, sur les désirs et pulsions des utilisateurs plus que sur leurs besoins durables, sur la part la plus riche et éduquée des utilisateurs plutôt que sur tous les autres"</i>... Nous cherchons plus souvent à soulager les symptômes qu'à traiter les causes à leur racine. Comme l'explique le philosophe <a href="http://www.ppverbeek.nl/">Peter-Paul Verbeek</a> dans <a href="http://www.press.uchicago.edu/ucp/books/book/chicago/M/bo11309162.html">son livre sur les technologies moralisatrices</a>, les designers ne font rien d'autre que matérialiser la morale. Toute la question est donc de savoir si la manière dont ils la matérialisent correspond à ce qu'ils souhaitaient vraiment concevoir ? <i>"A quoi souhaitez-vous utiliser votre temps ?"</i> </p>
  468. <p>A défaut d'apporter des réponses, Sebastian Deterding nous livre une belle série de questions, qui viennent illustrer autrement celles que nous posions sur <a href="http://www.internetactu.net/2015/09/17/bodyware-pour-une-augmentation-ordinaire/">la valeur des systèmes socio-techniques qui sont les nôtres</a>. </p>
  469. <p>Hubert Guillaud</p>
  470. </article>
  471. </section>
  472. <nav id="jumpto">
  473. <p>
  474. <a href="/david/blog/">Accueil du blog</a> |
  475. <a href="http://internetactu.blog.lemonde.fr/2015/12/24/des-technologies-pour-nous-aider-a-retrouver-le-sens-de-la-vie/">Source originale</a> |
  476. <a href="/david/stream/2019/">Accueil du flux</a>
  477. </p>
  478. </nav>
  479. <footer>
  480. <div>
  481. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  482. <p>
  483. Bonjour/Hi!
  484. 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>
  485. 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>).
  486. </p>
  487. <p>
  488. 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>.
  489. </p>
  490. <p>
  491. Voici quelques articles choisis :
  492. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  493. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  494. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  495. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  496. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  497. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  498. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  499. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  500. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  501. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  502. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  503. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  504. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  505. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  506. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  507. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  508. </p>
  509. <p>
  510. 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>.
  511. </p>
  512. <p>
  513. Je ne traque pas ta navigation mais mon
  514. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  515. conserve des logs d’accès.
  516. </p>
  517. </div>
  518. </footer>
  519. <script type="text/javascript">
  520. ;(_ => {
  521. const jumper = document.getElementById('jumper')
  522. jumper.addEventListener('click', e => {
  523. e.preventDefault()
  524. const anchor = e.target.getAttribute('href')
  525. const targetEl = document.getElementById(anchor.substring(1))
  526. targetEl.scrollIntoView({behavior: 'smooth'})
  527. })
  528. })()
  529. </script>