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.
    Commented Apr 5, 2013 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é
    Commented Apr 5, 2013 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. Commented Apr 5, 2013 at 11:52
  • What tool was used to create those mockups?
    – mdrozdziel
    Commented May 17, 2013 at 18:02

2 Answers 2


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
    Commented Apr 5, 2013 at 12:56
  • Do you have a reference for these assertions?
    – Seb
    Commented Sep 24, 2015 at 8:46

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
    Commented Sep 24, 2015 at 9:23

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.