Buttons not for clicking

Writing about how some of Retcon’s menus are purely informative a few days ago made me notice a similar example in Nova, Panic’s code editor for macOS.

Like many power-user apps these days, Nova has an “open quickly” palette:

Screenshot of a small, wide floating window. At the top, an icon of a folder with a magnifying glass, and an empty text field, with an “Open Quickly” prompt. Below the field, four buttons: “All”, “Files /”, “Symbols #”, and “Symbols in Open Tabs @”. Below that still, a label: “Type a filename or symbol to quickly open it.”.

Type a few letters, and you’re able to jump to any file, or symbol (an important element within a file):

The same window as before. In the text field, the word “release” has been typed. As a result, a list has appeared below the row of buttons: it lists various elements named “release”, a few CSS selectors like “.release > ul”, and a file named “releases.html”. Each element has an icon indicating its type, and the relative path of the file it is from, such as “press/Retcon Press Kit/Retcon releases.template.html”.

Through buttons right below its text field, the bar also lets you filter results: only show files, only show symbols, or only show symbols in current tabs. Here’s the thing, though: each one of these buttons has four distinct purposes. They’re not just for clicking.

First, they indicate that you can filter at all! If filtering was done through an app menu instead, it’d be a lot harder to discover. You wouldn’t go looking for a feature you don’t even know exists. So before you’ve even clicked one of the buttons, they’re already doing a useful job; their presence itself is documentation.

Second and most obvious, the buttons let you act. Click one and its filter is enabled:

The same window again, with no results, and a single “#” character in the text field. The “Symbols” button is toggled on.

Clicking the Symbols filter when the field is empty.

Straightforward, except for an unassuming side-effect: a # was inserted into the text field. That’s right: the third purpose of the button is to teach you how to stop using it, how to graduate to a faster interaction.

You can enable a filter just by typing the corresponding magic prefix, which is especially handy since your hands will be on the keyboard anyway. But once again, you first need to learn that this is possible at all. By inserting the prefix whenever you enable a filter, the buttons tell you that the two are inextricably linked; they suggest that you could have typed the prefix yourself. No tutorial text, no need to go read a manual; just by using the app, you’re being taught not only what it’s capable of, but how to become faster at using it.

Finally, the button’s fourth and final purpose is what comes after all that. You’ve been taught about filters; taught about the magic prefixes; the button’s only job from now on will be acting as a cheat sheet. Each button displays the correct magic prefix in its label, acting as a reminder of what it is you must type, conveniently displayed exactly when you need it (and only then). Once you’ve learned all of the app’s tricks, the buttons won’t ever see another click, and yet they remain useful; they supplement your memory, lowering the cognitive load of going through the interface.