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 17KB

3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
3 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>I helped pioneer UX design. What I see today disturbs me (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.fastcompany.com/90642462/i-helped-pioneer-ux-design-what-i-see-today-horrifies-me">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>I helped pioneer UX design. What I see today disturbs me</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.fastcompany.com/90642462/i-helped-pioneer-ux-design-what-i-see-today-horrifies-me" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div><p>When user experience design broke out of the research labs and into a full-blown industry 20 years ago, the future looked so bright. UX went from the obscure interest of a handful of practitioners to a burgeoning industry demanding thousands of new recruits seemingly overnight. And ever since, the story has been one of more success, ever-increasing influence, and, most important, happier users.</p></div>
  71. <div><p>I was there for some big parts of that story. In 2001, I cofounded a design agency, Adaptive Path, that turned out to be on the forefront of a huge wave of change for digital products: the arrival of user experience and user-centered design. Many of the tools and concepts we developed became a standard part of the many UX programs that have sprung up since. These days, as a coach to UX leaders, I am having continual conversations with them about the direction of the field. And over and over again, the question I hear is: Where did we go wrong?</p><p>That might sound strange, because in some ways things have never been better for UX. The field is huge and growing. And much of the actual design work is higher quality than it’s ever been. But to those who have been in the field a while, there’s a cloud behind all those silver linings.</p><p>The implicit promise of UX for many of us was a burgeoning philosophy of management by inquiry and insight, in which new creative explorations would lead to new questions about human behavior, which in turn would drive the definition of new product and value opportunities. The culture of UX also seemed to necessitate a degree of respect, compassion, and simple humility toward the people who use what we make, and the ways in which their lives and experiences may shape their behavior to look very different from our own. More exposure to this kind of thinking, the theory went, would lead to more demand for it, and the rising tide of human-centered design would pave the way for human-centered enterprises.</p></div>
  72. <div><p>That, to put it bluntly, did not happen.</p><p>Instead of challenging teams to stretch their thinking to address deeper and subtler user needs, product design practices have become increasingly less insight-driven. UX processes in many organizations these days amount to little more than <a href="https://www.spydergrrl.com/2020/05/ux-theatre-poster.html" target="_blank" rel="noopener noreferrer">“UX Theatre”</a> (an idea developed by Tanya Snook in 2018): creating the appearance of due diligence and a patina of legitimacy that’s just enough to look like a robust design process to uninformed business leaders and hopeful UX recruits alike.</p><p>Too many UX leaders have seen the field’s language and ideas co-opted and corrupted by outsiders who never knew or cared about the principles underlying the practices. We thought we were winning hearts and minds, but we were really setting ourselves up for exploitation, as businesses cherry-picked the bits of UX most compatible with their existing agendas and eschewed the parts that might lead to uncomfortable questions that could influence more than the color of a button on a screen.</p></div>
  73. <div><p>One such agenda is that of “agile transformation,” which promises to remake organizations to optimize their processes for developer efficiency. This is a win for developers tired of businesses that can’t articulate what they want, but, perhaps more important, it’s a win for businesses trying to wring maximum productivity out of their growing armies of engineers. However, in the rush toward transformation, something has been lost.</p><p>What got lost along the way was a view of UX as something deeper and more significant than a step in the software delivery pipeline: an approach that grounds product design in a broad contextual understanding of the problem and goes beyond the line-item requirements of individual components. Also lost along the way were many of the more holistic and exploratory practices that enabled UX to deliver that kind of foundational value.</p><p>Talk to any highly experienced UX practitioner these days, and most have a favorite method or practice that they’d like to see revived (or restored to its former glory). Research-driven persona development. Concept models. Cocreation sessions. Task flows. These things didn’t get cut out of UX processes because they were unnecessary. They simply didn’t fit a development process that demands clear accountability for every activity and has no space for foundational work that can’t be predictably packaged up into two-week units.</p></div>
  74. <div><p>Agile’s success at the expense of UX is just one manifestation of a deeper truth: Businesses want scaling. And foundational UX work doesn’t scale. It doesn’t lend itself to predictable, repeatable processes and generic cookie-cutter roles. It can’t, because by definition it deals with unknown, slippery, hard-to-define problems that characterize the leading edge of an organically evolving business.</p><p>The same things that make agile a great fit for scaling engineering work—regular sprint tempos; clearly articulated outcomes to be produced; breaking down the complex, unfolding experience of users into concrete elements that can be tied to code—are the very things that make it a terrible fit for foundational UX work. The holism necessary to do foundational UX is antithetical to the assembly-line chunks of user behavior agile requires.</p><p>Focusing on production-level UX allows organizations to check the “UX” box without having to deal with the messiness that sometimes results when you hire people who are charged with asking questions that have never been asked—questions senior leaders may not know the answers to, or may not want to. The factory floor prefers interchangeable, replaceable parts.</p></div>
  75. <div><p>Foundational UX is where the stuff that makes people really care about UX happens: the human insights, the collaborative exploration, the creative experimentation. For people joining the field, the disjunction between the dream and the reality can feel like a terrible bait and switch. Sold in school on UX as a noble and creative pursuit, they hit the job market to find roles where every chance for nobility and creativity has been carved out and cleaned away in the name of shipping product.</p><p>It would be fair to say the blame for the current state lies squarely at the doorstep of UX practitioners themselves, who have been slow to create the room for foundational UX by failing to tell a compelling story about the value of that work and build the necessary credibility to get it funded. If UX has failed to live up to its promise to deliver more than production-level value, maybe it was a bad promise in the first place. In other words, what if—just hear me out—what if we were all wrong?</p><p>Or UX’s current malaise could simply be the product of the collective midcareer burnout of its first generation of practitioners, who may have underestimated how slow and messy a grassroots revolution can be. The disgruntlement seems to go up the longer someone has been in the field: The more seasoned and experienced a UX person is, the more likely they are to be asking whether realizing user-centered values is even possible under capitalism. These are definitely questions worth asking and conversations worth having as a community.</p></div>
  76. <div><p>What no one is saying, interestingly enough, is that UX is struggling because all of the juicy problems have been solved. Despite the accumulation of standards, best practices, and conventional wisdom that comes with any field growing up—not to mention the continual pressure from business to make UX practices simpler and more digestible—the messy complexity of humanity continues to challenge us around the edges. And the organizations looking for more than UX theater are still creating new opportunities there.</p><p>For those new to the field, it’s surely disconcerting to see its elders handwringing over its direction, like an airline pilot announcing that maybe Albuquerque isn’t the best destination for this flight after all. But it’s a sign of the field’s health that questions of its values and intentions are even being raised from within. An actual erosion of the field’s values would be marked by considerably less self-awareness.</p><p>The truth is that UX is now far too big to be considered a single community or even a single set of methods or practices. It used to sort of mean something about an organization that it even had a UX team. Now it can mean anything, or nothing at all. UX now means whatever organizations choose it to mean, for better or worse. For those still fighting the good fight for hearts and minds, influencing how that meaning gets defined is now the heart of the challenge.</p>
  77. </div>
  78. </article>
  79. <hr>
  80. <footer>
  81. <p>
  82. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  83. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  84. </svg> Accueil</a> •
  85. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  86. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  87. </svg> Suivre</a> •
  88. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  89. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  90. </svg> Pro</a> •
  91. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  92. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  93. </svg> Email</a> •
  94. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  96. </svg> Légal</abbr>
  97. </p>
  98. <template id="theme-selector">
  99. <form>
  100. <fieldset>
  101. <legend><svg class="icon icon-brightness-contrast">
  102. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  103. </svg> Thème</legend>
  104. <label>
  105. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  106. </label>
  107. <label>
  108. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  109. </label>
  110. <label>
  111. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  112. </label>
  113. </fieldset>
  114. </form>
  115. </template>
  116. </footer>
  117. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  118. <script>
  119. function loadThemeForm(templateName) {
  120. const themeSelectorTemplate = document.querySelector(templateName)
  121. const form = themeSelectorTemplate.content.firstElementChild
  122. themeSelectorTemplate.replaceWith(form)
  123. form.addEventListener('change', (e) => {
  124. const chosenColorScheme = e.target.value
  125. localStorage.setItem('theme', chosenColorScheme)
  126. toggleTheme(chosenColorScheme)
  127. })
  128. const selectedTheme = localStorage.getItem('theme')
  129. if (selectedTheme && selectedTheme !== 'undefined') {
  130. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  131. }
  132. }
  133. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  134. window.addEventListener('load', () => {
  135. let hasDarkRules = false
  136. for (const styleSheet of Array.from(document.styleSheets)) {
  137. let mediaRules = []
  138. for (const cssRule of styleSheet.cssRules) {
  139. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  140. continue
  141. }
  142. // WARNING: Safari does not have/supports `conditionText`.
  143. if (cssRule.conditionText) {
  144. if (cssRule.conditionText !== prefersColorSchemeDark) {
  145. continue
  146. }
  147. } else {
  148. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  149. continue
  150. }
  151. }
  152. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  153. }
  154. // WARNING: do not try to insert a Rule to a styleSheet you are
  155. // currently iterating on, otherwise the browser will be stuck
  156. // in a infinite loop…
  157. for (const mediaRule of mediaRules) {
  158. styleSheet.insertRule(mediaRule.cssText)
  159. hasDarkRules = true
  160. }
  161. }
  162. if (hasDarkRules) {
  163. loadThemeForm('#theme-selector')
  164. }
  165. })
  166. </script>
  167. </body>
  168. </html>