Points to Take Care on Bidirectionality of the App

Living in an era of globalization, businesses have to think beyond the geographic boundaries. organizations are finding ways to expand their market reach and attain global presence.

Localization of mobile apps is of vital importance in such scenario. Besides, the very nature of any mobile app enables the user to have it accessed, bought and downloaded from any geographical location.

However, monolingual app can limit its appeal and the potential offered through Internet. Bidirectionality of your mobile app will play a crucial role when you are planning to cater a geographically diverse audience. This especially needs to be addressed while developing an app in Urdu, Arabic, Hebrew, Mandarin (Chinese) and Japanese. Apart from language and translation, there are other key points to take care for developing such mobile apps. Let’s study these points in details.

UI mirroring overview

The key point to focus while developing multilingual app is left-to-right (LTR) and right-to-left (RTL). These are language scripts in which the content is displayed.

• LTR display content from left to right
• RTL display content from right to left

However, RTL also affects the direction in which some icons and images are placed. When UI is changed from LTR to RTL (or vice-versa), it’s called mirroring. This affects the entire structure of the mobile app including layout, text, and graphics.

What should be mirrored?

• Text fields icons should be displayed on the opposite side of a field
• Navigation buttons should be displayed in reverse order
• Icons that communicate direction, like arrows, should be mirrored
• Translated text should be aligned to the right

What shouldn’t be mirrored?

• Icons that do not communicate direction, such as a camera
• Numbers, such as the clock and phone numbers
• Charts and graphs

RTL mirroring

When to mirror?

• The most important icons for mirroring are back and forward buttons. Back and forward navigation buttons are reversed.

(LTR Back Button facing West)

(RTL Back Button facing East)

• A volume icon with a slider at its right side should be mirrored.

(LTR Volume Button with speaker icon on the Left)

(RTL Volume Button with speaker icon on the Right)

• Icons that contain representations of text need careful mirroring.

(LTR Chat icon with Left alignment)

(RTL Chat icon with Right Alignment)

When not to mirror?

• Numbers, such as the clock and phone numbers. This is an important aspect of multilingual app which shouldn’t be mirrored.

(LTR Numeric Display starting from Left)

(RTL Numeric Display starting from Left)

• Most RTL countries do not mirror slashes.

(LTR and RTL Airplane Mode With Backslash)

• Certain icons might seem directional but they actually represent holding an object with one’s right hand. It is recommended to change the position of the icon but not the icon itself.

(A cup/mug to be held with right hand should be same for RTL and LTR)

• Anything depicting the passage of time should be mirrored. The media buttons shouldn’t be mirrored as they represent exactly what they mean. For eg., a forward button, or a next or a previous button.

(RTL Media Player with traditional buttons)

Localization

Localization is a concept of standardizing the content. It is required when the icons consist of texts or numbers.

Text in graphics

(LTR and RTL icon for Google Translate remains the same)

Numbers

(Translating the number in RTL icon with Arabic)

Alignment

When a user edits an RTL paragraph inside an LTR document, the text and the toolbar buttons should be in RTL.

(Right Alignment of the translated text and icons on the toolbar)

Understanding the difference

There are many languages that don’t require any alignment change after the translation. Moreover, such languages don’t demand the change in UI as well. But for certain languages mentioned at the start, it is essential to understand the difference at the time of UI design before initiating mobile app development.

LetsNurture has catered several multilingual app requirements. Our skilled developers thoroughly understand the UI and mirroring difference and implement the best of their understanding to serve meet the clients’ requirements. Email us your requirements and we shall be happy to guide you further. Write to us at info@letsnurture.com.