Microsoft VS Code Unsaved File Affordance

✋ What is it?

This is a solution found in Microsoft's VS Code (as well as many other code editors). When a user makes a change in a file, VS Code will alert the user about the unsaved file by placing a dot next to the file name in the tab, as well as in the explorer. Additionally VS Code will also light up a notification bubble over the Explorer icon in the left of the editor.

🤲 How does this interaction or solution work?

Unlike standard text processors, code editors rarely save files automatically for the user.
There are many reasons for this, but in general, it has to do with a mix of critical intricacies that happen when code is being written inside a code editor.

For example, many editors will reformat files on save. Many environments will actively re-build the developed system every time a file that has changed is saved. Some Git configurations are set to create commits automatically in every save, and some environments will even perform quality tests and checks in every save.

Regardless of the reason, saving in a code editor is a critical action that can change the behavior and outcomes of the produced program. Because of this, the decision of saving a file is almost every time an input of the end user.

Code editors provide affordances to tell the user that there are unsaved files that may be affecting the current outcomes. In the case of Microsoft VS Code, the affordance used is a small dot that shows up next to the file name in the tab and the file explorer. The dot remains in that position until the user saves the file either through the keyboard shortcut or the file menu.

Besides this affordance, VS Code also shows a notification bubble over the Explorer icon on the left. The number inside the notification bubble is correspondent to the number of unsaved files.

VS Code also shows the dot affordance in other instances where the file name appears, for example in contextual menus like Quick Open and Integrated Terminal.

🙌 How does this interaction or solution work?

Visibility and Keeping Context

When a user is performing a critical and involved task like writing code, is extremely important for the systems that are enabling this activity to show their state clearly.

VS Code builds a robust mental model with easy to learn affordances like the unsaved file dot.

Also, by providing this layer of system visibility, VS Code can prevent its users from losing the context of the activities they are performing.

A small affordance like the 'unsaved dot' not only help VS Code users to understand the state of their files quickly but also becomes an integral part of the mental model they use when performing any activity in the code editor.