6

I have a table of data with a dynamic number of rows. It could have none, one, or a hundreds. The width is fixed across the web page and it has a fixed number of columns: 9. Along with this I currently have five action buttons, including two that select or deselect all rows, a refresh, delete, and another action. Also, I'm using jQuery 1.6.4, so I have a lot of available functionality with the dom and interactions.

My question is what is the best way to layout the buttons for the user? Currently I have the buttons on the left side of the page, stacked vertically, and centered in the middle of the page, but I was wondering if there was a better way to group them?

It looks clunky to me, but I'm not sure what other designs would be a better layout.

Here is a picture, but ignore the checkboxes, button, dropdown in the table itself, it's just data in the real table.

enter image description here

Improve this question
0

2 Answers 2

Reset to default
4

I haven't personally seen or found any studies on what placement of actions that control interactions with a grid of data is actually better. My personal opinion is to always group the controls at the top of the grid and make the positioning of them such that they appear to be in the same context as the grid. This should be fine considering the limited number of actions you have.

Think of it as just another toolbar for interacting with a content area. Also consider the fact that you actually used one in writing your question just now.

For your specific scenario right off the bat I would try to eliminate the select all and deselect buttons. As a matter of convention, I would expect to be able to do this via a checkbox on the grid. I would also place the refresh button as an icon in the top right of the grid -- basically in the header. All together, I would consider something like below:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • I should have mentioned that I'm using jQuery with a click event to highlight the row in yellow or to remove the highlight if it's there with another click. I opted to use that over the checkboxes to save user movement over the table.
    – user9533
    Jun 6, 2012 at 22:40
  • I think, based on what the requirements are, this is the best option. I can't put much time into any fancy jQuery magic. It's a plain jane page.
    – user9533
    Jun 7, 2012 at 0:32
3

It seems like the tables need all the space they can get. I would place the buttons as a floating layer and hide them, only showing a semi transparent Menu button, either on the top or the side of the screen. Mouseover should make the full menu appear, again floating on top of the table. This will also work on touch screens.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.