Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Questions

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

2 Answers 2

up vote 4 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
So the trello option is the good one then (number two on my bullet list) –  GETah Jan 1 at 14:51
    
@GETah Yes! I think it's your best option. –  Benny Skogberg Jan 1 at 15:02
    
Cool, thank you :) –  GETah Jan 1 at 15:46

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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