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:
Initially, I thought about putting a small icon: next to the tab label:
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?