Monday, February 26, 2018

selection - Moving Elements Between Lists



I have a question... I'm dealing with an interface that has two lists, and you can drag and drop elements between them.


What would be a better approach and why?


a) Moving between lists doesn't change any behavior of the buttons between them. If item three is moved to the right, the system will remove the item from the source list, select the next available item in it and put it desired item in the target list. Focus of previously selected item gets lost and replaced by another one. (In the figure below, Item Three was pushed to the other list, and Item Four got selected).


mockup


download bmml source – Wireframes created with Balsamiq Mockups


b) The behavior of the middle button changes, as the item selected doesn't lose focus. As opposed to previous example, moving clicking once on the middle button > will move the item from one list to the other and it will change to <.


mockup


download bmml source


In my opinion, option b is more friendly as it allows you to go back to a previous state (undo) easily. It also removes the need for disabling buttons, and having items selected on both lists, and that to me makes it a bit easier to use.





Bonus: Considering solution a) we know that when an item on the left list is selected, it can only go to the list in the right, and the other way around; when an item on the list on the right is selected, it can only go to the left list. Would disabling buttons accordingly may be annoying to the user or should be encouraged?



Answer



Take a look at the bigger picture. What is the user going to do next? Probably not undo - possible but not probable?


If the likely next step is to move another item from the left list to the right then you should leave focus on the next item in the source list, so that the user can move multiple items easily be sequential pressing of the arrow button. So to move items 2,3 and 4, you'd select item 2 and then press the arrow button 3 times.


Similarly if you moved an item from the right list to the left.


Assuming the list is ordered, you should maintain the same order in the second list as the first, unless there is a good reason not to (like the list is acting as a history of chronological events and is ordered by most recently added).


There's no need to disable (grey out) buttons except when one list is empty, and don't hide them at all as it prevents visual exploration of the affordances of the scene.


So option a) it is.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...