{"id":1372,"date":"2023-12-30T10:19:01","date_gmt":"2023-12-30T10:19:01","guid":{"rendered":"https:\/\/www-users.tebibyte.io\/~yihanwu1024\/?p=1372"},"modified":"2024-04-14T08:24:03","modified_gmt":"2024-04-14T08:24:03","slug":"another-button","status":"publish","type":"post","link":"https:\/\/www.tebibyte.io\/~yihanwu1024\/2023\/another-button\/","title":{"rendered":"Another Button"},"content":{"rendered":"\n<p>There are 14 buttons in this image:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"180\" src=\"https:\/\/www-users.tebibyte.io\/~yihanwu1024\/wp-content\/uploads\/2023\/12\/image.png\" alt=\"\" class=\"wp-image-1374\" srcset=\"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-content\/uploads\/2023\/12\/image.png 401w, https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-content\/uploads\/2023\/12\/image-300x135.png 300w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure>\n\n\n\n<p>12 of them are icons, and 2 are text. A professional tool probably has way more text buttons, because they are too abstract and specific to have an icon.<\/p>\n\n\n\n<p>When designing interfaces following <a href=\"https:\/\/berkeleygraphics.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">an engineering spirit<\/a>, I found the usual bordered\/backgrounded button too intrusive for dense (read: professional) scenes. Professionals do NOT want CTA\u2019s everywhere. But wait: why do we have bordered\/backgrounded buttons in the first place? If that is due to all physical buttons having a shape, we ought to rethink the digital button.<\/p>\n\n\n\n<p>Underlined text is too ambiguous. It looks like hyperlink taking you somewhere else, a supposed navigation act. If the underlined button has a side effect, this is a violation of the norm. The user might feel strange then get used to it, but the spreading of this practice should be dangerous.<\/p>\n\n\n\n<p>Then I found the \u201c\ud83d\udf82 Action\u201d button styling a very effective choice. In case your computer cannot render this character: it is Unicode <a href=\"https:\/\/www.compart.com\/en\/unicode\/U+1F782\" target=\"_blank\" rel=\"noreferrer noopener\">U+1F782<\/a> \u201cBlack Right-pointing Isosceles Right Triangle\u201d.<\/p>\n\n\n\n<p>These are the virtues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The buttonness is expressed by a lexical element generally meaning \u201cto execute\u201d. This lexical element directly associates with the concept of action, not through an analog of the physical button. This sense should have come from the \u201cplay\u201d button.<\/li>\n\n\n\n<li>It can be used inline without being abrupt, or separately without being ignored, all with a consistent styling. This is not achieved by any other button. If inline, I want to mark up the button text so the scope of the button text is clear.<\/li>\n\n\n\n<li>The hover and click feedbacks have little influence over the interpretation of the element.<\/li>\n\n\n\n<li>It does not imply the presence or absence of side effects. This is solely indicated by the text content.<\/li>\n\n\n\n<li>You can replace the \u201c\ud83d\udf82\u201d with a more specific icon, but very few icons feel like verbs and this affects the sense of the whole button. More on this below.<\/li>\n<\/ul>\n\n\n\n<p>Here are some examples you can click on:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left\"><span class=\"n-button\">Delete conflicts<\/span><br><span class=\"n-button\">Ignore<\/span><\/p>\n\n\n\n<p class=\"has-text-align-left\">You need to <span class=\"n-button\" style=\"border-bottom: 1px solid;\">create an empty database<\/span> before proceeding. Next, select it in the <span class=\"n-button\" style=\"border-bottom: 1px solid;\">management interface<\/span>.<\/p>\n\n\n\n<p><small>The dimensions were made to fit Segoe UI (Windows 8+). You are invited to have a peek at the CSS.<\/small><\/p>\n<\/blockquote>\n\n\n\n<p>Now let\u2019s discuss its sibling, \u201cAction \ud83d\udf82\u201d. Intuitively, it feels like an even better option because the arrow points forward, suggesting that good things are going to happen next. A more extreme incarnation of this sense is \u201cAction \ud83e\udc6a\u201d. I would not use them as the usual button because it is forcing, not modest. You read the \u201c\ud83d\udf82\u201d prefix before reading the action text. The \u201c\ud83d\udf82\u201d announces that an action is coming next, inviting your scrutiny. The postfix \u201c\ud83d\udf82\u201d does the reverse, saying after the fact that you just read something you can do. It is similar to putting a bullet point after each point.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Delete conflicts \ud83e\udc6a<br>Ignore \ud83e\udc6a<\/p>\n\n\n\n<p>Delete conflicts. Consider doing that.<br>Ignore. Also consider doing that.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>\ud83d\udf82 Delete conflicts<br>\ud83d\udf82 Ignore<\/p>\n\n\n\n<p>You may do this: Delete conflicts<br>You may also do this: Ignore<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>\u201cAction \ud83e\udc6a\u201d also does not appeal to left alignment. Worse, if an \u201cAction \ud83e\udc6a\u201d is incidentally located at the end edge of a card\/window, it is easily interpreted as scoped over the whole card like a CTA or \u201cOK\u201d specifically because the arrow is the last element and pointing outside of the card. (Unless that is the correct interpretation, in which case I do not object.) Because \u201c\ud83e\udc6a\u201d usually means <em>proceeding<\/em> with all existing work done and saved, a more specific meaning than the generic button.<\/p>\n\n\n\n<p>The only apparent conflict with \u201c\ud83d\udf82 Action\u201d is tree expansion, but this conflict is a minor one: a node usually has a noun as its name, so this becomes equivalent to a navigation act. A real problem arises when a node has a verb as its name, but the chance is slim and we can even blame the tree: why would there be a tree of unquoted verbs? <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSe7OqTYrVM0yIRZNKenUQQ0kM5K-JA8vHZzUsk93pjUrVwZNQ\/viewform\" target=\"_blank\" rel=\"noreferrer noopener\">I want to know which sense dominates<\/a> your perception of \u201c\ud83d\udf82 Action\u201d: \u201cplay\/execute\u201d or \u201cexpand\u201d?<\/p>\n\n\n\n<p>Finally, I am not opposed to wrapping a good button in a box to make it more prominent.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Navigation Buttons<\/h2>\n\n\n\n<p>Where I categorized buttons into side-effective and non-side-effective ones above, I proposed a dichotomy. This might not be its best description, as I did not clarify what is considered a primary effect and side effect. My usage of these phrases were brought from computer science, where a side effect means the same thing as mutation. Navigation is said to be free of side effects because it does not mutate any business data, while non-navigation verbs do.<\/p>\n\n\n\n<p>If I show you \u201c\ud83d\udf82 Thing\u201d, or <button>Thing<\/button>, or even <a href=\"#void\">Thing<\/a>, you would expect a navigation act, that is, see the Thing (in greater detail) without side effects as you click on it. Thus the button text is equivalent to \u201cShow Thing\u201d. But cases are complicated and the dichotomy I proposed is not universal.<\/p>\n\n\n\n<p>A hyperlink may wish to be presented as \u201c\u21b1 Place\u201d, following the spirit of \u201c\ud83d\udf82\u201d. The last button in the example above was a hyperlink, and you can imagine this being used there.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When designing interfaces following an engineering spirit, I found the usual bordered\/backgrounded button too intrusive for dense (read: professional) scenes. Professionals do NOT want CTA\u2019s everywhere. But wait: why do we have bordered\/backgrounded buttons in the first place? If that is due to all physical buttons having a shape, we ought to rethink the digital button.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1372","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/posts\/1372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/comments?post=1372"}],"version-history":[{"count":0,"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/posts\/1372\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/media?parent=1372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/categories?post=1372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tebibyte.io\/~yihanwu1024\/wp-json\/wp\/v2\/tags?post=1372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}