davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!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` element
  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>A notification center for progress bars that sounds like birdsong (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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
    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://interconnected.org/home/2023/02/10/progress">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>A notification center for progress bars that sounds like birdsong</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://interconnected.org/home/2023/02/10/progress" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p class="measure-wide f6 f5-l lh-copy black-80">The return of dead time!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">One curious experience in <a href="/home/2023/02/07/braggoscope">hacking on Braggoscope</a>: there’s a lot of <em>waiting for the AI.</em> Asking GPT-3 to extract some data costs 3 cents and takes 5 seconds. Stick it in a loop and that’s 80 minutes for the 1,000 episodes in the <em>In Our Time</em> archive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Now I’ve saved myself a few days writing code by asking the AI to do the heavy lifting so 80 minutes and pennies per inference is neither here nor there, but what am I supposed to <em>do?</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">This has come up before:</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">in my undergrad, analysing quasar spectra, running data jobs overnight and over lunch</li>
<li class="measure-wide f6 f5-l lh-copy black-80">writing firmware for a radio prototype, wanting to test my latest changes and hitting compile and staring at the wall for minutes while the computer did its THING.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Long-running processes</em> are kinda the norm, even though we have this narrative about computers being instant? Whether that’s waiting for a 3D render, or running the test suite on a codebase and going off to make a cup of tea while it does its thing.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or waiting for a restaurant delivery! Or a cab to arrive! Many process are human-machine hybrids.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">tbh I never know what to do with myself.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I can never move on for that 80 minutes. I can never multiplex tasks. Even though I <em>know</em> it’s only a fraction of the way through, cognitively the computer’s task is still lodged in my head, and all I can do is doomscroll Twitter or shuffle my shoes or whatever until it completes. Nothing productive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I blame notifications.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Operating systems are really good at dinging when the machine has finished (and it’s my turn now).</p>
<p class="measure-wide f6 f5-l lh-copy black-80">An absolute <em>ton</em> of effort has gone into effective dinging, over the years. Apps can all ding. I can make my hobby code ding. There’s a top-level OS feature called the Notification Center which is all about collecting dings, so that I have a list of all the balls which are now in my court to deal with.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Engagement!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Computers and phones are not so good at, say, <em>humming</em> to say: hey you don’t need to do anything here. Don’t panic. Go away.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">So, <em>progress bars,</em> right?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress bars let me see that I’m only 10% of the way through a process, and the pixels are creeping up oh so slowly, so I can safely get on and THINK ABOUT SOMETHING ELSE secure in the knowledge that I won’t be interrupted by a ding.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Clever</em> progress bars even show an estimate time of completion.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>(There’s a command line tool, I forget the name of it right now, where you - a developer - give it only minimal information, and it deduces the rest, providing a user interface with percentages and times and everything you’d need.)</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">I know we laugh at progress bars because they were often comically inaccurate with time estimates – but we could have solved that with better design I’m sure? Visually provided lower bounds (this process will not complete in less than X) and confidence levels? Or just made them funny? <q>Reticulating splines,</q> that was good.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But we didn’t take on that design challenge…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Instead we got…</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Spinners are the dumbest progress bar.</p>
<p class="measure-wide f6 f5-l lh-copy black-80"><em>“I’m busy and I may come back to you in 3 minutes or I may come back to you in half a second but I’m not going to say which, and anyway the network may have hung so just wait forever, I’ll just be here looking exactly the same, spinning.”</em></p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagine if all the effort put into managing notifications had gone into progress bars.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">We would have…</p>
<ul class="list ph0 ph0-ns bulleted-list">
<li class="measure-wide f6 f5-l lh-copy black-80">all my progress bars consolidated in one place, not hidden behind other windows, a reassuring design feature that shows me that the computer is WORKING for me!</li>
<li class="measure-wide f6 f5-l lh-copy black-80">AI predictions based on current churning away, and previous performance, with increasingly confident percentages and automatic time-till-done</li>
<li class="measure-wide f6 f5-l lh-copy black-80">easy-to-integrate progress bars for app developers and hobbyist coders alike</li>
<li class="measure-wide f6 f5-l lh-copy black-80">extra features, like integrated pause/resume when you need more battery, or the ability to hook up completion milestones to ding (I suppose) or vibrate my watch or whatever</li>
<li class="measure-wide f6 f5-l lh-copy black-80"><em>cloud</em> progress bars, so I can see the progress of an Amazon delivery right next to the job that is using machine learning to generate my new profile image photos, all in a pane that swipes down from the top of the screen.</li>
</ul>
<p class="measure-wide f6 f5-l lh-copy black-80">Why do I want this?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Well, the motivation as for the Notification Center itself: notifications are consolidated because it helps manage attention. It’s less stressful to have <em>“things I need to look at”</em> effectively as a to-do list rather than having to keep all the dings in my own brain.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Progress Bar Center, same same: it would help me manage my attention. By listing all the things I DON’T need to look at, and letting me know that I definitely <em>don’t need to look at these for the next X minutes</em> then it means I can cognitively stand down: I need no longer inhabit a state of perpetual readiness.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And so I can finally focus on something else instead.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">Imagining, for a second, a Progress Bar Center on my laptop or my phone:</p>
<p class="measure-wide f6 f5-l lh-copy black-80">It would be a home for my podcast <em>Now Playing</em> too. And for my current Google Maps journey. So this is semi-interactive.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Given that interactivity, I can imagine the commercial angle too: the progress bar for a cloud render or my Amazon order may have a pay-for <em>Boost</em> button to buy more GPUs or upgrade to next-day delivery or whatever. The process economy instead of the engagement economy.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And of course my GPT-3 tasks running, and Photoshop filters calculating, and my movies downloading –</p>
<p class="measure-wide f6 f5-l lh-copy black-80">all, collectively, reassuringly telling me: the machine is busy on my behalf. I can relax, I’m already being productive, put it all out of my mind, there’s nothing I need to do.</p>
<hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
<p class="measure-wide f6 f5-l lh-copy black-80">And pulling on that thread of <em>putting attention aside…</em></p>
<p class="measure-wide f6 f5-l lh-copy black-80">It’s easier to do that when the locus of attention is physically elsewhere?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Like: when music is coming from the speaker behind me, rather than from the same location as the code problem I’m trying to crack on-screen, <a href="/home/2021/11/19/airpods">it seems less likely to distract me</a>.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">All these things asking for my attention from the same locus is fatiguing, in the same way that staring into a point source of bright light is fatiguing, but a diffuse glow from all around can can be just as bright and not fatiguing at all – just illuminating.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">So the equivalent for attention is (because <a href="/home/2023/01/20/map_room">I’ve been thinking about room-scale computing recently</a>) to scatter those progress bars around the room.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">And thinking of the <em>chugga chugga chugga</em> of old hard drives and other <a href="/home/2021/08/27/data_sense">synaesthetic data senses for machines</a> – it maybe would be cool to <em>sonify</em> these progress bars?</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The idea of making a soundscape of the workings of the machine has been around for a while of course but I’ve found it hard to see a plausible route to get there in this era of notifications. A room of dinging things would be torture.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">But based it on this framework for progress bars!</p>
<p class="measure-wide f6 f5-l lh-copy black-80">You could do it for cheap with tiny speakers and Bluetooth, sell progress bars by the handful like AirTags.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">I would love it if sitting in my home office had the ambient sound of a rainforest. Everything, I would think, listening, is working as it should.</p>
<p class="measure-wide f6 f5-l lh-copy black-80">The frogs are reaching a crescendo! (I am about to get a notification that a job has finished, I think to myself.)</p>
<p class="measure-wide f6 f5-l lh-copy black-80">Or stepping into an office and hearing all the non-human workers sonified and layered – the sound of progress as the distant hum of traffic, or the wind.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    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>