Behaviour of save function on modal window

Question

I have a modal window in which are three tabbed forms:

[caveat This began life as a sliding div a la twitter, but for whatever reason I have been asked to consider a modal window]

The user uses this form set to maintain information about courses. The user does not have to fill everything out at once but may want to. The user may enter information on one tab or s/he may move between tabs in any one session.

User actions:

• The user may open the window and then close it without changing any information
• The user may open the window and then enter information erroneously and wish to cancel that action
• The user may enter information in multiple tabs and save that information sequentially before closing the window
• The user may enter information in one tab and save the information and close the window

I am having problems with the save function: the example above will allow the user to save and continue working but the big UX flaw is that there is a huge Fitts law breaking distance between the [x] close and the save functions. An alternative is to include a save and close window button beside the save button but if the user enters information and wishes to cancel there is now a problem with -perhaps- the lack of explicit cancel button.

How should I structure the save, close, cancel functions with this interface?

Answer 1

I think the simplest method, as you suggest, is to add a new button alongside the Save one entitled 'Save and Close'. If the user want's to close only then the top-right close button meets expectation for where it should be loacted. If they want to save and continue what they're doing then that's the function of the 'Save' button, but if they want to close then the 'Save and Close' should be used.

It's only an assumption (which is dangerous, I know) but having a 'Save' as well as a 'Save and Exit' should instinctively tell teh user that selecting the 'Save' button only will not exit the application. I wouldn't want to rename it to 'Save and Continue' because then you've got two long named buttons alongside eachother and you don't get the distinction between them that you would with a single word and multiple word button.

I don't think you need a Cancel button; that's what the 'close' button would do. Having a Cancel button would cause confusion as to what happens next after you select it. ("Can I cancel, then save, then exit?")

Answer 2

What is suddenly wrong with OK and Cancel (and optionally Apply)?

I don't like seeing "save" on a window because I don't know if it will only save the changes in that window, or all changes I have done within the project. I only want to see 1 save button, and it should save everything.

Answer 3

There's good information about potential behaviors here, but what are the user's goals and motivations? If all three of these tabs are for the same purpose (entering a course) then requiring people to tab between them will be frustrating and slow.

It asks the user to enter dates. How do they know the start and end dates? If this is for students, the average student doesn't necessarily have that memorized. However, they likely do have the name of their school memorized. So instead of asking them for dates, I'd ask for their school name, have a database of the dates, fill it out for them, and allow them to change it if it's incorrect. If it's for some other type of course, figure out if you can get that date information and provide it rather than a blank slate for them to choose.

"[caveat This began life as a sliding div a la twitter, but for whatever reason I have been asked to consider a modal window]"

What percentage of visitors will be on mobile devices? Modal windows don't always go well with those...