Interface localization for right-to-left languages. Opposite view of the world

Localization of IT products is always a difficult task, but if you are entering Asian markets, you may encounter languages that will require additional efforts to adapt the user interface. Recently, the Middle East has become of particular interest to IT business owners, which means there is a need to localize digital products into the languages of this region, three of which are written in right-to-left directions.

This article will be of interest to localization managers, product and project managers, UX designers and, to some extent, front-end developers involved in international projects with a target audience in the Middle East. The article discusses the specifics of preparing a user interface for localization into right-to-left languages (RTL languages). Although examples of localization into Arabic are given, the information in this article is applicable to all RTL languages.

The essence of the problem

Before we get into the specific interface elements that need to be adapted to RTL languages, it's important to understand the key reason for this need. The reason is that the direction we read determines how we view graphics that depict the direction of movement and the sequence of events.

For example, RTL language speakers will arrange the rendering of the animation of an opening gift in the following order:

Fig. 1. Rendering of a gift. Images by upklyak on Freepik

Users of RTL locales start viewing the interface from the upper right corner. This determines the need for mirroring of interface elements – primarily to preserve the visual hierarchy of the UI design.

What needs to be deployed

Those interface elements that are related to the direction of movement, reading direction and sequence of events need to be mirrored.

If you use a side navigation panel, you need to move it to the other side, but the order of the navigation sections does not need to be changed.

Fig. 2. The sidebar of the Google Chrome “Settings” page. English locale is on the left, Arabic is on the right.

If you use the top navigation bar, you should arrange the sections in the direction of reading, that is, from right to left.

Icons representing movement and the passage of time should be mirrored.

Fig. 3. Forward and back arrow in Arabic interface. Image by rawpixel.com on Freepik

Another example is the expanded icon next to the travel time to a selected destination in Google Maps.

Fig. 4. Google Maps. English locale is on the left, Arabic is on the right.

Primary and secondary buttons should be oriented according to the reading direction.

Fig. 5. Google News. Select language and region. The primary button is located on the left

Progress bars fill from right to left, in the direction of the text.

Fig. 6. Google Calendar. Russian locale is on top, Arabic is on the bottom

What you don't need to unfold

Interface elements whose perception does not depend on the reading direction do not need to be mirrored.

Icons that do not imply forward or backward movement should be left as they are.

Fig. 7. The “Headphones” icon in the Arabic interface. Image by rawpixel.com on Freepik

If a slash is used in icons to indicate an off state, there is no need to change its direction, as this is the meaning it is used in all cultures, regardless of language.

Fig. 8. “Mute” icon. Russian locale is on the left, Arabic is on the right

The direction of the media play button and media play indicator does not change as they show the direction of the recording, however the media play button should be located on the right.

Fig. 9. Media file playback button and indicator. Russian locale is on the left, Arabic is on the right

Although the writing is from right to left, the numbers are written from left to right, so there is no need to turn phone numbers and clock faces around. However, it should be remembered that the Arabic and Persian numerals are written differently from the European numerals, so in most cases they also need to be localized, although in some countries there is already a tendency to use the European version. To decide which version of the numerals is right for your product, contact specialists from the country you are interested in – they will be able to advise you, taking into account the features of the product and the established local practice.

Fig. 10. Telecomegypt contact page. English locale is on the left, Arabic is on the right

Conclusion

So, if you have to prepare the interface for localization into RTL languages, take into account the fact that the direction of writing affects how the user views the interface and how he perceives graphics that show the passage of time or forward/backward movement. This approach will help determine which interface elements require adaptation for regions where RTL languages are used.