davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Make Me Think (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://blog.jim-nielsen.com/2020/make-me-think/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Make Me Think</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://blog.jim-nielsen.com/2020/make-me-think/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <blockquote>
<p>For many years now, the rallying cry of digital designers has been epitomised by the title of Steve Krug’s terrific book, Don’t Make Me Think. But what happens when that rallying cry is taken too far? What happens when it stops being “don’t make think while I’m trying to complete a task” to simply “don’t make me think” full stop? — Jeremy Keith, <a href="https://adactio.com/journal/6786">“Seams”</a> </p>
</blockquote>

<p>Steve Krug’s book <a href="https://en.wikipedia.org/wiki/Don%27t_Make_Me_Think">“Don’t Make Me Think”</a> is a wonderful book. Unfortunately, I’ve often seen its contents narrowly distilled to a slogan revered as the great commandment of software design: don’t make people think. </p>

<p>Have you heard of the <a href="https://en.wikipedia.org/wiki/Cognitive_reflection_test">the cognitive reflection test</a>? It’s a test “designed to measure a person’s tendency to override an incorrect ‘gut’ response and engage in further reflection to find a correct answer.” More from Wikipedia:</p>

<blockquote>
<p>According to Frederick, there are two general types of cognitive activity called "system 1" and "system 2" (these terms have been first used by Daniel Kahneman). System 1 is executed quickly without reflection, while system 2 requires conscious thought and effort. The cognitive reflection test has three questions that each have an obvious but incorrect response given by system 1. The correct response requires the activation of system 2. For system 2 to be activated, a person must note that their first answer is incorrect, which requires reflection on their own cognition</p>
</blockquote>

<p>Here are the three questions from the test:</p>

<ol>
<li>A bat and a ball cost $1.10 in total. The bat costs $1.00 more than the ball. How much does the ball cost?</li>
<li>If it takes 5 machines 5 minutes to make 5 widgets, how long would it take 100 machines to make 100 widgets?</li>
<li>In a lake, there is a patch of lily pads. Every day, the patch doubles in size. If it takes 48 days for the patch to cover the entire lake, how long would it take for the patch to cover half of the lake?</li>
</ol>

<p>The intuitive answers are: </p>

<ol>
<li>10 cents</li>
<li>100 minutes</li>
<li>24 days</li>
</ol>

<p>The correct answers are: </p>

<ol>
<li>5 cents</li>
<li>5 minutes</li>
<li>47 days.</li>
</ol>

<p>What’s interesting, Malcolm Gladwell points out in his book <em>David and Goliath</em>, is that there is an easy way to raise peoples’ grades on this test: make the test questions difficult to read.</p>

<blockquote>
<p>The psychologists Adam Alter and Daniel Oppenheimer tried this a few years ago with a group of undergraduates at Princeton University. First they gave the CRT the normal way, and the students averaged 1.9 correct answers out of three. That’s pretty good, though it is well short of the 2.18 that MIT students averaged. Then Alter and Oppenheimer printed out the test questions in a font that was really hard to read—a 10 percent gray, 10-point italics Myriad Pro font...</p>
</blockquote>

<p>Translated to digital, that would mean a question that looked roughly like this:</p>

<p><img src="https://cdn.jim-nielsen.com/blog/2019/make-me-think-test-questions.png" alt="A graphical approximation of the first CRT questions when represented in a small, light gray version of Myriad Pro"/>

</p>

<p>What happened when the questions received this kind of visual treatment?</p>

<blockquote>
<p>The average score this time around [went up to] 2.45. Suddenly, the students were doing much better.</p>
</blockquote>

<p>Wait, but I thought we were supposed to <em>not</em> make people think? Present things to people clearly and simply and they’ll do better. Why is the opposite happening here? The typographic treatment of the question made reading difficult. You likely had to squint, possibly even read some words (or the entire question) multiple times. Interacting with the question in this way required you to stop and think. It made you <em>work</em>. Gladwell comments on this interesting result of the study:</p>

<blockquote>
<p>As Alter says, making the questions “disfluent” causes people to “think more deeply about whatever they come across. They’ll use more resources on it. They’ll process more deeply or think more carefully about what’s going on. If they have to overcome a hurdle, they’ll overcome it better when you force them to think a little harder.” Alter and Oppenheimer made the CRT more difficult. But that difficulty turned out to be <em>desirable</em>.</p>
</blockquote>

<p>Look at that: purposefully making something more difficult turned out to be desirable.</p>

<h2 id="a-product-example">A Product Example</h2>

<p>A little while ago, I knew some folks building a product touted as an “anonymous job platform for your ideal next role”. I was able to get a sneak peak at using the app and one of the things that struck me was how difficult it was to use. Not “difficult” in a human/computer interaction kind of way, but rather in a critical thinking kind of way. It was hard because it required me to stop and think. It required introspection. I half-jokingly noted to the the designer in my feedback “I probably thought harder...when creating a profile than most any other time in my life.” He responded by saying, “We heard that same feedback...I’m loving that part of it. I think we're gonna try to encourage that even more.”</p>

<p>What I found ingenious about the product was that it didn’t shy away from being difficult. Again, it’s not that the product was difficult to understand or the UI tricky to use. No. In fact, the UI and instructions were quite clear, helpful, even  empathetic to the task at hand. There were moments of suggested pause, followed by probing questions meant to draw out the best kinds of thought, which would then power the product to deliver the best kinds of value. </p>

<p>After more use of the product, I wrote my feedback to one of the owners:</p>

<blockquote>
<p>[To do this right] I realize that I'd really need to sit down and think about:</p>
<ol>
<li>What do I want? And not just a general “what do I want out of life?” but a very precise set of details “I want to be doing <em>this</em> kind of work, on <em>this</em> kind of team, with <em>this</em> kind of business”...</li>
</ol>
<p>[I think you’ve done a] really good job on the way the app makes me think. I found myself multiple times thinking “this is too hard. You people who made this app, you’re making me think too much!” But then an inner voice said “hey stupid, this stuff that’s hard, it’s for YOU. It’s for YOUR benefit. Are you telling me you don’t want to work hard for YOURSELF? You get what you put into it.” And then I was like “ok I’ll spend whatever amount of time this takes.”</p>
</blockquote>

<p>Turns out, this “disfluency” I was picking up on was a kind of intentional friction by the product designers, one of whom responded to my feedback in this manner: </p>

<blockquote>
<p>We’re hearing similar things from other folks. I’m a little scared we’re gonna lose people because it is difficult, but that might be OK? It’s the antithesis of most internet things these days. Instead of go-go-go, fast-fast, more-more, we’re asking [people] to slow down, take their time...[I think we’ll] reiterate as much as we can that...it’s OK that it’s hard.</p>
</blockquote>

<h2 id="conclusion">Conclusion</h2>

<p>Why am I writing all of this? I don’t know. I guess as a reminder to myself. “Hard things are hard”. Great software allows people to do the actual thinking of the task at hand. If computers really are a “bicycle for the mind” we should make sure we don’t remove what makes bicycles great: human-powered motion. Too often our propensity is to make software that turns bicycles into motorcycles: all that’s required of you is to twist your arm on the throttle and boom, automated motion.</p>

<p>The removal of all friction should’t be a goal. Making things easy and making things hard should be a design tool, employed to aid the end user towards their loftiest goals. As <a href="https://twitter.com/dhh/status/1250090346010140675?s=20">@dhh has stated</a></p>

<blockquote>
<p>Instead of always chasing the erasure of friction, it's worth thinking about how friction can help people</p>
</blockquote>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>