I have a bootstrap dialog that exhibits an object's data to the user.

Apart from displaying the object's data, the dialog must offer the user options to do general tasks on the object such as saving, deleting and archiving. As these actions are general, they should be displayed in a 'general' part of the dialog to make the user understand that these buttons will take action on the object and not on some of its properties.

A couple of ways of doing this:

  • Buttons at the bottom of the window:

enter image description here

The main problem of this design pops up when the dialog is a long one as the user will always need to scroll to the far bottom to take action on the object (delete the object for example)

  • Buttons on the side:

enter image description here

This is a good option Trello uses but I don't want to copy other's designs before thinking it through :p

  • A dropdown button next to the top close button

enter image description here

This is also a good option, the only problem I see with this one is that the different actions the user can take are hidden. A click, at least, is required to see what's underneath that drop down button.


  1. Which option is most suited for my requirements?
  2. Are there other patterns I could use that I am not aware of?

2 Answers 2


Button placement is a matter of convention and taste. Convention is dependent on which type of (web) application your building. In standard windows forms - buttons where placed at the bottom, but the size was usually fixed, giving the user a sense of flow when they worked. They knew where to find the buttons.

In your case, you tell us that content will have various length, which would sometimes move the bottom placed buttons below the fold (of the web page). That can be imporoved by placing the buttons to the right area, possably with a nudge of darker background color do make them stand out from the content.

That would accomplish the goal of users knowing where to find the buttons, and access them easily, with the least possible effort.


download bmml source – Wireframes created with Balsamiq Mockups

  • So the trello option is the good one then (number two on my bullet list)
    – GETah
    Jan 1, 2014 at 14:51
  • @GETah Yes! I think it's your best option. Jan 1, 2014 at 15:02

The fact that there's a lot of content in the dialog doesn't necessarily mean that users will have to scroll to get to the buttons. As a matter of fact it would be extremely unusual to have a dialog that extends below the fold. A perfectly standard solution is to introduce scrolling within the dialog, and leave the buttons in plain sight. An example from Facebook:

enter image description here

  • I agree to that, but Microsoft SharePoint does the opposite. You need to scroll to reach the buttons at the end of the content. Jan 1, 2014 at 20:33
  • 1
    @BennySkogberg well, SharePoint and Usability are two different things :)
    – GETah
    Jan 1, 2014 at 20:40
  • @GETah That's why I try to make SharePoint useful in my profession :-) Jan 1, 2014 at 20:44

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.