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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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>Fast Path to a Great UX - Increased Exposure Hours (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. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://articles.uie.com/user_exposure_hours/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Fast Path to a Great UX - Increased Exposure Hours</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://articles.uie.com/user_exposure_hours/" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>
  74. As we’ve been researching what design teams need to do to create great user experiences, we’ve stumbled across an interesting finding. It’s the closest thing we’ve found to a silver bullet when it comes to reliably improving the designs teams produce. This solution is so simple that we didn’t believe it at first. After all, if it was this easy, why isn’t everyone already doing it?
  75. </p>
  76. <p>
  77. To make sure, we’ve spent the last few years working directly with teams, showing them what we found and helping them do it themselves. By golly, it actually worked. We were stunned.
  78. </p>
  79. <p>
  80. The solution? Exposure hours. The number of hours each team member is exposed directly to real users interacting with the team’s designs or the team’s competitor’s designs. There is a direct correlation between this exposure and the improvements we see in the designs that team produces.
  81. </p>
  82. <h2>
  83. It Makes Perfect Sense: Watch Your Users<br>
  84. </h2>
  85. <p>
  86. For more than 20 years, we’ve known that teams spending time watching users, can see improvements. Yet we still see many teams with regular user research programs that produce complicated, unusable products. We couldn’t understand why, until now.
  87. </p>
  88. <p>
  89. Each team member has to be exposed directly to the users themselves. Teams that have dedicated user research professionals, who watch the users, then in turn, report the results through documents or videos, don’t deliver the same benefits. It’s from the direct exposure to the users that we see the improvements in the design.
  90. </p>
  91. <p>
  92. Over the years, there has been plenty of debate over how many participants are enough for a study. It turns out we were looking in the wrong direction. When you focus on the hours of exposure, the number of participants disappears as an important discussion. We found 2 hours of direct exposure with one participant could be as valuable (if not more valuable) than eight participants at 15-minutes each. The two hours with that one participant, seeing the detailed subtleties and nuances of their interactions with the design, can drive a tremendous amount of actionable value to the team, when done well.
  93. </p>
  94. <h2>
  95. First Forays: Field Visits<br>
  96. </h2>
  97. <p>
  98. As we watched different teams go through this process, we started to notice some repeatable patterns. For example, many teams spent little time watching their users. Often these teams had successful, profitable products that had evolved over many years into very complicated designs, chock full of features that users found hard to find and often frustrating to use.
  99. </p>
  100. <p>
  101. Before they began watching users, the teams would frequently find themselves at odds in meetings. They knew that the product was getting more complex, but nobody had any real information about how the product was being used. Stakeholders would ask for features without giving any useful details to the team to implement. An attitude of “Let’s build it, and if we get it wrong, we’ll fix it” would prevail.
  102. </p>
  103. <p>
  104. For teams like these, we often choose a field visit as their first foray into watching their users. Field visits are great because we get to see what the users do in their natural environment. It doesn’t require prior knowledge of what the proper tasks in the design are. We interview the user, uncover their goals and objectives, and then ask them to use the product or service to accomplish those.
  105. </p>
  106. <p>
  107. A typical field visit is two hours. Usually with ten to twelve visits, each team member can get at least eight hours of exposure to a minimum of four different users, each trying to use the design in interesting ways.
  108. </p>
  109. <p>
  110. The results are typically a list of easy fixes. One recent 12-visit venture with a 10-member team produced 350 items on their list of quick fixes. The product improvements started showing up in just a matter of weeks.
  111. </p>
  112. <h2>
  113. A Minimum of Every Six Weeks<br>
  114. </h2>
  115. <p>
  116. We saw many teams that conducted a study once a year or even less. These teams struggled virtually the same as teams who didn’t do any research at all. Their designs became more complex and their users reported more frustration as they kept adding new features and capabilities.
  117. </p>
  118. <p>
  119. The teams with the best results were those that kept up the research on an ongoing basis. It seems that six weeks was the bare minimum for a two-hour exposure dose. The teams with members who spent the minimum of two hours every six weeks saw far greater improvements to their design’s user experience than teams who didn’t meet the minimum. And teams with more frequent exposure, say two-hours every three weeks, saw even better results.
  120. </p>
  121. <p>
  122. We think there are two reasons the frequency turns out to be important. First is the way memory works. It’s harder to remember someone you’ve met more than six weeks ago than someone you’ve met last week. If we want our users and their needs to be present in our minds as we’re creating our designs, we need to regularly see them.
  123. </p>
  124. <p>
  125. The second reason has to do with the pain of an ongoing frustration. It’s painful to watch someone struggle with your design. It’s even more painful to come back a few weeks later and see someone else struggle with the same problem again. The more times we’re exposed to those struggles, the more frustrated we get, the more we want to fix those problems. (And the happier we’ll be when we finally see someone who breezes right through with our new design.)
  126. </p>
  127. <p>
  128. Some problems are particularly gnarly. Seeing these problems repeat, in the field and in the lab, gives us insights into the nuances behind their potential causes. Testing out new design ideas can help us get to a solution faster. A regular exposure program makes that happen even better.
  129. </p>
  130. <p>
  131. By having a six-week minimum to our exposure, we leverage these two factors, making our users and their needs the driver of the design work we’re doing on any given day.
  132. </p>
  133. <h2>
  134. Types of Exposure to Users<br>
  135. </h2>
  136. <p>
  137. Field visits aren’t the only form of exposure we found that works. Usability tests, both in-person and remote, can be very effective. (We found a mixture of both works better than 100% remote sessions.) Once you know the tasks that users naturally use with the design (because you discovered them during your field visits), it’s easy to construct realistic scenarios for usability testing.
  138. </p>
  139. <p>
  140. For folks heavily involved with a style of self-design, using it themselves for real work also can contribute. (For more about self-design, see my recent article, <a href="//articles.uie.com/self_design/">Actually, You Might Be Your User</a>.) Again, validating these results with other methods, such as field visits and usability testing, helps you understand what your users experience that you don’t when using the design.
  141. </p>
  142. <p>
  143. Watching users work with competitive designs also is important. Seeing them work through those same tasks with someone else’s design can help identify where there are gaps in your own design. It also makes it easy to point out where your advantages lie.
  144. </p>
  145. <h2>
  146. The Team of Influencers<br>
  147. </h2>
  148. <p>
  149. Our research had a finding that took us by surprise: Teams that excluded non-design personnel didn’t see the same advantages as teams that included those people.
  150. </p>
  151. <p>
  152. For example, we worked with teams where only the designers and developers were having regular exposure to their users. Stakeholders, such as product managers and executives, along with other non-design folks, like technical support liaisons and quality assurance management, didn’t participate in the field studies or usability tests. While the core design team became very familiar with what users needed and wanted, they were constantly battling with these other individuals who didn’t have the same experiences.
  153. </p>
  154. <p>
  155. The tipping point came when we found teams where all these other folks were participating in the user research studies. No longer did they assert their own opinions of the design direction above what the research findings were telling the teams. Having the execs, stakeholders, and other non-design folks part of the exposure program produced a more user-focused process overall.
  156. </p>
  157. <p>
  158. Exposure is easy to measure. You can just count the hours everyone has had participating in the studies. We’re seeing teams make it part of their quarterly performance reviews, sending a clear message of the importance of user experience, especially when all the influencers are measured the same way.
  159. </p>
  160. <h2>
  161. The Challenge: Two Hours Every Six Weeks For Everyone<br>
  162. </h2>
  163. <p>
  164. Granted, we admit our data could be flawed. There could be other factors here. However, we’ve tested every possible theory, spent time reviewing every factor we could imagine, and we keep coming back to this one item: Get every member on the team to spend two hours every six weeks and you’ll likely have a great user experience appear before your very eyes.</p>
  165. </article>
  166. <hr>
  167. <footer>
  168. <p>
  169. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  171. </svg> Accueil</a> •
  172. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  173. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  174. </svg> Suivre</a> •
  175. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  176. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  177. </svg> Pro</a> •
  178. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  179. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  180. </svg> Email</a> •
  181. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  182. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  183. </svg> Légal</abbr>
  184. </p>
  185. <template id="theme-selector">
  186. <form>
  187. <fieldset>
  188. <legend><svg class="icon icon-brightness-contrast">
  189. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  190. </svg> Thème</legend>
  191. <label>
  192. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  193. </label>
  194. <label>
  195. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  196. </label>
  197. <label>
  198. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  199. </label>
  200. </fieldset>
  201. </form>
  202. </template>
  203. </footer>
  204. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  205. <script>
  206. function loadThemeForm(templateName) {
  207. const themeSelectorTemplate = document.querySelector(templateName)
  208. const form = themeSelectorTemplate.content.firstElementChild
  209. themeSelectorTemplate.replaceWith(form)
  210. form.addEventListener('change', (e) => {
  211. const chosenColorScheme = e.target.value
  212. localStorage.setItem('theme', chosenColorScheme)
  213. toggleTheme(chosenColorScheme)
  214. })
  215. const selectedTheme = localStorage.getItem('theme')
  216. if (selectedTheme && selectedTheme !== 'undefined') {
  217. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  218. }
  219. }
  220. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  221. window.addEventListener('load', () => {
  222. let hasDarkRules = false
  223. for (const styleSheet of Array.from(document.styleSheets)) {
  224. let mediaRules = []
  225. for (const cssRule of styleSheet.cssRules) {
  226. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  227. continue
  228. }
  229. // WARNING: Safari does not have/supports `conditionText`.
  230. if (cssRule.conditionText) {
  231. if (cssRule.conditionText !== prefersColorSchemeDark) {
  232. continue
  233. }
  234. } else {
  235. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  236. continue
  237. }
  238. }
  239. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  240. }
  241. // WARNING: do not try to insert a Rule to a styleSheet you are
  242. // currently iterating on, otherwise the browser will be stuck
  243. // in a infinite loop…
  244. for (const mediaRule of mediaRules) {
  245. styleSheet.insertRule(mediaRule.cssText)
  246. hasDarkRules = true
  247. }
  248. }
  249. if (hasDarkRules) {
  250. loadThemeForm('#theme-selector')
  251. }
  252. })
  253. </script>
  254. </body>
  255. </html>