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.

In an application, the user is able to edit the information of several objects. The user is able to save and go to the next object.

What is a good order for this buttons? Modal window

share|improve this question
add comment

5 Answers 5

A good order is Previous, Next, Save and Close.

Break the actions apart. If you're providing Save and next why not also provide Save and previous, and then also Next without saving? If I press Cancel then how do I close the window? Do I need to press Save and close, or *Cancel" also going to close the window? Does it just close the window without saving, or does it override my last save?

Keep it simple, let the user save when they want to save, and navigate when they want to navigate, there's no need to combine the two. Yes, it saves a click, but it makes the UI more complicated and the actions more difficult to understand. "Wait, should I press Save and next or Save and close? Let me think about it for a second and decide what I want to do now..."

share|improve this answer
    
Thanks for your answer. It helps with the ongoing discussion of the default behavior of this screen. Eventually the cancel button is not needed. It acts the same as 'close', unless they want to reset everything (but why?). There are 2 kinds of scenario's. 1 initial scenario to define every subject (in a certain order) and 2 scenario where the user can edit change or add just 1 subject. Both are common. –  Rene Apr 25 '12 at 11:37
add comment

Generally you don't toggle tabs with prev/next -buttons, you merely choose the tab you want by clicking it.

In addition to this, if you would chose to stick with the prev/next -buttons, I think there are some flaws with the consistency in this UI. The buttons "Previous" and "Next" should have the same semantic meaning, only mirrored. Here the next button however also implies that any possible changes will be saved, something that the previous button doesn't. This is confusing.

If you have previous and next buttons they should be just that, the "Save" button should be separate and save any changes on all the tabs.

There is a "Cancel" buttons and a "Save and close" button, what do you do if you have made changes that you don't want saved and you want to leave the window? Do you click Cancel -> Save and close? Or does cancel close the window also, even though in its context it implies it doesn't?

Finally, the Save/Ok button should always be displayed in front of the cancel button, especially if your application is mainly intended for Windows users.

Personally I would set up the button panel as such:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Nothing more, nothing less.

share|improve this answer
    
Probably I the explanation was nog clear enough, but it makes clear that certain things are unclear. So thanks. The next will open the next subject. There are 2 kinds of scenario's. 1 initial scenario to define every subject (in a certain order) and 1 scenario where the user can edit change or add just 1 subject. –  Rene Apr 25 '12 at 11:31
    
No problem Rene! –  AndroidHustle Apr 25 '12 at 11:33
    
"ok", "cancel", "apply" - the chance that someone accidently clicks on cancel when he wants to say "ok" is imho doubled. –  kaiser Apr 25 '12 at 12:33
1  
@kaiser good point. You should address Microsoft with this concern since this is the pattern they use for both their OS and their other products. –  AndroidHustle Apr 25 '12 at 12:43
    
I know. Just yesterday my girl sat down on my computer accidently clicked wrong and destroyed some hours of work :P –  kaiser Apr 25 '12 at 12:52
show 1 more comment

Difference between tab container & general window

A clear indicator that there are more »objects«, that need to be solved can be mixed with a progress bar, that gives a clear feedback. You could also add some sort of progress number in % at the right end of the progress bar.

enter image description here

Tabs

I don´t think that you should use additional tabs here. If you really need them then you´re asking for too much information. No one wants to use a system where you need to fill in data for an hour, before you can make full use out of it. In the case there is that much data needed, then ask it on demand and inline.

share|improve this answer
1  
Great answers here, nobody is speaking about tab order, which is something that is valuable. When completing a form, and tabbing from one field to the next, when I tab out of the last form field, what's the first BUTTON my tab places me on? –  cale_b Apr 25 '12 at 13:57
    
The browser assigns them as he finds them in the mark-up. Except if you force it to do otherwise. So if it´s javascript show/hide, you´d simply be in the next one after the last one you focused, which can be annoying if you´ve been in the middle of the form. –  kaiser Apr 25 '12 at 14:16
1  
thank you. I understand how it works, the purpose was to raise awareness of tab order as part of the usability of the form. –  cale_b Apr 25 '12 at 16:02
    
In this case, simply edit my A. I got n/p w that. At least this is what community should do :). –  kaiser Apr 25 '12 at 16:03
add comment

I don't know why you need "apply" if you have "next" already written. Next imply's that you are applying and moving on. The next button should be on the bottom right prompting the user to move on to the "next" set.

You could have a "back" on the bottom left if the user wants to go back and edit the previous screen. But using "back" and "next" are the most common terms and the most widely accepted.

As far as "save and close" or "cancel" go...not sure you need a "cancel" if the user wants to quit they will just close the window or go back enough to where they can do something else on the site. "Save and close" only applies if the user has a username and password to be able to get back in and continue filling out the form.

If they have the ability to log back in, the "save and close" button could be located to the left of the "next" button. You want the user to finish and move on, so "next" should be the easiest button to find in order to steer them to the next screen.

share|improve this answer
add comment

Principle.... why users can not always decide when they want to save data? See comment of @vitaly

Ok, a possible approach for your scenario: You don't need a Cancel-Button because data will be saved when you go to the next object. You can only discard changes of the current object. When you go to the next object show the user that settings were saved.

I would use following button order and naming variants:

Variant (A)

[ < Previous ] [ Next > ] [ Save and close ] [ Close ]

Variant (B)

[ < Previous ] [ Next > ] [ Finish ] [ Close ]

share|improve this answer
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.