33

Assuming we have use a dropdown with a chevron to indicate that it is in fact a dropdown, does the position of the chevron change depending on the directionality of the language? I.E. does the chevron stay on the right, or does it move to the left?

See image below for visual explanation.

Dropdown position for language direction

2 Answers 2

29

What a great question. As a general rule, it's good to flip positioning of iconography for RTL languages. So your bottom option, with the chevron on the left, is correct.

If you're curious, I'm basing this answer on lessons learned running as lead designer on multiple projects with the NYC DOE and NYC mayor's office, where all projects have to support 11 languages, including 2 RTL languages. The systems involve manual translation, so my work was being advised by fluent speakers.

You can see a lot of this "flipping" at play with the NYC DOE online public school application system (https://www.myschools.nyc/). The real meat of it is behind a login, but you can get a loose idea of things with https://www.myschools.nyc/en/account/create-account/ vs https://www.myschools.nyc/ar/account/create-account/. Check out the header and primary CTA

2
  • 13
    This can also be described as "retaining the relative position of the icon within the context of the language" - that is, the icon isn't "to the left/right" of the text, it's "before/after" the text. Aug 9, 2019 at 18:36
  • 3
    I placed my desk and computer screen near a big, vertical mirror when I implemented RTL support. If it didn't look "right" to me as an LTR person, it was wrong.
    – Ray
    Aug 11, 2019 at 12:10
2

Seconding Ben's answer, if I understand the Material Design bidirectionality guidelines correctly then it should be mirrored:

When a UI is mirrored, these changes occur:

  • Text fields icons are displayed on the opposite side of a field
  • Navigation buttons are displayed in reverse order
  • Icons that communicate direction, like arrows, are mirrored
  • Text (if it is translated to an RTL language) is aligned to the right

And in the illustration, the chevrons are indeed mirrored:

English and Arabic UI illustrating bidirectionality

Apple's guidelines do not mention this explicitly, but do state that "In iOS apps, UIKit controls appear flipped when the app links against iOS 9 and later." If you develop for the iOS platform then you can check what theirs does.

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.