Placement of the buttons on this dialog

Question

Placement of the buttons on this dialog

ChuckieAJ 316

Hi

I am looking for guidance concerning the placement of my buttons:

Congregations

With a simple dialog I have three buttons over to the right:

OK > Cancel > Help

And I understand that follows GUI etiquette for Windows.

But what about this dialog? I am not sure and am grateful for advice.

Minxin Yu 13,506 Reputation points Microsoft External Staff

2023-08-15T01:20:57.4133333+00:00

What C++ project are you using? Please provide a minimal example code of your dialog.
RLWA32 49,636 Reputation points

2023-08-15T08:35:41.59+00:00

A couple of observations about the dialog image posted. Generally when a dialog contains buttons for OK, Cancel and Apply the meaning is clear. OK causes data to be saved and the dialog box to be dismissed. Cancel dismisses the dialog box without saving data. Apply saves data without dismissing the dialog box. In the image posted it's not clear to me if apply changes dismisses the dialog box or leaves it open. Same question about cancel changes. Also, for my taste, the dialog looks rather busy due to the large number of controls for data entry. You might consider using a tabbed dialog to separate data for the congregation and the task coordinator.
ChuckieAJ 316 Reputation points

2023-08-15T16:52:54.93+00:00
@RLWA32

Apply Changes - click - just saves and keeps open

Apply Changes - Add - saves and re-init controls for adding a new cong.

Cancel Changes - Resets the dialog controls to last set values before save. Like undo.
RLWA32 49,636 Reputation points

2023-08-15T17:05:58.6066667+00:00

The above explanations for the buttons doesn't seem intuitive to me. And IMHO I would expect the Cancel Changes button to dismiss the dialog. BTW, how is the dialog closed? If I hadn't read some documentation somewhere how would I know what actions the buttons perform? Are you using tooltips?
ChuckieAJ 316 Reputation points

2023-08-15T18:26:07.2066667+00:00
@RLWA32

I agree - I have re-worked them:

On left

Options

Reset (only enabled when content has been modified)

On right:

Apply (enabled all the time)

Cancel (aborts and closes)

Help

Much better. And you can close with top-right X as usual.
RLWA32 49,636 Reputation points

2023-08-15T19:56:11.84+00:00

Clicking the "X" on a modal dialog's title bar is equivalent to clicking a Cancel button. In fact, the Windows API will send IDCANCEL to the dialog procedure when this is done. I suggest you treat it this way and provide an actual OK button to save any unsaved data and dismiss the dialog. This would be more in line with the standard dialog behaviors that users ordinarily expect.
ChuckieAJ 316 Reputation points

2023-08-15T22:11:36.4633333+00:00

@RLWA32 I will keep the Apply. I need it. I am willing to insert an OK button inbetween Apply and Cancel.

but I need Apply because changes must be saved before managing speakers.
RLWA32 49,636 Reputation points

2023-08-15T22:20:13.7233333+00:00

I will keep the Apply. I need it.

I never suggested you remove it. :)
ChuckieAJ 316 Reputation points

2023-08-15T22:24:31.1333333+00:00

@RLWA32 😀 Alright. I’ll stitch it in tomorrow. As for Close, I deleted the handler since my Cancel handler is called anyway like you said.

Accepted answer

1 additional answer

Your answer

Minxin Yu 13,506 Reputation points Microsoft External Staff

2023-08-15T01:20:57.4133333+00:00

What C++ project are you using? Please provide a minimal example code of your dialog.
RLWA32 49,636 Reputation points

2023-08-15T08:35:41.59+00:00

A couple of observations about the dialog image posted. Generally when a dialog contains buttons for OK, Cancel and Apply the meaning is clear. OK causes data to be saved and the dialog box to be dismissed. Cancel dismisses the dialog box without saving data. Apply saves data without dismissing the dialog box. In the image posted it's not clear to me if apply changes dismisses the dialog box or leaves it open. Same question about cancel changes. Also, for my taste, the dialog looks rather busy due to the large number of controls for data entry. You might consider using a tabbed dialog to separate data for the congregation and the task coordinator.
ChuckieAJ 316 Reputation points

2023-08-15T16:52:54.93+00:00

@RLWA32

Apply Changes - click - just saves and keeps open

Apply Changes - Add - saves and re-init controls for adding a new cong.

Cancel Changes - Resets the dialog controls to last set values before save. Like undo.
RLWA32 49,636 Reputation points

2023-08-15T17:05:58.6066667+00:00

The above explanations for the buttons doesn't seem intuitive to me. And IMHO I would expect the Cancel Changes button to dismiss the dialog. BTW, how is the dialog closed? If I hadn't read some documentation somewhere how would I know what actions the buttons perform? Are you using tooltips?
ChuckieAJ 316 Reputation points

2023-08-15T18:26:07.2066667+00:00

@RLWA32

I agree - I have re-worked them:

On left

Options

Reset (only enabled when content has been modified)

On right:

Apply (enabled all the time)

Cancel (aborts and closes)

Help

Much better. And you can close with top-right X as usual.
RLWA32 49,636 Reputation points

2023-08-15T19:56:11.84+00:00

Clicking the "X" on a modal dialog's title bar is equivalent to clicking a Cancel button. In fact, the Windows API will send IDCANCEL to the dialog procedure when this is done. I suggest you treat it this way and provide an actual OK button to save any unsaved data and dismiss the dialog. This would be more in line with the standard dialog behaviors that users ordinarily expect.
ChuckieAJ 316 Reputation points

2023-08-15T22:11:36.4633333+00:00

@RLWA32 I will keep the Apply. I need it. I am willing to insert an OK button inbetween Apply and Cancel.

but I need Apply because changes must be saved before managing speakers.
RLWA32 49,636 Reputation points

2023-08-15T22:20:13.7233333+00:00

I will keep the Apply. I need it.

I never suggested you remove it. :)
ChuckieAJ 316 Reputation points

2023-08-15T22:24:31.1333333+00:00

@RLWA32 😀 Alright. I’ll stitch it in tomorrow. As for Close, I deleted the handler since my Cancel handler is called anyway like you said.

Answer 1

Castorix31 90,686

You can see MSDN doc at https://learn.microsoft.com/en-us/windows/win32/uxguide/win-dialog-box

(mainly "Apply buttons" and "Commit buttons" parts)

ChuckieAJ 316 Reputation points

2023-08-15T18:18:24.16+00:00

Thanks.

Answer 2

Guido Franzke 2,191

Hello,

have a look at this interesting article: https://maze.co/collections/ux-ui-design/ui-design-principles/

IMO you should keep the order OK - Cancel - Help, so that your users can find the buttons fast. Accordingly, I would arrange the buttons in the order

grafik

Regards, Guido

ChuckieAJ 316 Reputation points

2023-08-15T16:53:50.1666667+00:00

Thanks! Let me try. 😊

Share via

Placement of the buttons on this dialog

1 additional answer

Your answer