{"id":41856,"date":"2024-01-24T11:45:08","date_gmt":"2024-01-24T16:45:08","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=41856"},"modified":"2024-02-21T14:51:44","modified_gmt":"2024-02-21T19:51:44","slug":"in-praise-of-buttons","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2024\/01\/24\/in-praise-of-buttons\/","title":{"rendered":"In Praise of Buttons"},"content":{"rendered":"<p><a href=\"https:\/\/www.nubero.ch\/blog\/009\/\">Niko Kitsakis<\/a>:<\/p>\n<blockquote cite=\"https:\/\/www.nubero.ch\/blog\/009\/\">\n<p>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&rsquo;s &ldquo;Material Design&rdquo; or &#x2013; even worse &#x2013; IBM&rsquo;s &ldquo;Carbon Design System&rdquo;, was popularised by Apple&rsquo;s iOS 7 and its equally miserable &ldquo;Flat Design&rdquo; aesthetics. This lazy minimalism is often considered modern and streamlined, but we must ask: Is it also user-friendly?<\/p>\n<p>[&#8230;]<\/p>\n<p>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.<\/p>\n<\/blockquote>\n\n<p id=\"in-praise-of-buttons-update-2024-01-30\">Update (2024-01-30): <a href=\"https:\/\/pxlnv.com\/blog\/in-praise-of-heart-and-soul\/\">Nick Heer<\/a>:<\/p>\n<blockquote cite=\"https:\/\/pxlnv.com\/blog\/in-praise-of-heart-and-soul\/\"><p>One objective of the visual interface language introduced in MacOS Big Sur was, <a href=\"https:\/\/www.youtube.com\/watch?v=NVT5oQ_6_hU&amp;t=32s\">according to Alan Dye<\/a>, to &ldquo;[reduce] visual complexity to keep the focus on users&rsquo; content&rdquo; which meant, for example, that &ldquo;buttons and controls appear when you need them, and they recede when you don&rsquo;t&rdquo;.<\/p><p>In practice, it means interfaces become ambiguously interactive. A design system of line art glyphs floating in detail-free window chrome makes it easier to create light and dark themes, but it also turns everything into a flavourless smear of grey tones.<\/p><p>[&#8230;]<\/p><p>This is not specifically an argument in favour of decorated, glossy, detailed user interface elements &mdash; though I do like those &mdash; but it is an argument in favour of craft. Of heart and soul.<\/p><\/blockquote>\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2024\/01\/24\/the-mac-at-40\/\">The Mac at 40<\/a><\/li>\n<\/ul>\n\n<p id=\"in-praise-of-buttons-update-2024-02-21\">Update (2024-02-21): <a href=\"https:\/\/www.nubero.ch\/blog\/010\/\">Niko Kitsakis<\/a>:<\/p>\n<blockquote cite=\"https:\/\/www.nubero.ch\/blog\/010\/\">\n<p>Now let&rsquo;s have a look at physical buttons in product (or industrial) design and what&rsquo;s happened to those in recent years. If you are strictly a UI\/UX designer in the context of design for screens, you should still read this article. In my view, the importance of the experiences of the physical world should not be underestimated when designing for screens. We use the same brain to make sense of both worlds after all.<\/p>\n<p>[&#8230;]<\/p>\n<p>What <em>really<\/em> happened here, I think, is that the marketing department got blinded by the idea of &ldquo;touch = good&rdquo; and forced the product people to build something along those lines. Probably saying things like &ldquo;good enough&rdquo; and &ldquo;we don&rsquo;t have the budget&rdquo; a lot during the process. What they ended up with is much worse than what could have been achieved with a clearly labeled mechanical dial and a latching start\/stop button.<\/p>\n<p>[&#8230;]<\/p>\n<p>\nContrast this with the touch surface of the tumble dryer: It offers no advantages whatsoever but actually combines the <em>disadvantages<\/em> of both worlds: A physical appearance that is fixed (since there is no bitmapped screen but just a lamp that lights up under each button) and a touch surface which, by definition,  isn&rsquo;t tactile (and therefore ambiguous and unsatisfying to use). Again, you cannot copy what you don&rsquo;t understand.<\/p>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Niko Kitsakis: 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&rsquo;s &ldquo;Material Design&rdquo; or &#x2013; even worse &#x2013; IBM&rsquo;s &ldquo;Carbon Design System&rdquo;, was popularised by Apple&rsquo;s iOS 7 and its [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2024-01-24T16:45:15Z","apple_news_api_id":"2bfb0336-0bce-4097-9d76-37a16f899d1c","apple_news_api_modified_at":"2024-02-21T19:51:47Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAQ==","apple_news_api_share_url":"https:\/\/apple.news\/AK_sDNgvOQJeddjehb4mdHA","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[77,31,30,96],"class_list":["post-41856","post","type-post","status-publish","format-standard","hentry","category-technology","tag-design","tag-ios","tag-mac","tag-web"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=41856"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41856\/revisions"}],"predecessor-version":[{"id":42188,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41856\/revisions\/42188"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=41856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=41856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=41856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}