65

In Windows applications it seems to be a common way to indicate modified, unsaved documents with an asterisk * character.

E.g. this is how Visual Studio .NET 2012 indicates a modified document:

enter image description here

When the document is saved to disk, the asterisk character disappears again.

I'm currently using the same method in my own applications, too.

Since I loved how Microsoft replaced the * in password fields by the much clearer • character, I am thinking about something similar for indicating my unsaved documents, too.

Unfortunately, I think the • for indicating "feels" not quite right.

My questions are

  • Would you recommend of using something other than the * character to indicate modified documents?
  • If yes, how would you do it (i.e. which character or which other way)?

Update 1

As commented by kedar, I've tried the text editor Sublime Text 2 to see how they do it:

enter image description here

Update 2

Notepad++ does show a pencil in the tab of a modified document:

enter image description here

In addition they write an * in the window's title bar left to the name of the current active file:

enter image description here

Improve this question
9
  • 4
    For variety, Vim uses a plus (+) sign after the file name to indicate modified document.
    – Lie Ryan
    Jun 18, 2013 at 18:16
  • 5
    That dot looks so weird next to the hyphen. Almost like there was supposed to be two hyphens but one of them melted.
    – Chris Burt-Brown
    Jun 21, 2013 at 10:27
  • 1
    @ChrisBurt-Brown Actually, it looks like the letter A
    – sq33G
    Jun 23, 2013 at 9:37
  • 1
    Not a character but I prefer color. Look at Intellij Idea, if you use VCS integration of it, the unmodified file names are shown black, modified are shown blue, new files green and excluded/removed files gray/red. I think using colors to represent the state is much more beautiful than ugly asterisk.
    – Utku Özdemir
    Feb 17, 2014 at 2:56
  • 1
    I think the Sublime way is fine, as * is generally being replaced by • other places as well in this unicode world. Just look at passwords and bullet lists. I think to most people they are just types of the same symbol.
    – Thomas Ahle
    Jul 31, 2014 at 21:48

14 Answers 14

Reset to default
79

You definitely should not make users learn new patterns (especially only due to personal preference).

