Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 6 down vote favorite

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.

share|improve this question
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? – greenforest Mar 21 '12 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. – João Daniel Mar 21 '12 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? – João Daniel Mar 21 '12 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. – greenforest Mar 21 '12 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♦ Mar 22 '12 at 0:19
show 2 more comments

3 Answers

up vote 4 down vote

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?

mockup

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')

share|improve this answer
I like the idea of using horizontally aligned buttons. Is it intuitive? – João Daniel Mar 21 '12 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. – greenforest Mar 22 '12 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♦ Mar 22 '12 at 9:13
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer
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? – João Daniel Mar 21 '12 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 Mar 21 '12 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. – João Daniel Mar 21 '12 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 Mar 21 '12 at 20:32

Your Answer

 
discard

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.