2

I have been asked to come up with an interface for managing lists.

I have a screen with two lists. One list tells me what current Wards have I have assigned and the other list tells me what Wards I can choose to add to the assigned list.

enter image description here

Is it better to have the assigned list on the right or the left?

3 Answers 3

2

Let's describe the workflow you presented to us :

  • First, the user checks the list to know which wards are avalaible.
  • Then, the user chooses a ward and decide to assign it.

  • The user repeats this operation the number of times he/she wants.

  • After that, the user will check the second list to be sure he/she has
    assigned the correct wards.

  • Maybe the user is going to de-assign some wards.

I assume you are designing this for the western world. Considering the workflow and the fact that we read from left to right and tend to organize our actions chronogically from left to right, I would put the assigned list on the right and the available list on the left. That means, inversing your picture.

2

The Problem

I don't believe your biggest issue is "should the selected be on the right or left"--I think what hurts it the most is the fact that those arrows communicate nothing.

In my experience, using the arrows you have in your lists requires more processing because they point from left-to-right or right-to-left, but they're positioned vertically. It wouldn't make sense to position them next to each other (as they describe an action not between each other, but between the two lists). Additionally, they don't communicate which side the "selected" items are on, so the user has to look for headers or other context clues to find that out.

The Solution

I find that Microsoft has solved this quite well.

Microsoft list management

In the screenshot, Microsoft changed the buttons to "Add >>" and "Remove". This gives much more immediate affordance as to which button does what you want, and where the "selected" items are.

0

@maxathousand, did you noticed the microsoft print screen button [Add >>] is in enable mode. For example, if I don't select anything from the left side box, the button should be disable mode, like [Remove] button. Once I select any category from the left box, only then the [Add>>] button should be enable. Like that, the arrows which @colmcq created, bottom two arrows >> are confusing but the left < and the right > is okay because I believe they are in disable mode. As explained above, the user should select item from the left box and move it to the right box, only for that time period the arrow > should be in enable mode. @colmcq the assigned list should be on the right as we are following the same ubiquitous convention in microsoft and macintosh as shared by @maxathousand, see the "Customize" category and the result is on "right-side" of the screen. 

4
  • Actually, the "<Separator>" is selected by default as the first element in the list, but the element it's a part of is not active (because I hadn't clicked into it) so the background of the "<Separator>" is that greyish color instead of the active blue color. This means that clicking "Add>>" will actually add <Separator>s to the list. Aug 4, 2016 at 14:03
  • yes @maxathousand, I did notice "<Separator>" but didn't thought it will add to the right-hand column. may be because, the "<Separator>" doesn't have an icon on its left-hand side like rest of the link has, thanks for the update. Aug 5, 2016 at 3:15
  • True. I agree it's not the clearest, but at least the button is enabled for a reason :) Aug 5, 2016 at 3:16
  • yeah I thought so, why it was enabled as rest was thoughtfully disabled. I really appreciate your reply, and update :) Aug 5, 2016 at 3:36

Your Answer

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

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