I think the right way to go is to follow the common practice, and I believe (please correct me if I'm wrong) the common practice in this case is using asterisk. You will, definitely, find other patterns in various applications, yet in this case, I think asterisk is the most recognizable one if you are limited to one character only.

The other way to go is to add "modified" or similar text on the tab, but it occupies way more space.

Improve this answer
7
  • 13
    +1 In almost every IDE and text editor I've used, they use an asterisk to right of the file name to indicate an unsaved change. I strongly recommend not following Sublime Text patterns. It's a hipster (not in a negative way) text editor designed for the niche. Almost everything about it forces the user to learn new patterns, new shortcuts, new colors, etc. I do use Sublime Text, but I just don't think it's a good idea to follow its design "standards".
    – Adi
    Jun 18, 2013 at 15:35
  • 1
    @Adnan: Same with Vim's plus sign, I'd say.
    – AlbeyAmakiir
    Jun 18, 2013 at 22:47
  • 1
    Semi-counter-point: No reason not to use a “prettier” alternative that some sadistic user couldn't have used in her filename, like a big colorful five-pointed star. (Note to self: I will despise anyone who ever names a file README.txt* forever.)
    – BRPocock
    Jun 19, 2013 at 15:12
  • 4
    This actually leads to another conclusion: the symbol indicating file being modified should not be one of the allowed in the filename/extension itself. Asterisk is not - as it is used as a wildcard, so user will not wonder if it's, say: •file.txt or file.txt, just modified. Not applicable to *file.txt and file.txt, as there is no possibility to put asterisk in filename (at least in Windows, probably the same in OSX?).
    – Dominik Oslizlo
    Jun 19, 2013 at 15:47
  • 5
    @DominikOslizlo I'm pretty sure all modern Unix systems have the same constraints on file names: no forward slash (used as directory separator in *nix) and no NULL (used to indicate the end of a string in C), but anything else is valid. Yes, you can create a file named readme.txt* and it will be distinct from readme.txt as well as readme.txt?; you just need to protect the asterisk and question mark from shell globbing, which can be done e.g. by quoting.
    – user
    Jun 20, 2013 at 9:30
56

Not A Standard

The usage of the asterisks as an indicator for a modified in-memory change is something that appears mostly on the Windows platform. Mac and Linux have not been too quick to follow this, but there are a few multi-platform editors that do use it.

The asterisks is used when the UI element (title bar or tab) is capable of displaying only text. If that UI element supports icons associated with the text, then your alternative is a more informative icon.

Mainly MDI

MDI (Multi Document Interface) seems to be the most common place where this is done, and I can only assume it comes from the challenges of a user trying to multi-task. Being able to work on more than one document at a time raises the risk of data loss. If a user makes changes to document A, and then switches to document B. They no longer have document A at the top of the window stack, and may forget to save their changes until they exit the application. In the event of a power failure their changes will be lost.

Mac Is Different

On the Mac OS platform the MDI interface is less popular. Instead it uses multiple editors where each editor is associated with one document. It's the same multitasking behavior, but it's slightly different on the internals for the software.

enter image description here

When the user switches from one document to the other the OS notifies one editor that it's switching to a background state. Whereas on Windows the same program stays active, and just the document of focus changes. So it's more common for a Mac to prompt to save changes, then to simply indicate it, but I'm not sure when this often happens.

enter image description here

MDI And Tabs

In the first generation of MDI applications there weren't any tabs, and then later tabs were introduced to make it easier to switch documents. With the introduction of tabs the user was able to see all open documents, but there was are standards on how to indicate which of those documents has changed.

Three States For A Document

A document in an editor exists in 3 possible states.

  1. The document is the same as the one on disk, or never saved.
  2. The document has not changed, but the document on disk has changed.
  3. The document has changed, but the document on disk has not changed.

When the document in memory is new. It's common to see the document icon as part of the tab, but the icon is modified to indicate a new state.

enter image description here

Now for the other states you can also change the icon, and for tabs where icons are used. I recommend to modify the icon and not use text to indicate a change of state.

Asterisk Before or After

I have seen the asterisk place in both the before or after positions to mean the same thing. The most common occurrence is the after position, and I think this is to prevent it from obscuring the name of the file. When you place it in the front it interferes with left-to-right reading. For example; mathew.txt* is easier to read then *mathew.txt. Also, when it's positioned at the end it won't interfere with sorting.

I was able to find a few images ranging from text editors to CAD drawings that demonstrate the after usage. So this confirms it's popularity by commonly used software.

enter image description here

enter image description here

The Often Forgotten Third State

So there is the new document state, the changed document state but also the modified on disk state.

This is the least standardized UI feature. It seems that every editor implements it differently. The one implementation I prefer is a strong indicator that retains the ability to review the in-memory version before reloading the disk version.

Most editors simply display a pop-up prompt "The file has changed on disk, reload?" and you are left to make a decision. Without being able to review what you had in memory.

This interface demonstrates my preferred method. A non-blocking notification of the change with the option to reload it. Without blocking me from reviewing the in-memory copy before I reload the new version.

enter image description here

Improve this answer
11
  • 6
    Just commenting that Mac OS X applications do often have an indicator that a document has unsaved changes: a dot is drawn in the close button of the document. This is described in the Apple documentation. For an example, see this page, or the first Google image result for document modified os x dot.
    – Joshua Taylor
    Jun 19, 2013 at 0:59
  • 3
    Some more explanation of how this is handled on the Mac: in older versions of OS X, apps put a dot in the close button to indicate unsaved changes. Now that OS X includes autosave functionality, Apple expressly discourages any sort of "unsaved" state (except when an autosave failed, like no disk space).
    – Kit Grose
    Jun 19, 2013 at 1:02
  • 4
    Good answer, but I'm not sure it's true that the use of * to indicate a modified buffer is mostly a Windows thing. Emacs has been doing this (www.gnu.org/software/emacs/manual/html_node/emacs/Mode-Line.html, gnu.org/software/emacs/manual/html_node/emacs/List-Buffers.html) for ages, and it originated on Unix systems.
    – LarsH
    Jun 19, 2013 at 3:52
  • 2
    @LarsH maybe that's the birthplace of this UI feature? :)
    – Reactgular
    Jun 19, 2013 at 14:30
  • 3
    When a file was modified outside of the editor, I would love to see the difference highlighted in red and green like it is done for revisions on Stack Exchange.
    – danijar
    Jun 23, 2013 at 8:49
19

In answer to the which character or which other way? part of your question, the way I could think of is the use of color highlights on file tabs. Notepad++ does this.

Notepad++ displays a regular floppy icon on all file tabs, and disables the Save icon on the main toolbar for saved files.

Notepad++ Saved File

However, on unsaved file tabs, floppy icon turns red and the Save icon on the main toolbar is enabled for such files.

Notepad++ Unsaved File

Despite this, Notepad++ still uses the regular convention as well and places an asterisk beside the filename on the titlebar of unsaved files. Why is this important? Because the titlebar's contents are still visible when the window is minimized, and the user knows he has unsaved work (however, this is only in the case when an unsaved tab is the active tab before minimization).

Notepad++ Unsaved-work Minimized

The point to note here is that though the red-floppy icon is very catchy, and draws attention to unsaved files, it is still a bad idea. Why? Because on inactive tabs, the red color takes a back seat (see first figure above). So when I have a load of unsaved files mixed among other files, it's hard to comprehend which is which -- a task that can otherwise be easily accomplished if asterisks were used on file tabs.

Notepad++ Mixed-up unsaved files

While is it true that it is best to stick to established conventions, there is always scope for betterment. Microsoft did it by replacing the * with • in passwords fields, and so can you. If you're building a document reader, try color highlights for unsaved file tabs. Just do what Notepad++ didn't -- make sure to adequately highlight inactive tabs as well (without making them seem like active tabs!).

Improve this answer
6
  • 4
    using colour alone would not be accessible
    – jk.
    Jun 19, 2013 at 12:13
  • 2
    @jk: Good point. I propose using color + hatching for unsaved tabs. Or hatching alone.
    – SNag
    Jun 19, 2013 at 13:25
  • 1
    Colour may help, but colour is not enough. Think of colour-blind users. As for Notepad++, he has a bug, he fails to display the red icon consistently. When the unsaved file tab is inactive, its icon becomes blue — which is bad.
    – Nicolas Barbulesco
    Jun 19, 2013 at 17:56
  • 1
    @NicolasBarbulesco: Yes, I've already made note of that bug in my answer..
    – SNag
    Jun 20, 2013 at 5:13
  • 1
    It's not actually blue. It's just a much more muted red, to the point of being almost grey. It's still definitely bad.
    – AlexC
    Jun 29, 2013 at 20:14
9

Unfortunately there is no standards not only for marking changes but for naming conventions inside window title. I experienced different cases with different software. The cases when changes are marked are:

changed symbol

More broad question for me is not the symbol itself but visibility of status. Having reading convention left-to-right I'd prefer 3rd line and 5th line because of more quick perception. It is very fast to look at the start or end of line.

Improve this answer
5

You can use the • character instead of * as it is used in text editor "Sublime Text 2". There they have used • to indicate unsaved document.

But using * will be more correct as it is more vivid to the user. Hence the suggestion will be of using * only.

Improve this answer
4
  • 9
    an example of someone else doing it wrong, does not make it a good idea :)
    – JamesRyan
    Jun 18, 2013 at 16:18
  • 7
    Wow. I just learned why that strange dot character shows up next to the file name when I use Sublime Text 2.
    – Roddy of the Frozen Peas
    Jun 18, 2013 at 17:36
  • 3
    What do you mean by "vivid" and why is this "more correct"?
    – Burhan Ali
    Jun 24, 2013 at 14:45
  • 1
    Hi @BurhanAli, vivid in this case means it will be visible properly to the user as the obvious user's perceptions/expectations was to see for an asterisk for an unsaved or unchanged document. So in that case it will be more correct also.
    – Kedar Tiwaskar
    Jun 25, 2013 at 4:51
