Denoting a tab as being "unsaved" in a web application

Question

I have a web application where one of it's pages uses tabs to break down the page into "bite-size" chunks. The contents in each tab has no relation to any content in any other tab and can be considered to be independent of each other:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The problem is that users can move across tabs (which is fine), but when they make a change in one tab and have not saved it yet, I would like to have some indication to indicate that the contents of that tab have not been saved.

In traditional desktop apps, one would usually denote the tab with an asterisk:

^{download bmml source}

Initially, I thought about putting a small icon: next to the tab label:

^{download bmml source}

With the asterisk, I feel that it is too easy to overlook the indicator, and users may not be familiar with the "asterisk indicates unsaved" paradigm when it comes to web applications.

With the icon, it seems to tell the user that there's a problem with that tab rather than the tab being in an unsaved state.

What's the best way to denote a tab as being unsaved in a web application? Are there any other ways besides the mockups I have provided above? Are there any examples/studies showing the most effective ways?

Answer 1

I would consider two aspects to this. Firstly, can you make the tab title bold, which indicates that something is different. Also, only enabling the save button only when there is something to be saved. As long as the changes happen as soon as you make a change, I think users will work it out.

Another option would be putting the title in brackets. You could even add "(unsaved) to the end, but I think that would draw too much attention to the places you have already completed your work, not the ones you need to focus on.

Answer 2

What if you didn't worry about 'save' status on an individual tab level, place the Save/Submit button outside of the tabset and let users save the entire tabset as if it were one page, instead of requiring users to save on each tab?

Answer 3

It seems to me that you're trying to pick the best point between explanation for first-time users, to concision so experienced users can 1) not feel patronized and 2) enjoy an efficient use of limited space.

Icons

Your icon idea would draw attention to get the user's mouse hover, at which point you resolve the first-timer's curiosity with a tooltip. However, it suffers by diverting attention away from core activities to a potentially minor issue, and it runs the risk of seeming cheesy (I can imagine almost any icon would look garish if repeated across every tab).

Asterisks

The asterisk is a better approach in that it saves much more space and isn't unnecessarily flashy. Unless you believe saving tabs is a critical part of the browsing user experience for all users, I would suggest combining asterisks with a tooltip so any newcomer can learn their significance.

Use of Color

Instead of icons, perhaps change the color of unsaved tabs to a subtle shade of red or pink to indicate a need for attention. Don't use this on its own because it won't be good for accessibility (thanks @dnbrv).

Autosave

Consider saving a user's work every time they change tab or every few seconds. While this will increase your server load, it would be the best solution for user experience.

Answer 4

I like conventions, so putting asterisk in conjunction with an alert message that warns a user when she tries to move away from the web page with unsaved tab would work the best.

But if you want more up-front warning, then I supposed a small message at the top would get more attention. It can be shown when one or more of these event takes place: 1. user changes tab 2. system detects any edits 3. user tries to exit the parent page without saving.

^{download bmml source – Wireframes created with Balsamiq Mockups}