A dual list box is a component-based on two list boxes placed together that allows adding, removing, and ordering items.

According to Kaley from the nngrounp: "The Listbox on the left holds available options and the Listbox on the right represents selected items. The Add button moves an item from the available list to the selected list and the Remove button moves a selected option back to the available list, to deselect it. Users can also move options up and down to reorder elements in the list"

My concern is the following, due to the normal order of reading of a user, it seems more natural to place the selected list box on the left instead of the right. Because the page scanning is faster when you only want to review while defining is the opposite.

enter image description here

So, my question is:

Does it matter the order of the list boxes? or it's just to be consistent using always the same order because users will learn the pattern reading the labels?

1 Answer 1


Your observation that it's easier to read columns of information when they're left-aligned is correct. However, flipping the box order in a picker pattern breaks one of the usability heuristics: match between the system and the real world. System patterns should match patterns that are already understood in the real world, including those in use in other digital systems.

People in left-to-right reading populations also prioritize information groups left to right - think of a menu that flies out to the right, where as the user moves from left to right, they move from all options to a narrow set.

Flyout menu with three levels

Image source: ostraining.com

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.