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?
Answer
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.
No comments:
Post a Comment