Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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:

mockup

download bmml source

Initially, I thought about putting a small icon: enter image description here next to the tab label:

mockup

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?

share|improve this question
1  
Is there a valid reason why you wouldn't want to save changes that the user has made? If not then why don't you just auto-save whenever you switch tabs? That way you don't have to have a job auto-saving every X seconds but can just hook into the tab control itself, and when the tab state changes then you can save all changes at that point. –  JonW Jul 3 '12 at 7:41
1  
Users are given the opportunity to discard changes under some circumstances (but not all, only when appropriate). However, I don't think autosaving would work in this case, because the tabs each contain content for editing an account: profile, passwords, linked email addresses etc. –  F21 Jul 3 '12 at 7:46
add comment

4 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
Sounds like a good list of ideas. The downside is that I am already bolding the label of the active tab and underlining on mouse over. –  F21 Jul 3 '12 at 8:35
    
That is a problem. Italics might work, but are not as good. Do you need to bold the current tab? Brackets might be the better route in this case. –  Schroedingers Cat Jul 3 '12 at 11:39
add comment

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

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?

share|improve this answer
    
This!! I really hate this type of settings layout that doesn't either autosave or just have ONE save button that clearly saves all my changes (labeled 'Save All Changes', of course). I get paranoid that changes in other tabs were not saved. Alternatively, is there a reason to keep them separate? phpdev, you say that each tab can be considered independent, however, they all contain profile settings that I tend to appreciate seeing on one screen. –  Karen Jul 3 '12 at 14:03
add comment

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.

share|improve this answer
1  
Never use just color to indicate anything because of the potentially colorblind users. –  dnbrv Jul 3 '12 at 6:25
    
@dnbrv I'll update my answer to reflect this. Good point. –  sscirrus Jul 3 '12 at 7:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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