We lack UI patterns for linked representations for arrangements on a 2D canvas

Linked representations are an essential design pattern of the Dynamic medium. Explorable explanations often link representations between multiple figures; tools like Descript link audio and textual representations; Transclusion links text when simultaneously presented in several contexts. Tools like these let us make sense of information by moving interactively between several ways of presenting the same content, or between several levels of abstraction (see e.g. Up and Down the Ladder of Abstraction - Bret Victor). But we lack good linking patterns when one of the representations is an arrangement on a 2D canvas, e.g. in Figma.

For example, imagine that you’d like to make a rapid wireframing tool where you can move fluidly between a textual outliner and a 2D canvas. When you add a line to the outliner, a frame is added to the 2D canvas, and vice versa. The same goes for rearrangement. You’d need to invent affordances to create the conceptual connection between canvas elements and outliner items, and to anticipate the expected editing behaviors.

Or, imagine a brainstorming tool where everyone can dump their stickies onto some central board. Then each person has their own synthesis board where they can freely rearrange the stickies into clusters that make sense to them. But everyone’s synthesis boards are “connected”, so that you can easily compare arrangements and see, for instance, where a particular sticky ended up across everyone’s boards. Maybe you can quickly scrub through alternate arrangements, watching the stickies animate into place as you try each person’s board. Comments made on stickies in the synthesis boards are shared and aggregated on the corresponding sticky on everyone else’s board—you’re not commenting on a copy. You’d have to do a lot of thoughtful UI work to set appropriate expectations in a system like this, because people aren’t familiar with patterns for linked arrangements on 2D canvases.

References

This observation came up during a jam session with Taylor Rogalski on 2022-10-17.

Last updated 2023-07-13.