Interface patterns worth knowing
Maggie Appleton’s patterns section is described on her home page as “Design patterns gathered from my own observations and research.” Each page follows the same shape: The Context, which names the tension the pattern resolves, then The Pattern, then often history, examples, and references. This section walks seven of them. The eighth in the same spirit, Command K Bars, is covered in A command menu with pages, alongside the component that implements it; her one-line description there is “Command line bars you can quickly summon with a keyboard shortcut.” The reason to know these patterns is not that you will ship all of them. It is that each names a behaviour users already want, with examples you can study, and a design engineer who can recognise the pattern can prototype it in an afternoon.
Programming Portals (October 2022) are, in her words, programming portals: “small, scoped areas within a graphical interface that give users access to command lines and text-based programming. They open a little window into the underlying functionality of an interface.” The context is the split of the mid-1980s, when the Macintosh made the GUI mainstream and “created two distinct categories: end users and programmers.” CLIs win on speed, space, and composability; GUIs win on visibility; and “When we confined end users to the GUIs and hid the command line away from them, we took away access to powerful primitives.” Her examples are HyperCard (“the grand OG example,” Bill Atkinson, Apple, 1987, with HyperTalk commands like find, calculate, and go to), Fermat, an early pre-launch version of Notion that exposed CSS and JavaScript to users, and Ink & Switch’s Inkbase, where “Any quickly scrawled doodle can be turned into a set of ad-hoc interface controls.” Her imaginary drawing app Drawper illustrates the point: a formula bar that sets a stroke conditional on size, which “wouldn’t have been conditional” through colour pickers alone. “This is the power of programming. We’re writing dynamic rules, not the absolute properties of a static image.” For a design engineer the pattern is a reminder that the GUI you build can leave a door open, and that a small, scoped language beats a full one in that doorway.
Ambient Co-presence (December 2023) names ambient co-presence: “the sensation of sharing a space or context with other people, without directly interacting or continuously communicating with them.” The context is that “Most of the web is still designed to accomodate slow-loading, single-player experiences,” and that our current multiplayer attempts “draw too much attention to the multiplayer-ness.” Multiplayer cursors, first in Google Docs as far as she knows, then Notion, Figma, Miro, and Mural, “don’t scale”: hundreds of cursors feel overwhelming, and “Seeing exactly which word or design mock your manager is focused on isn’t the chill background sensation we’re going for.” Her proposals are softer: a heatmap rather than a pointer, which “allows us to show the presence of a large number of people in a space” calmly; spatial audio, as in Gather Town, where voices fade with distance; and annotation layers like Medium highlights or Hypothesis, which are less synchronous but still peripheral. She cites PartyKit’s Cursor Party and Leisa Reichelt’s 2007 Ambient Intimacy. If you are adding presence to a product, this page is the argument for turning it down.
Historical Trails (December 2023) starts from the in-flight map and three questions: where am I, where am I going, where have I been. Interfaces are decent at the first two (active states, progress bars, steppers) and poor at the third. Breadcrumbs “don’t scale well beyond ~7 steps,” and Chrome’s history “is a flat list that runs for eternity.” Her definition of good historical trails: they “should show people where they’ve been, even when the journey has been complex, looping, and divides into multiple branches,” and they should summarise journeys so you can “start at a macro level view and zoom into micro level items.” Git, Gitkraken, and Sourcetree are her model of fine-grained branching history; Patryk Adaś’ 2017 Lossless Web Navigation with Trails argued for trails instead of tabs; Szymon Kaliski’s Cartographist combines a branching trail sidebar with stacked windows. She suggests, with stated hesitation, that language models could help with semantic clustering of journeys. Any product with an exploratory task longer than a dozen steps, research tools especially, needs this pattern and mostly lacks it.
Computational Notebooks (April 2023) describes computational notebooks as “one of the best solutions to the problem of unshareable, unexplainable code trapped in cumbersome local development environments.” They are online documents made of cells, each with an input and an output; cells can be code or plain text, which is why “notebooks are ideal for tutorials or walkthroughs,” and the interleaving is Knuth’s literate programming from 1984. Her examples are Observable, DeepNote, Google Colab, Jupyter, and Wolfram Mathematica, with Observable singled out as the one that runs JavaScript and is aimed at data visualisation designers. Drag-and-drop cells make them feel like block editors such as Notion or Coda. The design-engineering relevance is direct: a notebook is a document whose figures run, which is a close cousin of this book and of Bartosz Ciechanowski’s articles.
Folk Interfaces (August 2022) are “when users reappropriate existing software to solve their own problems.” The term is Cristobal Scuitto’s, from his experiments using the browser as a media interface for local files; before finding it she called these “reappropriated software or interface hacks.” The examples are the browser console as a JavaScript runtime, Dylan Tallchief’s digital audio workstation built in Excel, spreadsheet pixel art, a Dungeons & Dragons character dashboard in Google Sheets, and, from outside software, Victor Papanek’s tin can radio and the Mingei movement. The lesson she draws is about material: you can see an interface “as a clearly signposted user journey you should follow. Or you can see it as a collection of functions and affordances to repurpose.” Spreadsheets and browsers are “infamously malleable,” and “None of these uses cases could have been predicted or catered for by the Microsoft Excel product team.” For a builder, the folk interface is a test of generosity: does the thing you made have enough raw affordance to be misused well?
Daily Notes Pages (May 2022) and Programmable Notes (March 2022) are a pair about knowledge tools. The Daily Notes Page is “one of the most popular solutions to the problem of balancing frictionless input with future discoverability”: you open the app and “a fresh blank page appears with today’s date at the top,” so capture needs no filing decision, each day becomes a reference point, and “tomorrow the page will automatically be swept away into the archives.” Examples are Remnote, Roam Research, Craft’s unsorted page, and Obsidian and Logseq templates, some of which act as “programmable attention” by fetching unfinished to-dos or yesterday’s entries. She also names the cost: the daily cadence frames the system as a diary and risks “large piles of unstructured cruft.” Programmable notes go further: note-taking systems “that allow you to write programmatic rules that facilitate particular ways of working with your notes,” triggered by conditions, input, or time of day, and running actions that prompt you, transform notes, or fetch from outside. The context is her complaint that most note software “acts as a passive storage container,” and the proposal is to “think about note-taking systems as active agents, rather than receptacles.” Examples are Roam Smartblocks, Obsidian and Logseq plug-ins, Coda automations, Gordon Brander’s Subconscious geists, and Elicit. Her rules read like product specs: “When I state a claim ask what evidence I have to back it up.” This is, she says, “end-user programming in action,” because the makers of note apps “will never be able to create systems that suit the needs of everyone’s particular knowledge management workflows.”
One more pattern belongs here, from Amelia Wattenberger rather than Maggie. Evolving the infinite canvas observes that on the web “we’re used to things being stacked vertically,” and that “Infinite canvases marry the easy manipulation of the digital world with the spatial strengths of the physical world,” which is why we use them for “complex, unsorted, or exploratory tasks.” Her proposals are to hardcode the ways we already organise content into the canvas itself (prevent overlap; group like magnets that “pull fast enough and they detach”), to encode Gestalt rules of similarity, linear order, and proximity into the exported data, and to stop making apps choose: “Are we going to give users a text document, a spreadsheet, a timeline, or a canvas? But what if we didn’t have to choose?” That question is where the next chapter begins, with Steve Ruiz’s tldraw and the canvas as a surface where people and models work together.
The way to use a catalogue like this is not to memorise it but to keep it within reach. When a product brief asks for collaboration, check it against ambient co-presence before adding cursors. When a flow has branches, remember that breadcrumbs stop at about seven. When users keep doing something strange with your tool, read it as a folk interface before reading it as a bug. And when you are tempted to hide power behind menus, ask whether a small programming portal would serve the one in a hundred who needs it without troubling the rest. Maggie wrote these pages as observation and research; for a design engineer they are also a to-do list.