5

Instead of deciding that you need a new character to identify that a file is "unsaved" consider using something similar to Alan Cooper's Unified File Model.

In your example of Visual Studio, imagine if every change were saved in a history on disk. Every time you open the IDE, your entire edit history on that file is available to you. You can create "milestones" which are akin to "tags" in an SCM. Absolutely none of your changes are ever lost. If your system/software crashes, you won't lose your work. You never have to hit Ctrl+s again. As a user, you can "trust" your software to work for you and never have to worry about saving files again. In this case, you don't need a character on the file name to indicate it hasn't been saved.

Further reading: http://www.codinghorror.com/blog/2006/01/filesystems-arent-a-feature.html

Improve this answer
1
  • It's an interesting idea, but in my opinion this sounds like a race to the bottom of the convention-intellectual-load stack. It may be appropriate in some applications (android?), but sounds infuriating for professionals. Also, the edit history part in particular is just willingly ignorant of the realities of certain file formats (video editing, rich media embeds in documents, etc..)(note: as soon as you exclude media from milestoned saving, you have a double standard between text editing and media editing which increases cognitive load again), and violates temporal privacy.
    – TernaryTopiary
    Jun 21, 2017 at 14:28
5

My explanation for the usage of the *: * is associated with an anchor or sorts. It means there is an associated piece of information somewhere else (usually at the end/bottom). Our eyes have been accustomed to distinguish the * quite well due to all the places we see it (adverts, terms and conditions, banners, etc.) It catches our attention.

