Version Control UI

Question

I want to make an efficient design for version control in a web app. Let’s say the app is an editor that allows users to build visual content. And let’s say that I want users to be able to access “versions” of their content at any time in the future, even if they leave the app.

The way I’m currently holding the functionality is that saving the content and saving a version of the content are different. Perhaps a user just wants to save every 2 minutes to prevent losing their work... but I don’t want 15 different versions with only minor changes to be saved and displayed on the app.

How do I go about approaching this? Should there be a “save” and “save as” option?

Also, if the user is scrolling through the options and he/she wants to replace his/her current work with an older version, how would that interaction feel like? Should there be another button?

Maybe all the functionalities need to be put into an “actions” drop down? Not sure!

Answer 1

It is hard to answer this question, as there is no real context, either about the users, the application or what devices it will work on.

In general, the command pattern, with undo/redo, is a good option which I have employed on complex web applications previously, where a "Designer" area is required, e.g. report designer, form designer, etc.

Photoshop showed the way decades ago. You start from nothing and build from there, but you can undo/redo all the way back to the beginning.

You might also want to look at the versioning built into MS Office, as that might be appropriate, depending on your specific use cases.

If you could post some more details about what you're building, along with some screenshots/wireframes, etc, that'd be helful.

Answer 2

For me, "save as" is just a means of creating a new document. As a git user, I never use "save as" to create a backup. IMHO nobody should.

In addition to ordinary commits (used for the normal workflow), I often create a "snapshot", usually without giving it a name. I rarely need them, their value is making me feel save when throwing things away.

Your app should ideally regularly autosave all changes, so that the user can go back to any point of time, even after having left the app. Obviously, you have to save changes incrementally instead of creating new files.

Additionally, there should be buttons like "save" and "save with comment", which should work exactly like autosave, but adding the information that it was a user's action (and the comment, if given).

if the user is scrolling through the options and he/she wants to replace his/her current work with an older version, how would that interaction feel like?

IMHO it should be an expandible hierarchical list ordered by time with the possibility to search for comments (and other stuff), something like

• 06:16 current state
  20 deletions, 5 insertions
• 06:02 looks good
  5 deletions, 8 insertions
• 05:51 manual save
  40 deletions, 2 insertions
• 05:37 before cleanup

The bullets shows the manual saves (with user's comments in bold, if given), the second line summarizes what has happened before. You can expand the changes to get all the details or sort of collapse the list by filtering according to the comment text.

Obviously, what you show shouldn't like like my bullet list, but I guess, it illustrates what I mean.