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

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

  • 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 '12 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 '12 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy