A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 27KB

5 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  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>Vers des technologies de l’empathie ? (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://www.internetactu.net/2015/05/11/vers-des-technologies-de-lempathie/">
  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. Vers des technologies de l’empathie ? (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://www.internetactu.net/2015/05/11/vers-des-technologies-de-lempathie/">Source originale du contenu</a></h3>
  445. <p>Bientôt, non seulement nos systèmes techniques <a href="http://www.internetactu.net/2014/09/29/apres-la-personnalisation-la-personnification/">seront dotés de personnalités</a>, mais il sauront aussi prendre en compte la personnalité de ceux avec lesquels nous interagissons, rapporte <a href="http://avivahoperutkin.com/">Aviva Rutkin</a> (<a href="https://theraptorlab.wordpress.com/">blog</a>, <a href="https://twitter.com/realavivahr">@realavivahr</a>) pour le <i><a href="http://www.newscientist.com/article/mg22630202.000-no-empathy-fake-it-with-an-app-that-perfects-your-online-self.html?utm_source=NSNS&amp;utm_medium=SOC&amp;utm_campaign=twitter&amp;cmpid=SOC|NSNS|2015-GLOBAL-twitter#.VUsSeJNIlIp">New Scientist</a></i>. Par exemple, en nous aidant à être plus empathiques dans nos manières de communiquer…</p>
  446. <h3>Demain, le “correcteur comportemental”</h3>
  447. <p>C’est ce que propose dès à présent <a href="https://www.crystalknows.com/">Crystal Knows</a> qui présente son application comme <i>“la meilleure amélioration apportée à l’e-mail depuis le correcteur orthographique”</i> et qu’on pourrait qualifier de “correcteur comportemental”. </p>
  448. <p>Crystal Knows suggère des corrections lorsque vous écrivez un e-mail pour traduire votre propos selon la personnalité de votre correspondant. Pour cela, le système s’informe sur les gens avec qui vous communiquez en récupérant de l’information sur eux sur les réseaux sociaux pour en établir un profil, selon le fameux <a href="http://fr.wikipedia.org/wiki/Big_Five_(psychologie)">modèle des cinq facteurs de la personnalité</a> (<a href="http://www.internetactu.net/2013/12/05/en-quoi-les-big-data-sont-elles-personnelles/">voir nos explications</a>) permettant de classer vos correspondants selon 5 grands traits psychologiques, à savoir leur tendance à l’extraversion, au névrosisme, à l’agréabilité, à avoir un caractère consciencieux et à l’ouverture à l’expérience. Une méthode d’analyse utilisée par la plupart des grands outils de profilage reposant sur l’analyse des réseaux sociaux, pour caractériser les types de comportements des utilisateurs.</p>
  449. <p>Disponible pour l’instant seulement pour <a href="https://chrome.google.com/webstore/detail/crystal-for-gmail/nmaonghoefpmlfgaknnboiekjhfpmajh">Gmail pour Chrome</a>, l’application s’ajoute à votre webmail. Lorsque vous rédigez un mail, elle vous propose de vous renseigner sur votre correspondant et établit son profil psychologique par l’analyse des contenus qu’il a posté sur le web social. Puis Crystal Knows vous dresse une liste de recommandations pour mieux rédiger votre message. Outre des conseils généraux, il vous fait des conseils sur le style à employer (écrivez des phrases courtes, utilisez un langage familier ou soutenu, utilisez des formules de politesse ou n’utilisez pas de salutations formelles), mais également des conseils sur comment mieux capter son attention ou comment avoir un échange avec cette personne pour lui vendre quelque chose. Ces recommandations sont pour l’instant assez basiques, mais, en s’adaptant au profil de chaque utilisateur, elles soulignent ce à quoi votre interlocuteur devrait être sensible ou allergique, pour mieux engager la conversation avec lui. </p>
  450. <p><a href="http://www.internetactu.net/wp-content/uploads/2015/05/CrystalHGprofil.png"><img src="http://www.internetactu.net/wp-content/uploads/2015/05/CrystalHGprofil.png" alt="CrystalHGprofil"/></a><br/>
  451. <i>Image : <a href="https://www.crystalknows.com/personality/Hubert-Guillaud">Mon profil psychologique établi par Crystal Knows</a>. Indice de confiance : 40%. Hubert est très orienté relation et sincère. Il préfère un plan établit que d’aller à l’aventure. </i></p>
  452. <p>Quand vous parlez avec Hubert : préférez présenter votre projet avec politesse et respect (plutôt que de manière audacieuse) ; parlez-lui de philosophie ou d’idées abstraites ; ne le mettez pas sur la sellette ; faites attention à ne pas être véhément.</p>
  453. <p>Quand vous envoyez un e-mail à Hubert : signalez vos points communs comme des relations ou des centres d’intérêt ; utilisez une phrase pour exprimer vos remerciements pour son temps ; commencez par vous présenter ; n’écrivez pas d’une façon qui puisse sembler froide ou rapide. </p>
  454. <p>Quand vous travaillez avec Hubert : si vous argumentez, prenez en considération ses sentiments ; apportez une critique objective et bienveillante ; ne soyez pas froissé s’il est un peu en retard ; ne lui offrez pas de critique constructive mal taillée.</p>
  455. <p>Quand vous voulez vendre quelque chose à Hubert : parlez-lui de choses qui n’ont rien à voir avec le travail ; posez-lui des questions sur ses réalisations passées ; ne vous inquiétez pas de lui demander sa permission avant de l’appeler ; ne prévoyez pas d’heure de fin pour vos appels ou réunions.</p>
  456. <p>Il est naturel pour Hubert de : réconforter quelqu’un dans des situations douloureuses ; de percevoir facilement les émotions des autres ; de chercher le consensus du groupe avant d’agir ; de se sentir obligé d’aider les autres. </p>
  457. <p>Il n’est pas naturel pour Hubert de : prendre la parole pour ramener tout le monde au sujet lors d’une réunion ; de se sentir anxieux des décisions prises par d’autres à son propos ; de dire quelque chose crûment qui offenserait accidentellement quelqu’un ; d’être froissé si quelqu’un arrive en retard à un rendez-vous. </p>
  458. <p>Pas sûr que toutes ces recommandations fonctionnent, mais certaines semblent assez adaptées.<br/>
  459. </p>
  460. <p>Le fondateur de Crystal Knows, <a href="https://www.crystalknows.com/personality/Drew-DAgostino">Drew D’Agostino</a> pense que son programme peut aider les gens à renforcer leurs relations. <i>“Tout le monde est anxieux à l’idée d’envoyer un e-mail. Cristal ne vous aide pas à être un robot et à envoyer des e-mails préprogrammés. Il aide les gens à comprendre comment écrire aux autres.”</i> Dans le but de mieux se faire comprendre… </p>
  461. <p>Pour Aviva Rutkin, des programmes de ce style vont nous aider à contenir l’avalanche des e-mails sous lesquels nous croulons, en nous aidons à prendre soin de nos interlocuteurs. <a href="http://tellerapp.com/">Teller</a>, une startup suédoise, travaille à un logiciel de courrier qui traque le comportement de l’utilisateur, observant à quels e-mails il répond et ceux qu’il ignore, pour mieux lui montrer les messages importants. <a href="https://charlieapp.com/">Charlie</a>, une autre startup américaine, utilise, elle, l’intelligence artificielle pour améliorer les réunions en cherchant sur l’internet de l’information sur les personnes avec qui vous avez rendez-vous pour vous envoyer un court résumé sur chacune avant de les rencontrer ! Pour son fondateur, Aaron Frazin, <i>“la technologie rend la communication plus rapide. Ce qui signifie que nous avons besoin de nous adapter et être sûr que la communication est aussi efficace que possible”</i>. </p>
  462. <h3>Mieux comprendre les autres ou mieux les manipuler ?</h3>
  463. <p>Le but de ces applications est-il de mieux se faire comprendre des autres et de mieux comprendre leur fonctionnement psychologique ou de proposer des outils pour mieux les manipuler ? La distinction n’est pas si simple. </p>
  464. <p>L’information que propose Crystal Knows nous permet d’entrevoir le rôle des profils psychologiques automatisés qu’utilisent nombre d’outils de profilage. Votre page de profil révèle ses forces et faiblesses. Outre que l’indice de confiance n’est pas toujours optimal (Crystal Know n’établit pas de profil pour ceux qui n’ont pas d’activité suffisante sur les réseaux sociaux), l’interprétation psychologique est bien sûr loin d’être parfaitement fiable. Plusieurs des recommandations du logiciel sur mon profil par exemple, seront certainement peu opérantes si vous décidez de les appliquer. Pourtant, quand on observe les profils psychologiques de nos proches, une bonne part des recommandations semblent assez justes. Même si c’est le cas d’une sur deux, c’est déjà un résultat que beaucoup jugeront intéressant. </p>
  465. <p>Pour l’instant, Crystal Knows ne s’applique qu’aux correspondances directes. Mais demain des programmes de ce type devraient être capables d’améliorer les e-mailing de masse personnalisés ou les outils des centres d’appels pour qu’ils atteignent toujours mieux les cibles que nous sommes. Face à cette perspective, on comprend rapidement que l’empathie n’est pas le seul objectif de ces outils. Si la prise en compte de nos personnalités peut-être un levier pour améliorer la communication et le lien social, il peut aussi être s’avérer être un meilleur moyen de manipulation des autres. L’amélioration <a href="http://www.internetactu.net/2011/09/15/augmenter-notre-intelligence-emotionnelle/">de la compréhension émotionnelle et psychologique de nos outils</a> par le <i>nudge</i>, ce coup de pouce si prisé par l’économie comportementale, <a href="http://www.internetactu.net/2014/09/08/le-nudge-est-il-lavenir-des-objets-connecte/">ne va pas s’arrêter à nos objets</a>, mais va devenir une caractéristique fondamentale de notre avenir connecté. Et comme tout outil, il porte sa propre ambiguïté. Il va à la fois nous aider à relever <a href="http://alireailleurs.tumblr.com/post/99209501031/pourquoi-ecrivons-nous-si-mal-wall-street">la malédiction de la connaissance</a> que dénonce le psychologue Steven Pinker, c’est-à-dire nous aider à mieux comprendre les autres, en nous aidant à nous mettre à leur place, à comprendre leur point de vue pour mieux nous adresser à eux. Et cette même compréhension va nous permettre d’aller plus avant <a href="http://www.internetactu.net/2011/06/29/la-theorie-argumentative-le-role-social-de-largumentation/">dans le rôle social de l’argumentation</a>, et donc dans la manipulation. </p>
  466. <p>En attendant d’être capable de répondre à ces mises en profil de nous, Crystal Knows nous offre une fenêtre sur les profils psychologiques que les profileurs construisent par-devers nos données (à l’image de ceux que produit la segmentation publicitaire d’Acxiom que <a href="http://www.lemonde.fr/technologies/article/2014/04/10/big-brother-ce-vendeur_4399335_651865.html">mettait en avant Yves Eudes sur Le Monde</a> ou <a href="http://alireailleurs.tumblr.com/post/82131158097/la-vallee-de-letrange-du-marketing-cible-sara">nous-mêmes sur A lire ailleurs</a>). Il montre aussi que <a href="l'obfuscation" http:="">l’obfuscation de nos données</a> devient plus que jamais urgente tant qu’un meilleur respect de leur utilisation ne sera pas envisagée. </p>
  467. </article>
  468. </section>
  469. <nav id="jumpto">
  470. <p>
  471. <a href="/david/blog/">Accueil du blog</a> |
  472. <a href="http://www.internetactu.net/2015/05/11/vers-des-technologies-de-lempathie/">Source originale</a> |
  473. <a href="/david/stream/2019/">Accueil du flux</a>
  474. </p>
  475. </nav>
  476. <footer>
  477. <div>
  478. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  479. <p>
  480. Bonjour/Hi!
  481. 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>
  482. 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>).
  483. </p>
  484. <p>
  485. 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>.
  486. </p>
  487. <p>
  488. Voici quelques articles choisis :
  489. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  490. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  491. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  492. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  493. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  494. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  495. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  496. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  497. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  498. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  499. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  500. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  501. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  502. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  503. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  504. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  505. </p>
  506. <p>
  507. 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>.
  508. </p>
  509. <p>
  510. Je ne traque pas ta navigation mais mon
  511. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  512. conserve des logs d’accès.
  513. </p>
  514. </div>
  515. </footer>
  516. <script type="text/javascript">
  517. ;(_ => {
  518. const jumper = document.getElementById('jumper')
  519. jumper.addEventListener('click', e => {
  520. e.preventDefault()
  521. const anchor = e.target.getAttribute('href')
  522. const targetEl = document.getElementById(anchor.substring(1))
  523. targetEl.scrollIntoView({behavior: 'smooth'})
  524. })
  525. })()
  526. </script>