Into the Mode


Overview

I built an interactive web simulation of an early text editor interaction based on interactions described in Larry Tesler’s essay, A Personal History of Modeless Text Editing and Cut/Copy-Paste.

The simulation offers an alternate history of text editing, allowing users to see what it would have been like to have to move, delete, insert, replace and undo edits in a modal text editor.

Project Details

Tools

Sketch, InVision, HTML, CSS, Bootstrap, JavaScript, JQuery

Project Goal

Because my project aimed to showcase the particularly poor user experience design of early modal text editors, my goal was not to improve the historical aspects of the user experience, but the educational aspects of the user experience, highlighting the clunkiness of the process in a deliberate way. In other words, my goal was to make a usable unusable interface. I wanted the movement through verb and noun modes to be frustratingly slow and clunky, but also easily discoverable to the user, in terms of what they could or should do in each mode.

Aesthetic

I was inspired by GUI designs from the 1970s and 1980s, in particular the 1976 Xerox Smalltalk text editor and Xerox Bravo, the first WYSIWYG document preparation program. My design incorporates the bitmap grayscale aesthetic and window layout of these early GUIs. For inspiration, I made a Pinterest board for retro GUIs.

I used Sketch to mock up a wireframe of the interface, which, given the lack of visual designers in this moment of computer history, rendered my wireframes very close to the interface I eventually built out.

User Experience Map

Next, I created a UX map. Based on this, I built out my wireframe into multiple screens to create a clickable InVision prototype to test out this flow. In order to gauge its historical accuracy, I also sent it to author Larry Tesler. Through this, I learned that my initial flow was slightly inaccurate: in reality, the mode would reset to the beginning after an action. This flow is reflected in the final interactions.

User experience map

Interaction

1. Insert Mode

Insert

2. Delete Mode

Delete

3. Move Mode

Move

Demo

Try out the live demo for yourself to feel renewed gratitude for the world of WYSIWYG editors.