I like to think on design and usability terms but, first of all, I'm a developer and I need your help thinking on how to design a reusable web control.

I've a data grid like the one below.

enter image description here

User can perform several actions on an item (it can go from 5 to 20 actions, depending on the grid).

That being said, my goal is to design a web control to be used on settings page for the user to customize how the actions are arranged within that actions column. He/she can choose which actions are the main ones (first 2 icons on the example grid) and all the others are the secondary ones and will appear on a popup menu.

Like I said this is a control to be reused and the number of possible actions may vary. User can select as many main actions as he/she wants. In an extreme case all actions may be main ones and, in that case, no [+] popup menu will appear. The opposite may also happen where there's no main actions and only the [+] popup menu will appear

My users have a technical background actually but I can't think of a control that would be easy to understand for a first-time user, easy to deal with and use.

I can add more details if you want me to.

Any help?

2 Answers 2


You're basically trying to define a subset of items out of a larger set, and display them in a specific order. The most common way of doing this is having the full list and the short list on the same screen and providing add/remove buttons for adding items to the short list (Actions in your case), and up/down buttons for rearranging the short list. That's how MS Outlook lets you customize your grid:

enter image description here

and how MS Office lets you customize your quick access toolbar:

enter image description here

A complementary way to do this is provide drag&drop functionality, where you can drag items both between and within lists - but it shouldn't be the only way.

In terms of the Main vs Secondary actions - you just split your short list in two and give the two lists the appropriate titles.


You could allow the user to order the buttons, even via drag & drop. Chrome does this with the extension buttons to the right of the address bar. You can move the buttons, change the size of the visible portion by dragging and the invisible buttons appear in a context menu automatically.

two buttons one button

Ordering the buttons and resizing the container are a very direct and intuitive way of orchestrating that interaction.

Your Answer

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

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