How I escaped the pull of the page UI.
Image by the author.
The best writing tool I’ve discovered last year was to stop drafting on a page and use a canvas-based user interface (UI) instead. In this article, I’ll share what motivated this change and reflect on the strategies that help me make the most of it.
As a professor and researcher in Human-Computer Interaction, my focus is on scientific writing. Still, I expect these takeaways to apply more broadly to any writing involving iteration and engagement with other sources.
A year of drafting in space
My Miro recap below tells me I’ve created about 1500 digital sticky notes. Why so many? Well, I started 2024 off by writing an essay on the fragmentation of writing with AI tools. When a reviewer later asked me to share my process, I ironically noted that I did not myself involve AI tools in drafting it but nevertheless embraced fragmentation — via sticky notes on a canvas. Writing off the page in that project, I have not returned to substantially drafting with a page-based UI since.
My Miro “year in review” 2024.
My Miro board for the essay even made it into the appendix of the paper, as shown below. I have since received requests and comments on this figure, which have inspired me to write this short reflection.
The canvas I used to develop ideas and arguments and a review of related work for an essay.
Non-linear drafting on a canvas
Here are the key lessons I’ve learned and the reasons I now prefer a canvas-based approach to drafting.
Noteworthy beginnings
Sticky notes on the canvas look and feel tangibly like objects meant to be worked with. For me, they offer much better affordances for an early draft than bullet points on a page. They reify unordered thoughts, allowing me to directly manipulate them: I can move them aside, revisit some later, rearrange them, or connect them.
I beat the blank page with a canvas, one note at a time.
Zoom-to-frame
As my draft evolves and grows, I can zoom in and focus on a specific aspect, blocking out the rest. Complementary, I can zoom out to recover the bigger picture. This flexibility allows me to frame and reframe my writing sessions by dynamically adjusting the viewport.
Iterating in space
On a canvas, iteration is seamless. I can duplicate text objects to explore ideas and variations, keeping the original visible. Afterwards, I decide whether to delete it or retain it for comparison or future use. In contrast to this immediacy, copying a text file to “v2” feels disconnected from drafting and the content drops “out of sight”.
The spatial arrangement of text iterations adds meaning, such as when layouting paragraphs vertically to show progression, while exploring alternatives horizontally.
Mapping out meaning
More broadly, a canvas offers the freedom to map meaning spatially. This area is related work, while that area gathers study findings. I can cross, connect, and redefine these regions as I go. In contrast, files and ordered page sections twist my drafting hand into unwanted linearisation and prematurely defined boundaries.
Infinite margins
A canvas offers limitless space to engage with related work. I don’t need to cram thoughts into page margins or comment bubbles in a PDF viewer. Instead, I can give a reference space by adding its abstract, text snippets, figures, and so on, via copy-paste and screenshots. Crucially, I can add my own thoughts throughout. By deconstructing and reorganising the presentation of related work, I construct an overview ready to hand, rather than scattering thoughts in margins across document files.
Constructing an overview of related work with screenshots, snippets, and annotations.
Multimodal references
On a canvas, the representation of references can use images, text, even videos, more effectively than on a page view. I don’t have to think about page layouts when adding figures from related work for context. I also don’t have to worry about images moving on the page as I add text.
Related material and my text are not meant to be linearised at the drafting stage.
Let me overlap things, draw onto them, add arrows and text on top and around images, and so on. The canvas supports this.
Rewarding divergence
As a side-effect of the above, I experience the result of interleaving drafting with research into external sources as much more rewarding on a canvas than in a text file. Perhaps this is because the multimodal representation better reflects the invested effort. Beyond its analytic nature, it becomes a constructive process in itself. At the end of the session, I see: “Today, I’ve built this overview of related work. Look at that — amazing!”
Mise en place
This ties together the ideas of mapping, focus, and integrating related work: I rarely write just to produce text but rather interleave reading and writing. On a canvas, I can draft (and think) in context and I can prepare this context material directly on my writing surface ahead of time. Besides related work and results from own data analyses, I particularly like to prepare and lay out argumentation structures in this way.
Gathering and connecting results and argumentation structure, then drafting next to them.
To conclude, I’ve (re)discovered the benefits of a mix of Human-Computer Interaction concepts for my personal writing workflow, in particular at the drafting stage. These include zoom-and-pan UIs, focus and context, reification, direct manipulation, and various aspects of interaction design for sensemaking activities and building personal information spaces.
Breaking silos
This is not about Miro specifically — or even just about writing. In a broader view, my use of Miro is a workaround for dealing with “application silos”. Applications today are not truly interconnected. Navigating between them forces me to interrupt drafting, track where information is stored, and shift my focus between apps to gather the required resources.
While drafting a paper, instead of tracking information across apps, I want to focus on argumentation, related work, connections, data, meaning, and perspectives.
Dropping everything into one canvas app via copy-paste is far from ideal but it bootstraps a seamless information space for writing and referencing — and ultimately thinking — that I can use today.
Resources
Some of the canvas screenshots above are taken from the Miro board for this paper. I also wrote about it here on Medium. Finally, here are some suggestions for reading more about the mentioned HCI concepts:
Direct manipulationZoomable user interfacesReificationSensemakingPersonal information spaces
The UX of drafting in space was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
