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

index.html 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  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>L’expérience est-elle ce qui est à la croisée du business et du design ? (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/2016/02/18/lexperience-est-elle-ce-qui-est-a-la-croisee-du-business-et-du-design/">
  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. L’expérience est-elle ce qui est à la croisée du business et du design ? (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/2016/02/18/lexperience-est-elle-ce-qui-est-a-la-croisee-du-business-et-du-design/">Source originale du contenu</a></h3>
  445. <p><a href="http://www.briansolis.com/">Brian Solis</a> (<a href="https://twitter.com/briansolis">@briansolis</a>) est l’un des grands gourous du marketing et de la transformation numérique. En tournée promotionnelle pour son nouveau livre <a href="http://www.xthebook.com/">Expérience</a>, il est venu faire le show sur <a href="http://www.liftconference.com">la scène de Lift</a> pour nous expliquer combien les marques vont être impactées par ceux qui en font l’expérience. </p>
  446. <p><a href="http://www.internetactu.net/wp-content/uploads/2016/02/24351569713_f07cabaabe_z.jpg"><img src="http://www.internetactu.net/wp-content/uploads/2016/02/24351569713_f07cabaabe_z.jpg" alt="24351569713_f07cabaabe_z"/></a><br/>
  447. <i>Image : Brian Solis sur la scène de Lift, <a href="https://www.flickr.com/photos/liftconference/24351569713/in/album-72157664291396181/">photographié par Ivo Naepflin</a>.</i></p>
  448. <p><a href="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.06.35.png"><img src="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.06.35.png" alt="Capture d’écran 2016-02-17 à 16.06.35" align="right" vspace="6" hspace="6"/></a>Brian Solis rappelle que l’expérience que l’on conçoit n’est pas toujours celle que les gens veulent, à l’image du fameux chemin pensé par les urbanistes et celui tracé réellement par les utilisateurs. Mais il est difficile d’expliquer ce qu’est une expérience, parce que chacun en aura une définition différente… sauf à regarder son résultat. L’expérience est une réaction émotionnelle, qui, si elle est réussie, nous transforme et change ce qu’on fait après l’avoir ressentie. Dans l’expérience, les gens n’oublient pas le sentiment que vous leur avez communiqué, même s’ils peuvent oublier le message ou ce qu’ils ont fait. Comme le disait John Keats, rien ne devient réel tant qu’il n’est pas expérimenté. Et le bonimenteur, qui n’est pas sans références, rappelle l’histoire racontée par l’écrivain David Foster Wallace, dans <i><a href="http://www.amazon.fr/gp/product/2846269963/ref=as_li_tl?ie=UTF8&amp;camp=1642&amp;creative=19458&amp;creativeASIN=2846269963&amp;linkCode=as2&amp;tag=internetnet-21">C’est de l’eau</a></i>, celle des 2 poissons dans leur bocal… Où le premier dit au second : l’eau est bonne. Et l’autre lui répond : de quoi tu parles ?… <i>“Si l’expérience ne génère pas de ressenti, alors elle est un échec”</i>. </p>
  449. <p>Les expériences auront donc lieu qu’on les conçoive ou pas. Tout l’enjeu est cependant d’en concevoir des mémorables. Et en guise d’exemple, Solis évoque celles que fabrique Disney pour ses parcs et hôtels – pas sûr que cela fasse beaucoup rêver… Et Solis d’évoquer la conception de chambres d’hôtel comme des bateaux où le moindre détail de carton-pâte serait la clef d’une expérience réussie. L’usage de la perspective forcée dans la conception des décors des parcs Disney qui vous font croire que les bâtiments sont plus grands qu’ils ne sont, comme si vous étiez de nouveau un enfant… Les designers de Disney parlent de “imagineering” pour désigner “l’ingénierie de l’imagination” (<a href="https://fr.wikipedia.org/wiki/Walt_Disney_Imagineering">du nom de la société qui conçoit les parcs</a> et organise <a href="https://disneyimaginations.com/">un concours annuel pour trouver de nouvelles idées</a>). Et Solis de s’enthousiasmer pour le bandeau magique de Disney <a href="https://en.wikipedia.org/wiki/MyMagic%2B&gt;MyMagic&lt;/a&gt;, ce bracelet doté d’une puce qui permet l’achat, qui sert de clef pour sa chambre d’hôtel, qui permet de couper les innombrables files d’attente du parc… (et qui permet aussi de suivre à la trace tout ce que font leurs porteurs dans le parc, afin d’améliorer les offres et pousser toujours plus avant la “personnalisation” de l’expérience). Un bracelet qui permet à n’importe quel enfant d’explorer le parc à sa façon, d’une manière “magique”. &lt;/p&gt;&#10;&lt;p&gt;Solis s’enthousiasme aussi pour &lt;a href=" http:="">Echo</a>, la télécommande d’Amazon, “cette formidable entreprise de logistique” qui nous relie à l’entreprise pour nous envoyer toujours d’avantage de produits, <a href="http://rue89.nouvelobs.com/2014/11/09/echo-est-devenu-membre-famille-produit-flippant-damazon-255946">même si pour cela l’appareil met sous surveillance tous les propos que nous échangeons dans nos foyers</a>. </p>
  450. <p><a href="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.06.15.png"><img src="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.06.15-300x152.png" alt="Capture d’écran 2016-02-17 à 16.06.15" align="left" hspace="6" vspace="6"/></a>Pour Solis, les meilleures innovations sont celles qui nous permettent de voir le monde autrement que la façon dont on les voyait jusqu’à présent. La technologie n’est pas toujours la réponse, mais l’important est que les marques s’intéressent à leurs clients. <i>“Ce qui est important, c’est ce qui est important aux gens, pas la technologie en tant que telle”</i>, explique-t-il en montrant cette image très partagée sur les réseaux sociaux de gens qui regardent tous un événement dans la rue depuis leur mobile et où la seule personne qui l’apprécie avec ses yeux est une vieille femme. Pour Brian Solis, ce que montre cette image, ce n’est pas que les gens ne sont pas présents ou disponibles à l’instant présent, ce n’est pas qu’ils ne vivent pas le moment, mais que le partager, faire lien avec les siens est pour beaucoup un moteur d’expérience très puissant. <i>“Le partage fait changer son expérience d’échelle”</i>. L’expérience est personnelle, elle montre ce qui est important aux gens. Le comprendre nécessite de dépasser nos stéréotypes. Si on enlève les téléphones des photographies, comme l’a fait le photographe <a href="http://www.ericpickersgill.com&gt;&lt;/a&gt;Eric Pickersgill, l’usage de nos appareils semble ne montrer qu’un “egosystem”… Mais ce qui nous motive repose bien plus sur le social que sur le narcissisme. &lt;/p&gt;&#10;&lt;p&gt;&lt;i&gt;“Le succès repose sur ce qui attire l’attention des utilisateurs”&lt;/i&gt;. La meilleure soirée n’est plus celle où l’on est, mais celle qu’on partage sur les réseaux sociaux. Les gens regardent leurs téléphones 1500 fois par semaine soit 177 minutes par jour. C’est le nouveau standard de notre engagement avec le monde. Et les marques doivent le prendre en compte. &lt;/p&gt;&#10;&lt;p&gt;Les attentes des consommateurs sont influencées par les expériences qu’ils ont déjà eu avec d’autres marques, à l’image &lt;a href=" https:="">de la vidéo très célèbre</a> de cet enfant qui tente d’utiliser un magazine papier comme un iPad, parce qu’il connaît l’un et pas l’autre. <a href="http://www.internetactu.net/2016/01/27/comment-gagner-a-tinder/">Pourquoi le “swipe” de Tinder est-il vu comme “l’interaction parfaite”</a> ? Pourquoi l’icône pour sauvegarder quelque chose est-elle encore une image de disquette quand plus personne ne sait ce que c’est ? Les télévisions dites “intelligentes” sont encore livrées avec des télécommandes dotées de dizaines de boutons, des télécommandes qui refusent d’innover ! Le design doit se fixer des objectifs… Et Brian Solis de se pâmer devant la transformation de la bouteille de ketchup de Heinz, qui a changé l’expérience de tous ses utilisateurs en la mettant dans l’autre sens, la tête en bas !</p>
  451. <p><a href="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.05.30.png"><img src="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-17-à-16.05.30.png" alt="Capture d’écran 2016-02-17 à 16.05.30"/></a></p>
  452. <p><i>“L’expérience n’est pas un emballage, ni un très bon produit ou un excellent service après-vente. C’est toutes ces choses-là”</i>. Et tout ce que l’on conçoit doit être à ce niveau d’innovation. Pour Solis, il faut repartir d’une page blanche. Elle seule représente vos opportunités. Pour innover, pour fonder un nouveau service, il faut faire table rase du passé, de l’existant et revenir à l’expérience du client. Il faut savoir remettre tout à zéro. L’innovation commence quand vous vous souciez des autres, quand vous cherchez à concevoir des expériences qui ont du sens pour les gens. </p>
  453. <p><i>“Nul n’arrive à une télécommande s’il commence à partir de rien”</i>. </p>
  454. <p>Certes. Mais n’est-ce pas tout de même bien facile de faire table rase ? Dans la conception marketing dans laquelle nous promène Solis, cela peut certainement s’envisager, effectivement. Mais l’innovation sans contrainte aucune n’est-elle pas une manière hyper-simplifiée de voir l’innovation ? </p>
  455. <p>Nadina Frehner, de <a href="http://shoesize.me">ShoeSize.Me</a> n’avait elle que quelques minutes pour évoquer le service qu’elle a lancé et qui a remporté beaucoup de prix et distinctions. Et sa vision semble plus inspirante que la page blanche. </p>
  456. <p>Elle s’est servie des contraintes pour imaginer son service. Quand on cherche à acheter une paire de chaussures en ligne, c’est compliqué : les tailles notamment sont multiples. Elles dépendent de l’origine du site où l’on souhaite acheter sa paire de chaussures, des lots d’où proviennent les chaussures… Un 40 chez Timberland n’est pas le même 40 que chez Nike ou Adidas. Pour le consommateur, c’est si compliqué que seulement 8% achètent des chaussures en ligne et que 50% des commandes passées sont retournées. </p>
  457. <p>D’où l’idée qu’elle a eu de développer un service pour comparer les chaussures que l’on veut acheter à celles que l’on a déjà et dans lesquelles on se sent bien, permettant à son système de conseiller la taille adaptée aux spécificités de chaque marque. Sa solution, qui peut s’implémenter dans magasins en ligne de tous les détaillants pour autant qu’ils l’autorisent, permet d’accéder ainsi seulement aux chaussures qui vous iront. </p>
  458. <p><a href="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-18-à-10.35.20.png"><img src="http://www.internetactu.net/wp-content/uploads/2016/02/Capture-d’écran-2016-02-18-à-10.35.20.png" alt="Capture d’écran 2016-02-18 à 10.35.20"/></a><br/>
  459. <i>Image extraite de la présentation de Nadina Frehner qui montre l’interfaçage du bouton ShoeSize.Me dans un magasin de chaussure tiers.</i></p>
  460. <p>ShoeSizeMe permet de personnaliser partout son expérience client, de faire de la personnalisation un service. Un concept très intéressant pour redonner du poids à l’intérêt que peuvent avoir les utilisateurs à conserver leurs données pour créer des services capables de s’interfacer avec d’autres. Une idée à décliner qui pourrait permettre par exemple d’imaginer un service pour ceux qui souffrent d’allergie alimentaire qui leur permette par exemple de trier les produits qu’ils souhaitent acheter dans n’importe quelle épicerie en ligne. C’est-à-dire de regarder le web depuis ses préférences personnelles… Qui disait qu’on n’innovait pas avec des contraintes ? </p>
  461. <p>Hubert Guillaud</p>
  462. </article>
  463. </section>
  464. <nav id="jumpto">
  465. <p>
  466. <a href="/david/blog/">Accueil du blog</a> |
  467. <a href="http://www.internetactu.net/2016/02/18/lexperience-est-elle-ce-qui-est-a-la-croisee-du-business-et-du-design/">Source originale</a> |
  468. <a href="/david/stream/2019/">Accueil du flux</a>
  469. </p>
  470. </nav>
  471. <footer>
  472. <div>
  473. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  474. <p>
  475. Bonjour/Hi!
  476. 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>
  477. 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>).
  478. </p>
  479. <p>
  480. 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>.
  481. </p>
  482. <p>
  483. Voici quelques articles choisis :
  484. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  485. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  486. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  487. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  488. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  489. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  490. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  491. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  492. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  493. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  494. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  495. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  496. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  497. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  498. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  499. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  500. </p>
  501. <p>
  502. 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>.
  503. </p>
  504. <p>
  505. Je ne traque pas ta navigation mais mon
  506. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  507. conserve des logs d’accès.
  508. </p>
  509. </div>
  510. </footer>
  511. <script type="text/javascript">
  512. ;(_ => {
  513. const jumper = document.getElementById('jumper')
  514. jumper.addEventListener('click', e => {
  515. e.preventDefault()
  516. const anchor = e.target.getAttribute('href')
  517. const targetEl = document.getElementById(anchor.substring(1))
  518. targetEl.scrollIntoView({behavior: 'smooth'})
  519. })
  520. })()
  521. </script>