Another Button

There are 14 buttons in this image:

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.

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’s 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.

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.

Then I found the “🞂 Action” button styling a very effective choice. In case your computer cannot render this character: it is Unicode U+1F782 “Black Right-pointing Isosceles Right Triangle”.

These are the virtues:

• The buttonness is expressed by a lexical element generally meaning “to execute”. 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 “play” button.
• 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.
• The hover and click feedbacks have little influence over the interpretation of the element.
• It does not imply the presence or absence of side effects. This is solely indicated by the text content.
• You can replace the “🞂” 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.

Here are some examples you can click on:

Delete conflicts
Ignore

You need to create an empty database before proceeding. Next, select it in the management interface.

The dimensions were made to fit Segoe UI (Windows 8+). You are invited to have a peek at the CSS.

Now let’s discuss its sibling, “Action 🞂”. 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 “Action 🡪”. I would not use them as the usual button because it is forcing, not modest. You read the “🞂” prefix before reading the action text. The “🞂” announces that an action is coming next, inviting your scrutiny. The postfix “🞂” 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.

“Action 🡪” also does not appeal to left alignment. Worse, if an “Action 🡪” 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 “OK” 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 “🡪” usually means proceeding with all existing work done and saved, a more specific meaning than the generic button.

The only apparent conflict with “🞂 Action” 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? I want to know which sense dominates your perception of “🞂 Action”: “play/execute” or “expand”?

Finally, I am not opposed to wrapping a good button in a box to make it more prominent.

Navigation Buttons

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.

If I show you “🞂 Thing”, or Thing, or even Thing, 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 “Show Thing”. But cases are complicated and the dichotomy I proposed is not universal.

A hyperlink may wish to be presented as “↱ Place”, following the spirit of “🞂”. The last button in the example above was a hyperlink, and you can imagine this being used there.