15

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?

2
  • 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, 2012 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, 2012 at 7:46

4 Answers 4

3

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.

2
  • 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, 2012 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. Jul 3, 2012 at 11:39
8

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?

2
  • 1
    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, 2012 at 14:03
  • 2
    @Karen One issue to consider when saving multiple tabs is how you handle validation errors, particularly errors on background tabs.
    – thelem
    Aug 22, 2014 at 16:34
5

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.

2
  • 3
    Never use just color to indicate anything because of the potentially colorblind users.
    – dnbrv
    Jul 3, 2012 at 6:25
  • 2
    @dnbrv I'll update my answer to reflect this. Good point.
    – sscirrus
    Jul 3, 2012 at 7:00
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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