#command palette

Command palettes that allow you to quickly execute and browse all the commands / 2 posts

Newsletter
  • Get a newsletter digest every Friday:
Contact

Send me feedback, tips, bug reports, and anything else:

About me and the blog

My name is Marcin Wichary (he/him). I’ve worked as a UX designer, typographer, front-end person, and manager at Google, Medium, and Figma. I’ve also written a book about keyboards and typing, gave talks, and published essays about design, typography, and technology.

Unsung is my blog about software craft and quality.

More info about Unsung

Send me feedback, tips, bug reports, and anything else:

More info about Unsung

An unexpected command palette

When I linked to the troubled New York City/Big Apple Game, at the very bottom I mentioned a web emulator of Atari I just discovered, called A8 Web.

What was particularly interesting about this emulator that I haven’t seen before, is that it came equipped with a ⌘K command palette:

I didn’t expect this kind of a professional UI in such a small piece of software, but I immediately embraced it – it not only gave access to various expected commands like “mute audio” or “resume emulation,” but also allowed to simulate all of the inputs. One of the challenges with emulation is that keyboards never match, special buttons like Start or Select don’t exist, and joysticks might not be connected. That might leave you truly stuck when the key absolutely need to keep going simply isn’t something you can press. Here, the creator thoughtfully adding all of those inputs to the command palette got me unstuck quickly.

I am generally a big fan of command palettes as a UI layer underneath more visible layers. They are a nice way to enable flow, an interesting vector of discovery (just browsing the list above taught me a lot about what’s possible), and a good place to stash lesser-used commands that do not deserve more prominent places like menus or on-screen buttons. Done well, they’re useful with the keyboard and with the mouse. Some old professional apps like Photoshop that didn’t bother to update their core interface feel extra obsolete without a command palette today.

A8 Web’s implementation isn’t perfect – it should probably be floating atop the emulated screen rather than sliding in from the side, and I would make the input commands not auto-close the sidebar – but it was such a positive surprise that made me rethink some things I thought I knew about command palettes.

Nova’s menu wayfinding

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.