davidbgk
/
larlet-fr-david-cache

<!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>Designing Branch: Sustainable Interaction Design Principles (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://branch.climateaction.tech/2020/10/15/designing-branch-sustainable-interaction-design-principles/">

<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>Designing Branch: Sustainable Interaction Design Principles</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://branch.climateaction.tech/2020/10/15/designing-branch-sustainable-interaction-design-principles/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>There’s a need to reconnect the digital to the physical, from minerals and energy to the physical infrastructure that powers the internet. We have to repurpose our digital design processes to consider and reflect these ecological needs, instead of optimising only for business and growth objectives, to achieve more transactions, interactions and attention. </p>

<p>One of the ways we can do this is by lowering the energy demand of the digital products and services we’re designing, making it more accessible to people with slower internet connections or on older devices.  For <em>Branch</em> we wanted to design something that still looked designed, and worked at a low bandwidth environment, but didn’t end up looking too anodyne.</p>

<p><em>Branch</em> was also designed to be ‘Demand Responsive’ to adapt to and reflect the physical infrastructure of the internet and the energy behind it. Utilising data from a grid intensity API and the user’s location, <em>Branch</em> has different interface designs that are shown dependent on the current energy demand and fossil fuels on the grid where the user is.  There are 4 different design states:<br></p>

<h3>1. <strong>Lower grid demand, more renewables</strong></h3>

<p>The first design state is when grid demand is lower and has a higher concentration of renewables, here the site shows the full experience with all images, videos and media content automatically loaded.  </p>

<h3>2. <strong>Medium grid demand, fewer renewables</strong></h3>

<p>If the grid demand increases and is medium intensity with fewer renewables, we display lighter unicode renderings of images and videos. </p>

<h3>3. <strong>Higher grid demand, less renewables </strong></h3>

<p>When grid demand is high and less renewables are being used we reverse the way media content is shown by emphasising the alt text instead. The user can click to reveal the content if they wish, but it is not automatically loaded for them, this also creates the need to craft alt texts to make them much more descriptive than they may usually be.</p>

<h3>4. <strong>Grid data unavailable </strong></h3>

<p>Sometimes the technology we rely on goes down or simply doesn’t work, and that’s another important reflection of the physical infrastructure behind it. So when the grid intensity API we use for <em>Branch</em> is down or unavailable, we designed a state to show this too. <br><br></p>

<figure class="wp-block-image size-large"><img loading="lazy" src="https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-694x1024.png.pagespeed.ic.JmUqcpn2Eb.png" alt="Four mockups show the different designs for low, medium and high grid intensity as well as if no data is available" class="wp-image-482" srcset="https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-694x1024.png.pagespeed.ic.JmUqcpn2Eb.png 694w, https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-203x300.png.pagespeed.ic.5gQxh-rKS4.png 203w, https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-768x1133.png.pagespeed.ic.8Pm6IsdXct.png 768w, https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-1041x1536.png.pagespeed.ic.sg75yRRhvF.png 1041w, https://branch.climateaction.tech/wp-content/uploads/2020/10/xbranch_designs_process_tom_jarrett-1388x2048.png.pagespeed.ic.PjF8C3Gqwz.png 1388w, https://branch.climateaction.tech/wp-content/uploads/2020/10/branch_designs_process_tom_jarrett.png 1500w" sizes="(max-width: 694px) 100vw, 694px"></figure>

<p>The logo was designed to indicate these different states, with the graphical branch element getting greener to show when more renewables are on the grid.</p>

<figure class="wp-block-image"><img src="https://lh5.googleusercontent.com/ewbzm0mXaW119Hr7b8HWuwEqxp5bq0-gShEeKCF8sT3h4u1rcLiyv9REYSCYKAZ3uoePRp0IpoiVNlTDkTPjHg7JwFII_Ebswjr1IIjfPtBDUPDvHeGDoqbJgCayUDMc2s1ge_2Z" alt=""></figure>

<p>As well as this responsiveness the<em> Branch</em> site has also been designed to be as low energy as possible. This includes using a limited number of fonts and utilizing system fonts, reducing image weight when they’re shown and designing in a way that doesn’t need lots of javascript to render.</p>

<p>Another feature is that <em>Branch</em> is  that it is “available offline”,  this allows users to access the site even without an internet connection by caching. This often forgotten feature is a simple counter to the idea of being constantly connected and could even become increasingly necessary if the physical infrastructure of the internet becomes more unreliable due to environmental changes.</p>

<p>Hopefully <em>Branch</em> can demonstrate some ways of thinking about designing digital technology in a more ecologically aware way and continue the conversations that are happening in this area to try and help build out some design principles. I have started by laying out some of the design principles I think may be worth considering when designing digital products and services in a more carbon aware and sustainable way</p>

<h3><strong>Carbon and energy conscious design</strong></h3>

<p>A slower and more energy intensive internet benefits no one. If we’re going to build an internet that is future-proof and runs off renewables, it needs to be lighter, less energy intensive and decentralised, moving away from a reliance on a handful of tech stack monopolies.</p>

<h3><strong>Not putting the burden on the users</strong></h3>

<p>This shouldn’t be about shaming individual habits, it’s counter-productive to data shame users. Those of us designing and building these digital products and services should be the ones taking responsibility for ensuring that they’re fit for a more sustainable world.</p>

<h3><strong>You don’t have to sacrifice experience</strong></h3>

<p> A lot of design is ultimately problem solving and we shouldn’t shy away from constraints, instead consider them a gift and use them to still create incredible and usable experiences. The idea of designing with no concern to weight or restrictions is a relatively new phenomenon anyway.</p>

<h3><strong>Disconnect from the ad networks</strong></h3>

<p>Analytics, ads and tracking are energy intensive components of a site or platform. Disconnecting from these allows us to make digital products and services lighter and data privacy clearer and more transparent. Try using cookie free, independent analytics platforms such as <a href="https://withcabin.com/" target="_blank" rel="noreferrer noopener">Cabin</a>.</p>

<h3><strong><s>Attention-economy</s> </strong></h3>

<p>Digital interfaces have seemingly morphed into a homogeneous digital feed, a sea of scrolling images, videos and content optimised to keep users attention, this is also very energy intensive. We need to cut the noise and provide users with a calmer and more considered experience that allows them to choose what they look at rather than an algorithm deciding and auto-loading what might keep a user’s attention the longest.</p>

<h3><strong>Challenge infinite digital growth</strong></h3>

<p>Consider asking if what we’re designing extends the reach and power of the existing tech monopolies and their privatisation of this infrastructure. Also do the benefits of the digital product or service balance or outweigh the energy and carbon cost and does it encourage the use or extraction of more finite resources.</p>

<h4>About the author</h4>

<p>Tom Jarrett is a designer exploring sustainable interaction design and designing digital products and services to work within ecological limits. See more at<a href="http://tomjarrett.earth" target="_blank" rel="noreferrer noopener"> tomjarrett.earth</a></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.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.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.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.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.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.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>