User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 0 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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