I'm designing a widget to select names, and move them to two different fields.

The left list will display all available names. On the right we'll have two fields: a textbox and another list. User can move a name from the available list either to the textbox or to the selected list. He/she can also move a name back to the available names list. Since the selected list is a large (in respect to height) field, its no problem to fit the buttons on its side. However, the textbox has a small height and I can't fit both buttons to move in and out on its side.

enter image description here

Can you guys help me to think a work around? I'm not sure if rescaling the textbox in order to fit its height to buttons height would be good, because its field would be too big for the text, or the text would be bigger than the rest of the texts.

  • This is more a design problem. Maybe it's not necessary that users remove names back from the right to the left. If the left list would always show all names, you could have them move names to the right and a little 'x' next to each name to remove them again. Not sure if users understand the meaning of the double arrow buttons. Guess it will move all names in the list? Commented Mar 21, 2012 at 21:44
  • That's it! The double arrows moves all from left list to right list and vice-versa. Actually the left list doesn't show all names all the time because if a name is on the textbox it can't be added to the right list (the same if the name is on the right list). So, when a name is moved to the right, it disappears from the left list. It's related to the business logic, it can only be in one box at a time. Commented Mar 21, 2012 at 21:59
  • I just had the idea of using drag n' drop to move the names within the boxes. This would work to move not only single names but also a group of names. Do you think it's ok to use drag n' drop with text? Commented Mar 21, 2012 at 22:07
  • You can use drag and drop with text but it's still not common. If it's a standard html element you can also select multiple entries by pressing the ctrl- or cmd-key. That's around for a long time already and also still not known by every user. Might be easier to decide if you know your user group though. Commented Mar 21, 2012 at 22:13
  • @user12999 ctrl to multiselect in HTML selects is pretty rare and undiscoverable, I'd certainly avoid it unless it's a purely optional feature.
    – Ben Brocka
    Commented Mar 22, 2012 at 0:19

3 Answers 3


I can think of two options

  1. horizontally aligned buttons (instead of vertical aligned)
  2. using kind of an accordion on the right side

How about using sort of an accordion for the right side?


download bmml source – Wireframes created with Balsamiq Mockups

If you want to keep the buttons designed like this, just with symbols, you should use a title for the buttons (e.g. 'move all to the right')

  • I like the idea of using horizontally aligned buttons. Is it intuitive? Commented Mar 21, 2012 at 22:30
  • To me even more intuitive as the alignment visually supports the direction your moving the names to. But that's my opinion. To get some evidence on this please show it to real users and ask for feedback, ideally compare two version implemented in a clkickable prototype. Commented Mar 22, 2012 at 7:29
  • This issue I have with these suggestions is that the action button for each element is not the button next to that element (i.e. the button to move an item from the left list TO the right is actually closer to the Right list).
    – JonW
    Commented Mar 22, 2012 at 9:13

An alternate approach you can take is to show the selected items as an tag cloud where items can be selected or deleted.

For example if your select on the left hand side is :

enter image description here

The right hand selected elements would be

enter image description here

The basic advantage of this is the user could select and add several items within the space constraints as he is using the horizontal and vertical spacing well.

This plugin called chosen provides a way to implement a dropdown as the "tag cloud" but I am sure you could modify it to make it work with a list

  • One drawback is that most of the times users will select many names to move to the right hand side at one time, and may be a lot of names. With this approach the user would have to add each name at a time, right? Commented Mar 21, 2012 at 20:20
  • Well if you are using a dropdown yes,but if you use a multiselect list and customize the jquery plugin to handle multiple selects ,you would just need a single move button to move it across
    – Mervin
    Commented Mar 21, 2012 at 20:21
  • I couldn't find any examples like this on the page. Is there any there? What I mean is, even if the user is allowed to select more than one option (like a multiselect list), he still needs to choose one by one. Move many names from the available list to selected list at the same time is an important feature for me. Commented Mar 21, 2012 at 20:28
  • 1
    Yeah I don't see anything,but I looked at the code and it seems like the code can be modified to suit your purpose.I'll update my answer to reflect any updates I find
    – Mervin
    Commented Mar 21, 2012 at 20:32

I assume the use of a textbox at the top right means that only one name may be selected at a time?

If so, how about this minor change:

Sample image

Motivation - the left hand arrow must leave the field clear(blank), and therefore could be replaced with a cross/delete symbol. Using a different symbol frees us up to move the button elsewhere.

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.