davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="de">
<!-- 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>In Praise of Buttons (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)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- 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://www.nubero.ch/blog/009/">

<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>In Praise of Buttons</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://www.nubero.ch/blog/009/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-28
    </p>
  </nav>
  <hr>
  <p>Form is Function in Graphical User Interfaces</p>
<p class="paragraph">
In any design discipline there are always certain trends. One of these trends seems to be that buttons are now considered uncool. It doesn’t matter if they are buttons on physical objects or in graphical user interfaces.
</p>

<p class="paragraph">
Buttons aren’t new. And for exactly that reason, they are uncool. Like hammers and paperclips, they have been around for a long time and they work. In fact, they have been around for a long time <em>because</em> they work.
</p>

<p class="paragraph">
That is a problem if you’re a dishonest designer. After all, how do you tell your client that you’ve just reinvented the wheel? You can’t just use boring old buttons in your shiny new product. So what do you do? You redesign the look or the function of a button (or both) and sell it as “the newest development in design” – totally dis­re­gar­ding the needs of the user and compromising your integrity as a designer along the way.
</p>

<p class="baumedium">Buttons on Screens</p>

<p class="paragraph">
In graphical user interfaces, we have seen an increase in buttons recently that consist merely of text or icons, without a clear, visible button shape being present. This insipid, uninspired mediocrity, exemplified by Google’s “Material Design” or – even worse – IBM’s “Carbon Design System”, was popularised by Apple’s iOS 7 and its equally miserable “Flat Design” aesthetics. This lazy minimalism is often considered modern and streamlined, but we must ask: Is it also user-friendly?
</p>

<p class="paragraph">
The answer is clearly: No, it is not!
</p>

<p class="paragraph">
Consider the image below: In the first row we see a series of icons that are supposed to be buttons. The only way you could potentially recognise them as such, however, would be if they were implemented in a user interface. So it is in fact only the <em>context</em> that lets you recognise them as buttons, not their <em>appearance</em> by themselves.
</p>

<p class="essaynote">Two rows of buttons. Which appear more inviting to interact with?
</p>

<p class="paragraph">
Compare the icons in the upper row with their counterparts in the lower row. Here, these same icons are embedded in button shapes. This does several things at the same time. First, the button shapes act as <em>signifiers</em>. That means that they let the user know that an action can occur there. The icons in the upper row do no such thing. They don’t commun­icate their ability to be pressed – to be <em>used</em> really – in any way.
</p>

<p class="paragraph">
How important signifiers are becomes clear when you look at the physical objects around you. Take the Swiss Army Knife in the picture below for example. The small groove that you see in the main blade (and in almost every hinged tool of a Swiss Army Knife) is called the “nail nick”. Not only does this nail nick allow you to insert your finger­nail and pull the tool out, it also <em>looks like it allows for precisely that.</em> Pay attention to its exact shape too. It mirrors the slight curvature of a fingernail. And it doesn’t stop there: The angles of the walls <em>inside</em> the groove are contoured in such a way that your fingernail is guided deeper into the nail nick, ensuring a secure hold for pulling.
</p>

<p class="essaynote">This is the nail nick in the main blade of a Swiss Army Knife. It gives the user a clue that an action can occur here and that this action probably involves a fingernail.
</p>

<p class="paragraph">
This should make it clear why there is a reason that the virtual buttons in our graphical user interface should indeed look like buttons: They should commu­nicate that they can be used. When they just look like icons, they don’t do that.
</p>

<p class="paragraph">
Look at the image of the buttons once more, and this time, try to find groups that belong together. The icons for plus and minus and for left and right for instance form two groups while the magnifying glass stands separated. In the lower row, where the buttons have uniform shapes, it’s easier to notice the differences in spacing between them.
</p>

<p class="paragraph">
There is another thing to consider. Take a look at the next picture.
</p>

<p class="essaynote">The buttons in the upper row not only <em>communicate</em> what they do badly, they <em>function</em> badly as well.
</p>

<p class="paragraph">
The pink colour shows where a button can actually be clicked or touched, that is to say, it shows the region where the software will register an input. In the upper row, that is quite a small area if you think of it in terms of square-pixels. That being said, the clickable area in mouse-interfaces <em>might</em> sometimes be the same in the upper row as in the lower row. In touch interfaces however, that is often not the case. There, the actual outline of the graphic – let’s say the minus – is often the only thing that can be touched. So when you quickly tap your screen and don’t hit the target precisely, you might completely miss the button.
</p>

<p class="baumedium">Text in Buttons</p>

<p class="paragraph">
The importance of button shapes becomes even more apparent, when the buttons are actually just words, not icons. The example below shows the Terms and Conditions of an iOS update. You can see that the two words, “Agree” and “Disagree”, don’t stick out too much in an environment that already has a lot of text in it. Apple’s way of showing the user that the two words are actually buttons is done solely with colour. The default option of agreeing is also not differentiating itself enough from the disagree option. The only difference is a slightly bolder (but not really bold) typeface. And lastly, speaking of type­faces, the one that Apple chose – specially designed actually – is also not the best for user interfaces.
</p>

<p class="essaynote">Everything that can go wrong, will go wrong: The people who designed this blindly followed the notion, that removing everything they perceived as ornamental would result in simplicity.
</p>

