6

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

Improve this question

6 Answers 6

Reset to default
3

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

Improve this answer
1
  • 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
    Commented Apr 25, 2012 at 11:37
2

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.

Improve this answer
4
  • 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?
    – random_user_name
    Commented Apr 25, 2012 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
    Commented Apr 25, 2012 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.
    – random_user_name
    Commented Apr 25, 2012 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
    Commented Apr 25, 2012 at 16:03
2

We have a similar application and after user testing found that the following works best:

enter image description here

Instead of using Previous and Next, labelling the actual destinations gives the user a sense of where they are. There wasn't really a need for a discrete Save button since the green buttons performed the save anyway. We didn't find it necessary to include a Cancel button either since most users would just close the tab.

Improve this answer
1

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.

Improve this answer
5
  • 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
    Commented Apr 25, 2012 at 11:31
  • "ok", "cancel", "apply" - the chance that someone accidently clicks on cancel when he wants to say "ok" is imho doubled.
    – kaiser
    Commented Apr 25, 2012 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
    Commented Apr 25, 2012 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
    Commented Apr 25, 2012 at 12:52
  • @kaiser well that's unfortunate. maybe you should tell your girl not to sit ON the computer next time and that won't happen... =)
    – AndroidHustle
    Commented Apr 25, 2012 at 13:05
0

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.

Improve this answer
0

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 ]

Improve this answer

Your Answer

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

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