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>Inclusive UX in an era of anxiety (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://uxdesign.cc/inclusive-ux-in-an-era-of-anxiety-dc89c39ec202">

<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>Inclusive UX in an era of anxiety</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://uxdesign.cc/inclusive-ux-in-an-era-of-anxiety-dc89c39ec202" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <div class=""><h2 id="b428" class="hj gk gl bf b hk hl hm hn ho hp hq hr hs ht hu hv hw hx hy hz dx">It’s more important than ever to consider mental health while designing.</h2></div>
<p id="74fc" class="ja jb gl jc b hk jd je hn jf jg jh ji jj jk jl jm jn jo jp jq jr ge hi">Accessibility continues to be an important topic across multiple industries, yet mental health, and specifically anxiety, don’t often immediately come to mind as a piece of the puzzle.</p>
<p id="6d3d" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">Considering the skyrocketing rates of mental illness throughout the course of the COVID-19 pandemic — plus many more of us struggling with daily stressors and mood swings that may lead us to irrational negative thinking —how often are we asking ourselves, “How will someone with anxiety experience our product/service/feature? How can we make that better?”</p>
<figure class="jy jz ka kb kc kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx">Via <a href="https://www.statista.com/chart/21878/impact-of-coronavirus-pandemic-on-mental-health/" class="ed kx" rel="noopener nofollow">Statista</a></figcaption></figure>
<p id="1a9a" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">As <a href="https://www.nami.org/Get-Involved/Awareness-Events/Mental-Health-Awareness-Month" class="ed kx" rel="noopener nofollow">Mental Health <span id="rmm"><span id="rmm">A</span></span>wareness Month</a> comes to a close, I’ve been reflecting on personal experiences, and the many ways designers and developers can influence someone suffering from anxiety or depression. Especially for those of us in healthcare, insurance, finance — industries that often require complex tasks from an incredible breadth of users — What mental health hurdles may be unintentional consequences of our work?</p>
<p id="61cc" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">A close friend of mine — let’s call her Alex — suffers from generalized anxiety disorder, which has significantly exasperated over the last year, like so many others. In helping her with various issues she’s faced in websites and apps, my heart breaks seeing the emotional toll some digital experiences have had on her. But it’s also helped open my eyes and make me a more considerate designer.</p>
<p id="8277" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">A few salient pieces of our conversations have really stuck with me:</p>
<blockquote class="ky"><p id="3ca6" class="kz la gl bf lb lc ld le lf lg lh jr dx">“I just can’t figure out what to do next. I’m so stupid.”</p></blockquote>
<figure class="lj lk ll lm ln kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx">Via <a href="https://stock.adobe.com/contributor/206424779/mary-long?load_type=author&amp;prev_url=detail" class="ed kx" rel="noopener nofollow">Mary Long</a> on <a href="https://stock.adobe.com/" class="ed kx" rel="noopener nofollow">Adobe Stock</a></figcaption></figure>
<p id="3250" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">When attempting to fill out onboarding paperwork for a new doctor appointment, Alex was stuck trying to upload a form. After taking a look, I could tell that the website had some form of server error, as my typical troubleshooting didn’t do the trick. She would need to try again in the morning or go to the appointment early to fill out all the remaining steps.</p>
<p id="e9bf" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">As soon as I said that, she spoke even more shakily. “I’m sorry I couldn’t figure it out. I guess I don’t understand these things. They said the online forms are required and I don’t want to break the rules.” Not only had her anxiety been heightened due to feeling inadequate, but she was also now going to struggle with anxiety all night about how she now needed to leave work even earlier than before, and how she was going to get on the receptionists’ bad side by not following the request for new patients.</p>
<p id="7dc8" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">Two things here: One, yes the world is significantly digital, but alternatives are still needed. Not only is it a necessity for accessibility in general, but also various mental health conditions and their side effects (insomnia, headaches, fatigue, blurry vision…), can make digital forms much more difficult. Temporary disability can come in many forms.</p>
<p id="15bd" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">Two, distinguishing between a technical glitch and human error is essential. Without proper error states and messaging explaining the cause and next steps, some may be completely at a loss, and continue to beat themselves up for thinking they made a mistake. And if it was human error, tell them nicely exactly how to fix it, or better yet see what you could do to prevent it in the first place.</p>
<blockquote class="ky"><p id="7bfd" class="kz la gl bf lb lc ld le lf lg lh jr dx">“I don’t even know if I have an account. I can’t believe my memory is so bad.”</p></blockquote>
<figure class="lj lk ll lm ln kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx"><a href="https://www.freepik.com/" class="ed kx" rel="noopener nofollow">Designed by slidesgo / Freepik</a></figcaption></figure>
<p id="d1ff" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">There is absolutely no way we can expect users to remember every account they’ve ever created, especially when so many websites make us create them nowadays — all with different username and password requirements — and some for platforms we use maybe once a year or less, some we create in the middle of another longer form, others are created for us by our employers or other affiliations.</p>
<p id="2084" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">I personally wouldn’t survive a day online without Chrome password autofill. But not everyone is comfortable with that setup or knows how to enable it. So yes, of course Alex forgot that she made an account 2 years ago for her vision insurance and didn’t save the information anywhere.</p>
<p id="b5d2" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">But from her perspective, it was her own fault, and it contributed to the story she tells herself that she’s not smart and has a bad memory. Not the company’s fault for requiring a username other than an email, a password with 5 different requirements plus it couldn’t be repetitive of your last 10 passwords, and a quadrillion-step process to reset your credentials.</p>
<h2 id="cb00" class="lr ls gl bf lt lu lv hm lw lx ly hp lz hq ma hs mb ht mc hv md hw me hy mf mg hi">Her entire body stiffened when she got to a marital status question.</h2>
<figure class="jy jz ka kb kc kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx">Via <a href="https://stock.adobe.com/contributor/205137184/rosinka79?load_type=author&amp;prev_url=detail" class="ed kx" rel="noopener nofollow">rosinka79</a> on <a href="https://stock.adobe.com/" class="ed kx" rel="noopener nofollow">Adobe Stock</a></figcaption></figure>
<p id="7b49" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">“I don’t understand why they need to know that,” she said, her voice cracking. She shakily pressed the accurate choice and I could hear her breath quicken. I couldn’t give her a good response — “Maybe they’re gathering demographic data for marketing” wouldn’t have cut it.</p>
<p id="59cd" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">I imagine others may feel the same pulse-quickening on questions about gender, income, race, education level, religion, sexual preference — any topic where there may be historical oppression or judgment, fear that the selection may negatively impact the outcome of the form, or even any other information that someone may not like to think about or reveal about themselves. In some circumstances these questions are necessary, but could they be optional? Could there be a “prefer not to say” option? Could you explain why you need the information? (If you can’t, maybe a sign to kill the question).</p>
<blockquote class="ky"><p id="f40a" class="kz la gl bf lb lc ld le lf lg lh jr dx">“Why can I never get this right? Why are things so hard for me?”</p></blockquote>
<figure class="lj lk ll lm ln kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx">Via <a href="https://stock.adobe.com/contributor/206783960/oksana-stepova?load_type=author&amp;prev_url=detail" class="ed kx" rel="noopener nofollow">Oksana Stepova</a> on <a href="https://stock.adobe.com/" class="ed kx" rel="noopener nofollow">Adobe Stock</a></figcaption></figure>
<p id="45a2" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">My heart sinks hearing these words over and over again over the last few years. From invalid credentials, to expired email links, to confusing password reset flows, to glitchy and lengthy forms, to jargon-filled websites, I know the majority of issues Alex has worked through with me have all been outside of her control. And I try to tell her that, but her anxiety doesn’t let her see it that way. She truly believes everything she’s struggled with is her fault, and with each failed click of a button, her anxiety continues to worsen.</p>
<h2 id="5265" class="lr ls gl bf lt lu lv hm lw lx ly hp lz hq ma hs mb ht mc hv md hw me hy mf mg hi">What Alex can teach us</h2>
<p id="c5b0" class="ja jb gl jc b hk mk jd je hn ml jf jg jh mm ji jj jk mn jl jm jn mo jo jp jr ge hi">It’s easy to engage in self-referential design and make decisions based on how we and our teams typically interact with products in a positive mental state. But when we do so, we’re further alienating those unfamiliar with or anxious around technology, instead of bringing technology closer to their needs.</p>
<p id="7822" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">Think about what you know about your users — What other areas in their lives could be putting strain on their emotional and mental state? What platforms are they familiar with? What level of education do they have around your product content and services? What are all the possible ways, both in and outside of the product’s control, the happy path could take a southern turn?</p>
<p id="5a9c" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">With these in mind, there are infinite items to consider when designing. Just a few that could be a good start:</p>
<ul class=""><li id="71fb" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr mp mq mr hi">Prepare for both system failure and human error, and respond to each with the same level of clarity.</li><li id="f6f6" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Tell users when it’s not them, it’s us.</li><li id="46c8" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Microcopy is king.</li><li id="9a6f" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Only request information you absolutely need.</li><li id="bc6d" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Write as if you’re talking to a 5th grader.</li><li id="3c4b" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Make the effects of an action crystal clear. And make sure you can undo it too.</li><li id="350c" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">There’s rarely a step of an interface that doesn’t require both feedback and guidance on next steps.</li><li id="d2b8" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">For any essential task, two channels (web, phone, email, chat, paper, etc.) are better than one.</li><li id="4cec" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Make sure every email link, social link, SMS, direct mail piece — anything your product puts out there — all talk to each other.</li><li id="0044" class="ja jb gl jc b hk ms jd je hn mt jf jg jh mu ji jj jk mv jl jm jn mw jo jp jr mp mq mr hi">Just keep thinking and learning about the topic— “A web of anxiety: accessibility for people with anxiety and panic disorders <a href="https://www.tpgi.com/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-1/" class="ed kx" rel="noopener nofollow">Part 1</a> and <a href="https://www.tpgi.com/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-2/" class="ed kx" rel="noopener nofollow">Part 2</a>” has some fantastic insights.</li></ul>
<p id="cb29" class="ja jb gl jc b hk js jd je hn jt jf jg jh ju ji jj jk jv jl jm jn jw jo jp jr ge hi">These details of the experience matter — not just for quality products and overall happy customers, but also for alleviating any possible sliver of anxiety for someone that we can. Good experiences make good days better and bad experiences make bad days worse — that’s true for all of us. And for those of us whose bad days are frequent and made up of irrational negative thinking and worry, let’s not add another bad experience to their plate. Even the smallest straws can break the camel’s back, and I’d prefer to deliver products that help lift the weight.</p>
<figure class="jy jz ka kb kc kd fr fs paragraph-image"><figcaption class="kt ku ft fr fs kv kw bf b bg bh dx">The UX Collective donates US$1 for each article we publish. This story contributed to <a href="https://www.wcd.school/" class="ed kx" rel="noopener nofollow">World-Class Designer School</a>: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.</figcaption></figure>
</div>
</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>