The • seems like a simplified version of *. Arguably it might be good enough to catch our attention too. Can be a part of the minimalist design.

The purpose of the * or • is to grab the user's attention regarding unsaved changes.

A good practice that I have seen some editors follow is to show 'Last Saved' or 'File up-to-date' status indicator. It can act as a stand alone indicator or can be used in conjuncture with the * or •.

Improve this answer
2
  • 5
    Interesting explanation, thanks. (My technical view was that * is a metacharacter that is not legal in filenames when this convention came up, so it was a character that would not be confused to be part of the filename.)
    – Ulrich Schwarz
    Jun 18, 2013 at 19:37
  • 1
    @UlrichSchwarz That might very well be the thing here. And later on the * was deemed too 'old-style' and replaced with the •
    – rk.
    Jun 18, 2013 at 19:39
3

I think that asterisk is not a helpful in the end of file name. Try to paste it on the beginning. The better is color coding. For example you can color tab in light red or make it grey and disable to close.

Improve this answer
2

There are so many programs (Fireworks, Dreamweaver, Notepad++) that do signify a modified document this way, that users have become so used to it then it is worth sticking with.

But for example NetBeans they use different colours and this isn't particularly hard for users to grasp, so there certainly are other ways of doing it.

If using another character, one that is not commonly used elsewhere in the program would be best, I'd have thought, something like the tild (~) sign possibly.

Improve this answer
2

The star * is OK. But in the first screen photo it is too close to the file name, I hardly see it. It would be better if the star were spaced from the file name. And I prefer having the star before the file name, like Eclipse does. This too makes the star more visible.

Improve this answer
2

An idea you could do is changing lightly the tab drawing. An example (Embarcadero Delphi): Without changes vs With changes

I'm no UX expert, but I use that interface everyday and it doesn't have the problems pointed by SNag's. Just an little suggestion.

Improve this answer
2
  • 11
    It took me a very long time to see the difference, and I was looking for it. It is not common whatsoever to see changes in the icon due to changes of state.
    – Sean Allred
    Jun 18, 2013 at 22:57
  • 1
    The intent seems reasonable, but the Icons are ... - I'm not sure if it would be helpful (in the long term) to add a text description as to help others save time for finding the difference.
    – Wolf
    Nov 10, 2014 at 11:00
2

Because nobody else has mentioned it: SublimeText's use of the • character in its title conforms to the way it changes the close tab icon (x) to a circle when edits have been made:

Sublime Text Example

Improve this answer
2

Just an idea... could you use a different font treatment? For example a slight difference in color and italics? i.e. "Saved.txt" vs. "Edited.txt" - hope that helps.

Improve this answer
1

Interestingly, I particularly like the way Embarcadero's RAD Studio represents with a pencil over the icon.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.