2

Foundation 5 has their "ok" button on the left side of the modal-dialog. jQuery ui, windows & Mac (maybe more) has it on the right. Do they know something that everybody else doesn't? Or is this completely a subjective thing.

I'm not talking about [ok][cancel] vs [cancel][ok] that's been covered in depth. I'm talking bout about having the button left aligned vs right aligned.

I'm of course going to keep it consistent throughout my entire app, just wondering if there's an advantage having it on either side and why Foundation/Zurb chose the left.

Screen shots as requested.

Foundation 5 Foundation 5 modal dialog

Chrome on Mac

Chrome alert on Mac

jquery-ui

jquery-ui modal dialog

IE11 on Windows 8

IE11 alert on Win 8

|improve this question
  • 6
    This question should really be directed at Zurb but it's perhaps worth noting that they have said "we purposely left our styles sparse" and "left out a lot of complex styles so you can add to our defaults easily without having to override a bunch of styles baked in", so one might assume that the left alignment is just the easiest default layout. – Matt Obee May 12 '14 at 14:21
  • Could you provide a link to the page? Or, probably better, give us a screenshot? – Ken Mohnkern May 12 '14 at 15:34
  • Something I overlooked is that in the survey app I'm working on, the 'next' button to advance pages is in the bottom right and always has been. Would that be something that would influence the placement of the buttons in the modal? – alanj May 12 '14 at 18:32
  • We cannot answer why foundation did anything. There can be any number of reasons. On the right may be a good default, but if the ui wins in clarity by putting it left, that may be better. You should not approach ux looking for hard rules like "buttons go on the right". As it is, I'm voting to close because you're not going to get anything but opinions here. – Koen Lageveen Jun 7 '14 at 9:23
2

I disagree with Francis; modal dialogs more often have buttons right-aligned and text left-aligned. There isn't a strong, well-established usability reason for this other than consistency with other existing examples. That is, because most dialogs have the button(s) on the right, the user will expect the button(s) to be on the right.

As a user, I personally am subconsciously annoyed when elements are not in their usual place. When I look at Foundation's dialog, without thinking my first reaction is that the dialog is set up oddly or wrong. Now in reality there's nothing functionally wrong with it. It just breaks my (the user's) expectations by being different from the norm. By itself, this is no big deal. But if the UX has a lot of these little breaks in expectation, it can make an otherwise great app/program really annoying to use.

|improve this answer
  • I disagree with you :-) The reason pushbuttons are usually in the lower right is reading order: Before I can decide which button to click, I need to have read all the text in the window. Having them in the bottom-most and right-most place possible encourages a user to see the important parts of the window first. It also helps users recognizing the window to scan ahead to the buttons. And it puts the buttons where the eyes are after reading anyway. Finally, it is generally consistent with Back/Next buttons, where reading order dictates that Back be in the left. – uliwitness Nov 18 '14 at 5:33
  • @uliwitness If I read your comment correctly, you're disagreeing with my reason, but agreeing with my conclusion (that the button should be right-aligned rather than left-aligned), right? – mouseas Apr 6 '15 at 19:33
3

The placement of the OK button really depends on the content of the modal.

If you tend to use them for forms, a left justified button may be best. As forms are usually left justified it is easiest for users to go down in a straight line. A user's eyes are likely not to leave the left side of the modal often.

However for shorter modals that may not have much information. The user will be reading from left to right. Chances are that the user will be done reading on the right side of the modal which would make a button right justified feel more natural.

You should also note that this site also uses similar conversions:

  • Post Your Answer button at the left of the longer form
  • Add Comment button to the right of a field
|improve this answer

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