# Interface patterns worth knowing · Explaining with interaction Maggie Appleton’s [patterns](https://maggieappleton.com/patterns) are “Design patterns gathered from my own observations and research.” Each page has the same shape: The Context, which names the tension, then The Pattern, then history, examples, and references. This section walks seven; the eighth, Command K Bars (“Command line bars you can quickly summon with a keyboard shortcut”), is covered in [A command menu with pages](https://learn-ui.com/chapters/components/command-menu). Each names a behaviour users already want, and a design engineer who recognises the pattern can prototype it in an afternoon. ### Portals and folk interfaces [Programming Portals](https://maggieappleton.com/programming-portals) (October 2022) are **programming portals** (Programming portals are small, scoped areas within a graphical interface that give users access to command lines and text-based programming.): “small, scoped areas within a graphical interface that give users access to command lines and text-based programming.” The context is the mid-1980s split, when the Macintosh GUI “created two distinct categories: end users and programmers” and hiding the command line “took away access to powerful primitives.” Examples: HyperCard (“the grand OG example,” Bill Atkinson, Apple, 1987, with HyperTalk commands like find, calculate, and go to), Fermat, an early pre-launch Notion that exposed CSS and JavaScript, and Ink & Switch’s Inkbase, where “Any quickly scrawled doodle can be turned into a set of ad-hoc interface controls.” Her imaginary app Drawper has a formula bar that sets a stroke conditional on size: “We’re writing dynamic rules, not the absolute properties of a static image.” [Folk Interfaces](https://maggieappleton.com/folk-interfaces) (August 2022) are “when users reappropriate existing software to solve their own problems,” a term from Cristobal Scuitto’s experiments using the browser as a media interface for local files. Examples: the browser console as a JavaScript runtime, Dylan Tallchief’s digital audio workstation in Excel, spreadsheet pixel art, a Dungeons & Dragons dashboard in Google Sheets, and, outside software, Victor Papanek’s tin can radio and the Mingei movement. An interface is either “a clearly signposted user journey” or “a collection of functions and affordances to repurpose,” and “None of these uses cases could have been predicted or catered for by the Microsoft Excel product team.” The **folk interface** (Folk interfaces are when users reappropriate existing software to solve their own problems.) is a test of generosity: does what you made have enough raw affordance to be misused well? ### Presence and trails [Ambient Co-presence](https://maggieappleton.com/ambient-copresence) (December 2023) names **ambient co-presence** (Ambient co-presence is the sensation of sharing a space or context with other people, without directly interacting or continuously communicating with them.), “the sensation of sharing a space or context with other people, without directly interacting or continuously communicating with them.” Multiplayer cursors (Google Docs first, as far as she knows, then Notion, Figma, Miro, and Mural) “don’t scale”: “Seeing exactly which word or design mock your manager is focused on isn’t the chill background sensation we’re going for.” Softer proposals: a heatmap rather than a pointer, spatial audio as in Gather Town, and annotation layers like Medium highlights or Hypothesis. She cites PartyKit’s Cursor Party and Leisa Reichelt’s 2007 Ambient Intimacy. If you are adding presence to a product, this page argues for turning it down. [Historical Trails](https://maggieappleton.com/historical-trails) (December 2023) starts from the in-flight map: where am I, where am I going, where have I been. Interfaces handle the first two (active states, progress bars, steppers) and fail the third: breadcrumbs “don’t scale well beyond ~7 steps,” and Chrome’s history “is a flat list that runs for eternity.” Good **historical trails** (Good historical trails should show people where they've been, even when the journey has been complex, looping, and divides into multiple branches of exploration.) survive journeys that are “complex, looping, and divides into multiple branches” and let you “start at a macro level view and zoom into micro level items.” Git, Gitkraken, and Sourcetree are her model; Patryk Adaś’ 2017 Lossless Web Navigation with Trails argued for trails instead of tabs; Szymon Kaliski’s Cartographist pairs a branching trail sidebar with stacked windows. Any exploratory task longer than a dozen steps needs this pattern and mostly lacks it. ### Notebooks and notes [Computational Notebooks](https://maggieappleton.com/computational-notebooks) (April 2023) calls **computational notebooks** (They're made up of 'cells' that each have an input and an output.) “one of the best solutions to the problem of unshareable, unexplainable code trapped in cumbersome local development environments.” Cells of code or prose, each with input and output, make them “ideal for tutorials or walkthroughs”; the interleaving is Knuth’s literate programming from 1984. Examples: Observable (JavaScript, for data visualisation designers), DeepNote, Google Colab, Jupyter, Wolfram Mathematica. A notebook is a document whose figures run, a cousin of this book and of [Bartosz Ciechanowski’s articles](https://learn-ui.com/chapters/explaining/explorable-explanations). Aside The notebooks page is one of the few with an assumed audience that warns readers off: “You probably won’t understand this if you haven’t done any programming.” [Daily Notes Pages](https://maggieappleton.com/daily-notes) (May 2022) and [Programmable Notes](https://maggieappleton.com/programmatic-notes) (March 2022) are a pair. The **Daily Notes Page** (The Daily Notes Page (colloquially, the DNP) is one of the most popular solutions to the problem of balancing frictionless input with future discoverability.) balances “frictionless input with future discoverability”: a blank page with today’s date needs no filing decision, and “tomorrow the page will automatically be swept away into the archives.” Examples: Remnote, Roam Research, Craft’s unsorted page, Obsidian and Logseq templates that fetch unfinished to-dos as “programmable attention”; the cost is “large piles of unstructured cruft.” **Programmable notes** (Programmable notes are note-taking systems that allow you to write programmatic rules that facilitate particular ways of working with your notes.) let you “write programmatic rules that facilitate particular ways of working with your notes,” triggered by conditions, input, or time of day, because most note software “acts as a passive storage container.” Examples: Roam Smartblocks, Obsidian and Logseq plug-ins, Coda automations, Gordon Brander’s Subconscious geists, and Elicit; her rules read like specs (“When I state a claim ask what evidence I have to back it up”). This is “end-user programming in action,” because app makers “will never be able to create systems that suit the needs of everyone’s particular knowledge management workflows.” ### A canvas and a to-do list One more pattern belongs here, from Amelia Wattenberger. [Evolving the infinite canvas](https://wattenberger.com/thoughts/evolving-the-infinite-canvas) observes 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.” She proposes hardcoding how we already organise into the canvas (prevent overlap; group like magnets that “pull fast enough and they detach”), encoding Gestalt rules of similarity, order, and proximity into exported data, and refusing the usual choice: “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](https://learn-ui.com/chapters/canvases) begins, with Steve Ruiz’s tldraw. Keep the catalogue within reach. When a brief asks for collaboration, check it against ambient co-presence before adding cursors. When a flow branches, remember that breadcrumbs stop at about seven. When users do something strange with your tool, read it as a folk interface before reading it as a bug. When you want to hide power behind menus, ask whether a small programming portal would serve the one in a hundred who needs it. Maggie wrote these pages as observation and research; for a design engineer they are also a to-do list.