Buttons on a dialog window

Question

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:

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:

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

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.

Questions

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

Answer 1

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}

Answer 2

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: