UX Best Practices for Bi-Directional Languages
Designing for the Middle East region poses some unique challenges for both designers and developers, this is because the writing systems such as Arabic, Hebrew, and Farsi require bi-directional text support (BIDI). This is the ability to input and display text layout in either right to left (RTL) or left to right (LTR) order. In order to produce a user experience that will look and feel natural when presented to Arabic and Hebrew users, designers are encouraged to mirror the UI directionality so that it flows from right to left. In this guide I'll cover common scenarios to keep in mind when localizing the designs of user interfaces.
Mirroring the UI Layout for RTL languages
Adjusting the UI for RTL languages allows for the information to be presents in a pattern already familiar to users from printed publications such as books and magazines, where the reading pattern always starts at the top right corner and progresses to the left. The general rule of thumb is to present timeline based elements as RTL and to adjust localized text so that it flows from right to left.
The general rule of thumb for mirroring icons keys off directionality, for example the back and forward navigation buttons are the most significant in terms of UI mirroring and are adjusted so that the back button points to the right and the forward button always points to the left when the UI has been adjusted for BIDI languages.
Media controls inherit layout and arrangement from audio video hardware such as VCR's, Cassette and Compact Disk players. Playback and other related buttons retain their original left to right (LTR) arrangement. In Addition, the playback progress bar advances from left to right (LTR) and if the design includes a horizontal sound volume slider it should also retain left to right layout.
Mirroring Progress Indicators
Horizontal Progress Bar
commonly used for visualizing the status of process, is expected to progress from right to left (RTL). The only exception to this requirement is found in media controls which are covered earlier in the article..
Circular Progress Indicators
These derive their directionality from analog clocks and always turn in the clockwise direction.
Percent symbol positioning as noted in the illustrations, differs from Arabic to Hebrew. Arabic requires that numerals display using Eastern Arabic digits with the percent symbol on the left, while Hebrew requires that numerals display using Western Arabic digits with the percent symbol positioned on the right.
Mirroring Buttons And Sliders
On/Off Buttons should be mirrored with the "Off" position on the right and the "On" position on the left. Check Mark buttons should not be mirrored with the longer leg positioned on the left.
Horizontal Sliders should be mirrored in most cases with the minimum range on the right and the maximum range on the left.
Horizontal Sound Volume Sliders are the exception and inherit their directionality from Media controls which are not mirrored. Designers may be able to simplify their UX by incorporating a vertical Sound Volume slider rather than a horizontal slider.
Mirroring Rating & Page Selectors
Rating Selectors often used to collect user feedback should be mirrored, with the lowest rating on the right and the highest rating on the left.
Page Selectors are also mirrored with the "Previous Page" button on the right and the "Next Page" button on the left. The numerals that are used to indicate the page number should also be rearranged in right to left order. For Arabic languages the page numerals should display using Eastern Arabic digits. Note that Page Selector directionality may adjust based on content, for example if your app UI is localized to Arabic or Hebrew but the content that is being presented is English than it might make more sense for the Page Selector to present from left to right.
Designing Notification With adjustable Text Layout
Text notifications require built-in flexibility to adjust the text alignment and layout based on the notification language. When displaying Arabic, Hebrew, or other BIDI language notifications, the text is aligned to the right, and when an English or other LTR text arrives the text will align to the left. Note that adjustable text layout requirements fall under the software globalization and are agnostic of the users preferred UI language selection. In other words, in order to produce better UX for BIDI languages requirements for adjustable text layout in notifications should be integrated into your design even if you elect not to localize your UI for BIDI languages.
Text Reading Order Vs Text Alignment
BIDI text properties contain the ability to adjust the text layout to either RTL or LTR. This differs from the ability to establish text alignment across the design because it has influence over readability under certain conditions. The key is to ensure that developers implement a solution that handles BIDI text reading order by dynamically detecting the source text and making automatic adjustments to the read order. A comprehensive guide to the Bidirectional Algorithm which is responsible for displaying BIDI text correctly across iOS, Android, Windows, and OSX can be found on the Unicode Consortium Website. Most modern programing frameworks include functions that detect Bidirectional languages and adjust text layout and alignment as needed, developers should note that this might not be the default behavior.
BIDI languages pose a unique challenge for text trimming, certain developer implementations may result in unwanted leading edge text trimming which deteriorates readability across the UI especially under mixed language scenarios. Developers should pay special attention to ensure that text trimming is derived off the content direction rather than the UI layout. RTL text is clipped from the left side, and LTR text is clipped from the right side.
Enabling Text Input In Any Direction
Text input may be RTL or LTR, most modern operating systems will adjust the layout and alignment automatically during the text input process. Designers should pay attention to the positioning of certain UI elements to ensure overlapping does not occur while the text is adjusted. Developers should also ensure consistency in the text reading order between the user input and the results that are shown.
BIDI Touch Gestures
Designers and developers should pay attention to touch gestures especially with custom controls which may not function properly under mirrored UI. In terms of back and forward navigation gestures should be adjusted for a few scenarios including reading experiences, and or horizontal navigation.
Additional Resources On BIDI And i18n Support:
Apple iOS Internationalization at Apple iOS Developer
Google Internationalization (i18n) at Google Developer
Internationalization for Windows Applications at Windows Dev Center
The World Ready Guides plan to engage with the world's leading software producers by publishing product reviews that focus on software globalization, our goal is to raise more awareness within the design community by providing practical real-world examples sourced out of today's most popular software products.