Best button placement given existing layout
this is my first time asking about UX. My intention is for the layout to be as intuitive as possible for the user regarding button layout. I've got this page developed and I'm not sure about what button placement I should choose.
The buttons at hand are the 5 unstyled buttons at the bottom, with the extract button being a bonus since I'm not sure where to put it. I was thinking about the following placement options:
- Immediately to the right of the respective header
- Immediately to the left of the respective header
- Far right of page, still vertically aligned with header
- A bar of buttons at the top just under the hamburger button
- A floating widget with all of the buttons
My issue with the first option is that the header lengths are different, so the buttons wouldn't be aligned vertically and the second/third options would just look weird. I like the first three options though, because their position relative to the header would allow them to be something simple like a button with a +
on it rather than words.
You may have also noticed that I have two TIBCO buttons but only one TIBCO section. that's because I grouped the TIBCO copy and promotion actions together, so I suppose doing the above approach would work the best if I split it into two sections.
The 4th option could be weird too, but maybe not so much if they were all spaced out evenly.
I really like the floating widget option, but I'm using AngularJS, and for some reason I can't get ngMaterial
to work, so a different implementation would be great, but I haven't found one that can be easily integrated.
Any and all suggestions are appreciated.
Note: If it affects your choices, the container I've got all of the markup in is AngularJS's container-fluid
, so it resizes dynamically based on the window size in addition to bootstrap 3's mobile-first approach.
EDIT: The tomcat button is for GMS 1.0 and the Weblogic button is for GMS 2.0
EDIT 2: This is what it looks like after pressing each of the buttons. I feel like it's not very pretty since the headers aren't all sized the same causing vertical inconsistency with the buttons.