The UX of drafting in space
uxdesign.cc
How I escaped the pull of the pageUI.Image by theauthor.The best writing tool Ive discovered last year was to stop drafting on a page and use a canvas-based user interface (UI) instead. In this article, Ill share what motivated this change and reflect on the strategies that help me make the most ofit.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 othersources.A year of drafting inspaceMy Miro recap below tells me Ive 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 fragmentationvia sticky notes on a canvas. Writing off the page in that project, I have not returned to substantially drafting with a page-based UIsince.My Miro year in review2024.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 anessay.Non-linear drafting on acanvasHere are the key lessons Ive learned and the reasons I now prefer a canvas-based approach to drafting.Noteworthy beginningsSticky 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 connectthem.I beat the blank page with a canvas, one note at atime.Zoom-to-frameAs 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 inspaceOn 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 ofsight.The spatial arrangement of text iterations adds meaning, such as when layouting paragraphs vertically to show progression, while exploring alternatives horizontally.Mapping outmeaningMore 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 marginsA canvas offers limitless space to engage with related work. I dont 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 documentfiles.Constructing an overview of related work with screenshots, snippets, and annotations.Multimodal referencesOn a canvas, the representation of references can use images, text, even videos, more effectively than on a page view. I dont have to think about page layouts when adding figures from related work for context. I also dont have to worry about images moving on the page as I addtext.Related material and my text are not meant to be linearised at the draftingstage.Let me overlap things, draw onto them, add arrows and text on top and around images, and so on. The canvas supportsthis.Rewarding divergenceAs 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, Ive built this overview of related work. Look at thatamazing!Mise enplaceThis 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 thisway.Gathering and connecting results and argumentation structure, then drafting next tothem.To conclude, Ive (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 silosThis is not about Miro specificallyor 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 referencingand ultimately thinkingthat I can usetoday.ResourcesSome 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 spacesThe 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.
0 Commenti ·0 condivisioni ·49 Views