From its earliest days, Macs established an interesting convention – whenever you press a keyboard shortcut to an action that’s somewhere in the app menu, the matching top menu label blinks quickly.
Here, I am pressing ⌘A (Edit > Select All), followed by ⌘+ (Format > Font > Bigger), and then ⌘B (Format > Font > Bold):
I believe this is meant to help you connect those things better. While you might not need a map to an action that you already know a shortcut for, it might be helpful to tell you where to find other actions like it.
I imagine it also helps whenever you press a wrong shortcut – or the right shortcut under the wrong circumstances – and you want to deduce what happened or what was meant to happen. Knowing roughly where a command “lives” makes it easier to open the menu and look for it, even if you might still have to dig through all the submenus.
Recently, I spotted the programming editor Nova use a parallel technique. In its command palette, commands show their keyboard shortcuts, but if they’re hiding in submenus – also their menu path:
I am not sure how effective either of these techniques is, and both can feel a bit… busy. But they also appear thoughtful – we’re all spatial creatures, and I imagine helping you visualize a map of the entire system of commands can make it easier for you to feel at home.
Some years ago, the inimitable channel Technology Connections posted a 17-minute video about the peculiar design quirk of ceiling and room fans – they usually order their options Off → High → Medium → Low rather than the more natural Off → Low → Medium → High. The video is a bit off topic for this channel, but check it out if you’re interested how sometimes weird physics considerations influence design in the real world:
In the video, the host also talks about the more natural order that typically looked like this:
I wonder if you recognize this kind of an interface. I have a distinct memory of it from radios (where “zero volume” would mean “off”) and from TVs/early computer displays (where “zero brightness” meant “off,” too). There was something special about these controls that stuck in my memory, motor and otherwise: this tangible, heavy click when you ventured outside or back into “off,” almost as if you had to break the interface itself.
I thought this, too, was a convention from an old analog time. Yet, I keep occasionally finding the “the first notch is special” interfaces on screen.
Sometimes, they are pretty literal translations of the concept, like when you adjust the key repeat rate in macOS:
Or, similarly, when you choose the dock magnification:
But sometimes they are a bit more conceptual. Here, Nova treats the first notch of the zoom scale as a “list” option:
Or: The new horizontal tabs in Chrome allow you to resize to whatever width you want. Below 125px, however, they snap directly to the minimum 55px width, a one-off “column view” with streamlined and purely iconographic controls:
These all have pros and cons, too.
On the con side, just like the fan or volume controls, they miss any memory since turning them off physically moves the knob away from any “value”; if on/off was a separate button, you could just leave the radio at your preferred volume and never touch it again. They also won’t be as discoverable as a separate onscreen toggle would be. (Here’s an example of a more classic treatment from the Nothing Phone.)
Pros? They are compact. They allow you to change from “off” to a value in one quick gesture, skipping an explicit “on” step. You could even argue they are simpler also in a visual sense.
But also, they are a bit… magical. I don’t know. That’s what to me unifies those old physical controls and their newer digital equivalents – they’re a little extra, a little different, a little special. They break the monotony of a predictable interface built out of boring, identical components. (Although, sadly, not a single onscreen example above uses haptics!)
And I think that’s kind of nice. Not just in the very functional sense of breaking up the UI through shape coding etc., but also in a sense of making UIs more interesting.
Speaking of volume, macOS used to show it as a sort of a HUD, using a treatment that borrowed from both the “first notch is special” radio knobs, and from early onscreen interfaces in TVs:
But after 20+ years, macOS Tahoe changed it so it now looks this way:
I can understand the argument that this is more consistent, and that it even teaches you – by proximity – that Control Center is what these controls call home. Yet I can’t help but think (and it seems I am not alone) that this is so boring and exactly how Windows would approach things – and that this change, just like the squared icons, is how macOS lost one more bit of magic.
A nice blog post by Nathan Manceaux-Panot on Pending Design about the subtle design of the tabs underneath the search results in the programming editor Nova:
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.
The tabs are clickable as they normally are, but they’re also a treasure map (to tell you something is possible), a cheat sheet (to remind you how to do it again), and an onramp for faster keyboard navigation.
I’d add two more things to the celebration:
I myself often forget onboarding is not just about the first run, but also about reinforcement. Here, this UI does a lot of reinforcing over time, helping you build the habit. Pressing the key highlights the tab. Clicking on the tab adds a key as if you pressed it, and so does using an advanced shortcut (e.g. ⌃⌘O instead of ⇧⌘O). Even slash as a symbol comes from path names, so you might naturally associate it with files.
The search pop-up always has a nice contrasty appearance: dark when the background is light, or vice versa. Many modern interfaces go for white background for every UI element and surface. This seems like solely an aesthetic choice, but has more consequences when it comes to visibility of things, and even hierarchy. I am personally always excited when I see a duochrome app these days, because it feels like the team knows what they’re doing and isn’t just chasing visual trends. (Below is an example from Bear.)
What are you favourite well-made apps or sites? Phones and computers alike.
Doesn’t have to be “pretty,” but well-made according to whatever definition works for you.
I specifically made it kind of vague, and these are the answers I got. I grouped them into categories and added links. I am excited to dig into these and study them, but wanted to share a raw list as well in case this inspires some of you, too.
Thank you to everyone who participated! (Numbers in circles like ② or ③ mean more than one person nominated a given site or app.)
Info sites:
Ian’s Shoelace Site ② “A «does one thing well» site. Great breadth and depth. Information architecture designed to help you discover/find information, not sell you something. Loads fast. Still maintained after decades.”
SCELBI Computer Museum. “Useful, tightly curated, organized, loads fast, no BS. A basic bootstrap thing, but there’s something magical about it. Small enough to be digestible in an hour, well set up for either research or just cool vibes . Partly bc subject itself is «small» but seems not only that.”
“I’m in love with Maggie Appleton’s site. The general design and the illustrations, the content (from quick notes to polished essays), the way it creates a visual and conceptual taxonomy with the #digitalgarden concept.”
Mimestream ③ “It basically stays out of my way? Which is about as good as it gets these days. Also, it has just enough customization options to handle my sometimes complex number of gmail accounts (personal/work, for various clients, etc.)”
Things ② “The fanciest, most attention-to-detail software I know of.”
Sup “Pretty niche. I’m thinking specialist interfaces for specialists here. Tools that become an extension of their users’ bodies and disappear in te use”
McMaster-Carr ④ “The best online catalog.” “Impossibly fast. Still in awe after all these years.” “It supports your cognition, including with contextual material, to find the thing you are looking for (or the thing you didn’t know you were looking for until you started looking). It helps you find the right part because of what they show, the right filters, and especially the contextual information (I think about the little scale they had to explain the different hardnesses of rubber, for example).”
Cars&Bids. “Fast, functional, and easy to use. Not stunning, just utilitarian.”
iA Writer ② “Simple and effective, using it I always wish to write more but I forget it again.” “Has been consistently great for years.”
“I’ve been using Bear ② by Shinyfrog for my notes for well over a decade now. Dependable, works great, no junk ware, and a reasonable price. Pretty to boot. The fact that in the 10+ years I’ve been using it, there’s only been a single major overhaul update is a feature, not a bug to me.”
“Notability! Haven’t found anything else that matches the flexibility for handling imported files & photographs, typed notes, hand-drawn diagrams and mark-ups completely seamlessly within a single document. Unbeatable for handling both notes in class (uni) and on site (trade).”
“Been using OmniOutliner daily for decades. Simple, focussed and matches the way I think. Lots of ways to make lists and outlines but this one works for me.”
“The radio station WFMU streams online, and also has a website where you can log in to chat with other listeners and interact with the playlist. The degree to which it does what you want it to do is stunning. It doesn’t get in your way or make you learn a new paradigm; it just makes it easy to do what you want to do. It’s a lesson in design for any UI/UX people.”
Ishkur’s Guide To Electronic Music. “This website maps out all the sub-sub-sub-genres of electronic music, with descriptions and samples. I think that the fine-grained classifications are comical, but they do an excellent job of what they’re doing.”
“Easy Metronome is a simple elegant loud phone metronome that is super easy to use even for weird time signatures.”
“Pro Metronome is also excellent. I’ve used it for over 10 years and it stubbornly refuses to abandon its skeuomorphic leather and big clicky scroll wheel”
“I really appreciate the Apple Music Classical app (even though it exists in this odd liminal space beside Apple Music) having spent many years frustrated about how traditional music streaming services handle classical recordings.”
“I‘m travelling with Deutsche Bahn quite frequently, and while their own App (DB-Navigator) is quite good compared internationally, I prefer to track trains on Bahn Experte for its bare, technical and valid information and performance.”
“The Man in Seat 61 is a goldmine for train travellers. At least in Europe, the information is really up to date and if you want to find pictures of the sleeper cars of the Romanian railway or the seat map of Prague - Berlin trains, it’s all there.”
“The kiosks in Costco’s food court aren’t the prettiest to look at but they are S tier for responsiveness. You literally just press a button and immediately the item is added to your cart. You can order a hot dog and soda in under 5 seconds.”
“WebWormhole for functionality, encrypted data transfer between your devices or to your friends without installing anything. (There’s also a similar magic wormhole CLI tool.)”
PairDrop. “Drop-dead easy file sharing on the local network.”
“LocalSend is well made, because until sofar it aleay works, even when AirDrop doesn’t. And it also works on non-Apple environments.”
Other nerdy tools:
RegExr. “A web-based tool to create or explain regular expressions.”
“The Sway compositor. A keyboard-driven tiling window manager with dynamic tiling layout. I can’t even imagine trying to use a computer with floating, overlapping windows anymore; everything lines up perfectly and adjusting layout is a matter of a few extremely quick keyboard shortcuts. They take a concept—laying out multiple windows on a display without gaps or overlaps—and build a fast, coherent interface around that concept, and it works fantastically.”
“The original HP 42S calculator packed a lot of power into a convenient and ergonomic enclosure, and Free42 is a very tasteful recreation and expansion of that device for modern platforms.”
“The Kanji Study dictionary on Android has a wild amount of polish, I’m consistently impressed by how much effort has been put into it, especially because it’s sold for a (admittedly high) one-time fee.”
One thing I really admired in earlier versions of Windows was the thing that was also its weak point: the keyboard orientation.
I miss the old tradition in Windows where many commands had underlined letters, and you could simply press Alt and that letter to jump to it:
If I remember correctly, eventually this got simplified so that the underlines were only there when you held Alt (although I bet there was an option to keep showing it all the time).
Opening Windows 11 today, it feels like the system got less elegant. I can still press Alt and stuff happens, but it doesn’t look nearly as good or tightly integrated, and the two alternate entry points (Alt and the keyboard shortcuts) become muddled:
In the meantime, on a Mac, in various places apps reinvent the wheel by their own thing.
I just saw this in Nova, the code editor, which is very thoughtful; those shortcuts only exist within this dialog (and one wonders if they couldn’t just be letters without modifiers)?
A little more old-fashioned from Photoshop, and the same question: could they just not be digits, without requiring ⌥?
Previously, I mentioned yet another idea from DevonThink.
I appreciate these gestures toward moving faster via a keyboard, but I wonder if we lost something that already used to work well in old Windows.
