I've been asked to look at the design of a table that has buttons at the end (highlighted)

enter image description here

Obviously these options should be at the head of the table where they can be seen straight away by the user. But, as with a lot of things in life, tech has told me they cannot change the position of the buttons.

So my question is: without changing the position of these actions, how can I better style them? My thoughts: group into logical groups; remove button styling and restyle:

enter image description here

edit: in light of dans comments:

enter image description here


A few thoughts:

  • The organization of the buttons into categories definitely helps. This is a big improvement.
  • Given the two style options, I think the button style looks better--it is not as obvious that the plain text styled buttons are actions, and they are not emphasized enough.
  • The original style could certainly be improved, but it needs to be something that makes it clearer that you are intended to interact with those links. Also, stylistic consistency across the page is important. You shouldn't restyle these buttons unless you plan to also restyle any other actions on the page in the same way.
  • I would put all of these actions into a box, or some kind of visual container, that helps group them together visually and makes them further stand out. It will help counteract the fact that they are at the bottom of the page and not very noticable.
  • good advice dan and a colleague picked up consistent visual styling. I'll have another bash. – colmcq Oct 24 '14 at 12:57

I agree that organizing the buttons into categories is an excellent choice. The groupings make sense, and it's easier for the human brain to chunk these pieces of information. So it's already better.

Here are a couple of things to think about. I'll give you a high-level strategic approach and some possible quick wins.

Quick wins: - Is there a way to space the buttons out so that they appear underneath the columns which they affect? If the column width is consistent, and this application is not being viewed on a variety of screen widths (it's not responsive, I'm guessing?), this could be a nice, logical way to tie actions to their respective columns.

  • Visually, I would recommend creating a way to draw the eye down to this box of actions. There is a path of color that leads down the page by virtue of having the icons on the left. Incorporating a bright color in this box can draw the eye down. (That said, don't go bonkers - make sure it's stylistically matching the page so it doesn't look like an ad, because then people will ignore it.)

High-level strategy: Consider the "verbal approach". If you think of the buttons in the box something like "Options" or "Actions" this can help guide your strategy.

These buttons are the Verbs: things you can do. And the items in the table are the direct objects.

So if you were explaining to a coworker or a friend what you'd do on this page, how would you describe it?

The answers you create to these questions will help you derive a solution based on your own knowledge of this application and your experience as a designer.

Good luck!

Your Answer

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

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