8

Scenario: File upload process for a website on desktop(not mobile) launches a modal window.

Question: Would it be better to place action buttons at the top or at the bottom of the window.

Pros & Cons for Top Placement: more content area space however process flow starts from top left,moves down, then back to the top

Pros & Cons for Bottom Placement: Less content area space, better process flow, odd scroll window placement.

enter image description here

  • 1
    The bottom placement is standard for Dialogs. See, for example, the Apple OSX HI Guidelines section on Dialogs. – Dan D. Apr 5 '13 at 10:03
  • Also, if you move the Submit Pictures button to the bottom right instead of the bottom left, your flow would be more natural. – André Apr 5 '13 at 10:11
  • If you're so concerned with content space that you'd consider putting the Submit button in the header bar, why not put the Add button and Album text box in the header bar, and the Submit at the bottom? Now you have the advantages of both designs. – Michael Zuschlag Apr 5 '13 at 11:52
  • What tool was used to create those mockups? – mdrozdziel May 17 '13 at 18:02
21

You should have the buttons at the bottom right because:

  • The standard for modals is to have the buttons at the bottom, so it is likely where people will look for action buttons
  • It is a more natural visual flow reading in a Z pattern, and one that has become entrenched.
  • A button on the right is typical for a submit button as it has the feeling of moving forward (in a left to right language).
  • 1
    +1 For Z-pattern. The setup described is also standard across platforms. The 'save dialog' on both PC and Mac, for example. Title/Header - user interaction area - cancel/save...it is a human computer interaction standard. – Josh Bruce Apr 5 '13 at 12:56
  • Do you have a reference for these assertions? – Seb Sep 24 '15 at 8:46
0

According to this use study, it is better in terms of errors and completion to have button at the bottom left.

  • 2
    While being a good study, it was not using modals as a reference, but rather applied to web forms. Due to that, it used a layout where the page width was significantly wider than the content, resulting in a situation where any right aligned button is outside of the visual content. Additionally, it was done before any major use of smartphones, which have had an effect on use behaviour. – JohnGB Sep 24 '15 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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