I got this question while working on a "Persian" app. As you may know, dual lists are consisted of 2 lists, where normally in a LTR language, the list on the left includes all the available options and the one on the right includes the ones that the user has selected from the left one. Now here's my question: If the app's language is a RTL one, should the order of the lists be reversed, meaning that the list with the available options be placed on the right, and the one with user's selection on the left?
-
You could also think about adding a check icon to the list with selected items, so it is less ambiguous.– NashMay 31, 2021 at 9:09
-
Using a design that guides users (using arrows maybe) and showing instructions should be taken into account. If done right you might not even need changing the orientation, but that is something I just assume.– jazZRoJun 1, 2021 at 8:15
2 Answers
If from List A to List B is considered as a direction and something moving in time, then yes.
Google's Material, in their Bidirectionality guidelines, talks about how to mirror user interface from LTR languages to RTL languages and other way around. They don't specifically talk about this kind of dual list box (or picklist) but we can infer the answer from what they say about direction.
Following image shows basics of UI mirroring. Points 1 and 7 shows mirrored directionality, back arrow and used storage space respectively.
On mirroring directional icons, guidelines say following:
The most important icons for mirroring are back and forward buttons. Back and forward navigation buttons are reversed.
So LTR back arrow <- becomes back arrow -> in RTL. To me same should apply to dual list box, which usually have arrows between boxes. This means that boxes themselves should mirrored. So available options box is on the right and box with selected options is on the left.
Disclaimer: My native language is LTR.
I think the most important aspect of having two lists is to indicate the direction of the flow.
As long as you provide an arrow to specifically state that elements go from one list to another, it should be fine regardless of the direction.
But if you look at what Apple does in his own tools, you can see that elements that have a "list" and a "detail" page are indeed following the RTL direction.
See : Apple Documentation