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 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]

enter image description here

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?

share|improve this question
    
crossover with ux.stackexchange.com/q/13211/4701 I know this is a far from perfect solution but the user needs context with the link driving the window (a table of data). –  colmcq Oct 27 '11 at 9:54
    
well, redundant now, they're implementing as new page. Oh well, interesting discussion anyway... –  colmcq Oct 27 '11 at 12:31

3 Answers 3

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?")

share|improve this answer
1  
thank Jon, this sounds good. Incidentally I've tested the bi-save functions in another project and users seemed pretty cool with it so there we go. –  colmcq Oct 27 '11 at 10:12

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.

share|improve this answer

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...

share|improve this answer

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.