6

What are the logical reasons to place following action buttons at the left side or the right side of the form?

enter image description here

enter image description here

Improve this question
2
  • ...or option 3... in the center
    – scunliffe
    Dec 18, 2016 at 16:59
  • 1
    ...option 4: add an option (if you work with logins) on for the user to pick the side. Then, assuming you have a piece of code to render the buttons, you can pick the placement inside that function.
    – Ismael Miguel
    Dec 18, 2016 at 17:24

2 Answers 2

Reset to default
4
  • For Mobile devices:

From a usability point of view on Mobile devices, it might be better to place them at the right. This is because most people are right handed ( Studies suggest that 88–92% of the world population is right-handed) and it is closer to reach it with the right hand thumb.

  • For Desktop devices:

OSX and Windows as far as I know have such action buttons in Dialogs always on the right side so it probably makes sense to use the OS way of structuring the UI in Dialogs.

Also relevant but out of the question.

Material design Actions in Dialogs:

Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.

  • Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”

  • Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.

Improve this answer
5
  • Regarding the button order there's a lot more to it. It is important to know your audience. On Windows for example positive buttons (ok, save) are on the left and negative actions are on the right (cancel, close). Designers on Mac often forget this and create an awkward experience for their end users.
    – scunliffe
    Dec 18, 2016 at 17:05
  • 1
    Being on the right side doesn't necessarily mean it's easier to reach with the right thumb. It could land too close to the corner, where the thumb can't bend to reach
    – Alexander
    Dec 18, 2016 at 17:58
  • I tend to place on the right, but can't escape feeling that the left is better as the buttons are likely to be closer to where the mouse pointer is prior to being clicked.
    – Nick
    Jan 29, 2019 at 15:02
  • @Nick, interesting perspective. It makes me think that placing them on the right would add some cognitive load which might be appropriate.
    – Alvaro
    Jan 29, 2019 at 15:06
  • @Alvaro appropriate in some cases for sure, but for a low/zero risk dialog, it seems wrong to require the user to trek across a web page to find an Add button when it could be just below the other controls. Even worse if the dialog is responsive and the primary button moves further away from the controls as the dialog expands.
    – Nick
    Jan 29, 2019 at 16:46
5

People tend to view the left side of the windows rather than the right side, so in my opinion that if your form has a very wide space the best option is the left one, but if your form in a small dialog you could choose between left/right side.

Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable.

Nielson Norman Group

Improve this answer

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