<p class="paragraph">
Now compare the example from Apple above with my redesign below. Look at the difference that the button shapes and a better choice of typeface make. The typeface in question is called “FF Unit” and has less ambiguous letter shapes than Apple’s “San Francisco”. Granted, this is less important in long text than it is in individual words, but since we want the same typeface for both our buttons and the legal text, choosing a typeface <em>like</em> FF Unit becomes rather obvious. Lastly, I used a slight shadow to set apart the scrollable text of the Terms and Conditions from the surrounding interface. This too makes for a better visual distinction between the different elements on screen.
</p>

<div class="essaypicture">
    <img src="pictures/tcb.png" srcset="pictures/tcb_2x.png 2x" alt="The Terms and Conditions redesigned"> 
</div>
<p class="essaynote">Just because a user interface uses 3D-buttons and some shading doesn’t mean that it has to look tacky. In fact, if you have to make the choice between tacky-but-usable and minimalistic-but-hard-to-use, tacky is the way to go. You don’t have to make that choice though: It’s perfectly possible to create something that is both good-looking <em>and</em> easy to use.
</p>

<p class="baumedium">Direct Manipulation</p>

<p class="paragraph">
The physical world that we evolved in is one where every action has an effect. When you push the coffee mug on your desk and it moves away from you, it will make a sound. You might also be able to see little waves forming in your coffee as the small vibrations from the mug sliding on the desk transmit to the liquid. All of this feedback is expected by our brain to come to us through our different senses.
</p>

<p class="paragraph">
Think about what this means: You will get haptic feedback through your fingertip, giving you information about weight, temperature and texture. There will be acoustic feedback from the ceramic sliding on your desk. And you will get visual feedback from seeing your finger and the mug moving, and the little waves on the surface of the coffee. Since our brain builds a model of the world and then compares reality to it, these different feedbacks are both <em>expected</em> and <em>interconnected</em>. It would be extremely weird, for example, if the mug did not make any noise at all while it slides across the table or if the liquid wouldn’t move inside the mug.
</p>

<p class="paragraph">
A button in a graphical user interface that has no button shape will likely give you no feedback either. While it might actually have an alternative state that gets activated when you touch it (a change of colour for instance), you are probably going to obstruct that with your finger. This is another advantage of buttons that look like buttons. Because they usually stick out from under a fingertip, you can see the press-down animation clearly. Direct feedback from direct manipulation. See the animation below:
</p>

<p class="nubero-video">
    <video autoplay muted loop playsinline preload="metadata" poster="pictures/buttons_a_2x.png">
        <source src="videos/hand.mp4" type="video/mp4">
    </source></video>
</p>
<p></p>
<p class="essaynote">While the user cannot be sure that his tap on the upper arrow was registered by the device (and might therefore try multiple times), the “button depressed” state of the 3D-button signals to him that his action was successful.
</p>

<p class="paragraph">
Why is this important? First of all, it should be self-evident that a feature of the world that our brains evolved around, namely feedback, should not be removed just to satisfy a fashionable trend. As mentioned above, we expect some sort of feedback from practically everything in the world. But there’s another thing to consider: The button you just pressed might make some webpage load or do something else which will take a second or more before its effect is apparent. While you wait for that to happen, a button that showed you that it got pressed – that gave you feedback – is going to give you reassurance that you actually tapped it correctly.
</p>

<p class="paragraph">
Visual feedback is, of course, just one way to solve this. Acoustic or haptic feedback also works well. Even better is a combination of these. Remember the coffee mug, whose weight and vibration you can feel, while you also see it moving and hear it sliding across the table. This sort of multi-sensory feedback is what you should be going for – if the circumstances allow it.
</p>

<p class="nubero-video">
    <video autoplay muted loop playsinline preload="metadata" poster="pictures/iphone-album_2x.jpg">
        <source src="videos/iphone_album.mp4" type="video/mp4">
    </source></video>
</p>
<p></p>
<p class="essaynote">One last example: In this video, you can see the Photos app as it appears in iOS 17, alternating with a redesign done by me. Apple is using lazy button shapes for “Select” and the ellipsis character (…) on the right. On the left however, the button for going to your albums is just the word “Albums” and a little arrow shape. Why those two different concepts on the same screen? In the redesign, everything that works like a button also looks like one. This, in my opinion, is how it should be done.
</p>

<p class="baumedium">Misguided Sentimentalism?</p>

<p class="paragraph">
Critics of my position may point to what they believe is some sort of sentimentalism for old user interfaces on my part. It’s true that the problems I point to in this piece are of the kind that I consider solved in many of the older user interfaces. That has nothing to do with being sentimental however. Products have to work properly. If a button is the right choice, use a button. If it’s not, don’t. But if you are going to implement a design element that <em>works</em> like a button, it should <em>look</em> like one too.
</p>

<p class="barbottom"></p>
<ol>


</ol>

<p class="bartopbottom"></p>

<p class="postscript">
Does <em>every</em> virtual button – every button in a graphical user interface – have to look like a pressable, physical 3D button? Of course not. They also don’t need to look exactly like my redesigns either. On a case-to-case basis it might even be better to do something else entirely.
</p>

<p class="postscript">
The whole idea is to reduce cognitive load. And since the brain works by recognising patterns and dividing the environment up into areas, this reduction is best done by making elements with different functions appear markedly distinct from one another. It is, in other words, a fallacy to believe, that the brain has an easier time if everything looks “simplified” in the way which happens with the flat design doctrine. The opposite is the case.
</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>