The world of Latin and Cyrillic alphabets seems to be so familiar. You know intuitively where the call to action should be, how to place captions to the input fields and...
Suddenly! The task of mobile app localization to Hebrew comes into your life. Your left-to-right world changes to the right-to-left world.
You must be thinking that there is nothing difficult about this project. You just need to mirror the mockup and a client will be happy. But in the right-to-left languages there are a lot of nuances and micro rules, which were not so easy to find and had to be put together one by one. In this article we will tell you what we have learned during our project with Hebrew app design - DOKKA.
Symbols and writing
Let's start with the terminology.
Left-to-Right (LTR) is a writing system where writing starts from the left of the page and continues to the right. For example, Cyrillic and Latin alphabets that are common for us.
Right-to-Left (RTL) is a writing system where writing starts from the right of the page and continues to the left. The most widespread right-to-left languages are Arabic, Hebrew, and Persian.
There is also a Bidirectional (BIDI) text that contains writing from left to right and from right to left. Hebrew fits this description because it uses the European digits we are used to, and they are written from left to right.
Image from behance.net
The Hebrew language also has its own numerals, but they are mainly used in religious texts. So, European numerals are more common, whereas Roman numerals should be avoided at all.
Depending on the headset, the display of symbols may differ. For us, these differences can be invisible, but not for the native users. Firstly, it is necessary to choose the right font, and secondly, to test it with users.
For example, fonts can be picked up on codepen.io or right on fonts.google.com
And of course, the text is right-aligned by default. Centered text is also acceptable.
The letters of the Arabic alphabet differ in width from those in the Latin alphabet, which creates a visual difference on the site. So, don't forget to test "bottlenecks" such as input fields, where there is a chance that the entire text will not fit. Our advice is to leave a little more horizontal space for mobile application localization to RTL.
Arabic names were historically based on a long naming system. Their structure is the given name, a patronymic or series of patronymics and the family name. For such cases, three fields should be provided.
Dates localization
This applies not only to the RTL, but also to the date format in general, which may vary from country to country. If you are not sure about it, better check.
It is better to reflect the calendar, but not all sites do it, which is proved by two examples below:
Images from bac.org.il and cdb.org.il
Another tip not only for RTL, but for multilingual sites and apps localization in general. Make the choice of language simple and understandable for users:
Image from dribbble.com
Mockup
The most important thing to understand is that RTL users scan the page from the top right corner, so there you should place the information you find important. But usually the LTR-mockup is prepared at first, and then it is adapted to RTL. There shouldn’t be any problems with text, but there could be some with images. It is also important to adapt them to the RTL-users. If important information is on the left side of the image, then make a new reflected version of it.
Image from priority-software.com
How to turn an LTR mockup into an RTL during the right-to-left app localization:
· place text fields and icons on the opposite side;
· put the navigation buttons in the opposite order;
· reflect icons that indicate the direction (e.g., arrows);
· align text right.
No need to reflect:
· icons that do not have direction indication (e.g., camera);
· numbers and hours;
· graphs;
· objects that are held in the right hand (such as mugs or magnifying glasses), because they are not relevant to the direction, but only refer to the fact that most people are right-handed.
To learn more about what icons to reflect, you can read in the Material Design guides
Difficulties when working with an RTL mockup
In addition to the visual subtleties, there was one significant technical challenge. DUring the Hebrew app design it turned out that when inserting the Hebrew text into graphic editors like Sketch and Figma, the symbols go in the opposite order. Sketch had solved the problem by then and added automatic adaptation, but in order to insert Hebrew text into Figma, you have to mess around and use the Reverse Text Generator, such as textmechanic.com
Examples of interfaces in right-to-left languages
Now let's focus on what the sites in Hebrew look like.
This is what the Microsoft site looks like:
Let's look at the upper left corner. Designers have correctly adapted the button - the icon and the direction of the animation on it point to the left. You could argue about the reflected magnifying glass icon, but it looks the same in the English version of the site. Whereas the icon of the trolley could have been reflected, so as it indicates the direction from left to right.
On this site the news feed moves from right to left, and the chat opens at the bottom left:
This example shows how the elements should function properly, but there is nothing much beautiful here. Now let's have a look at more visually pleasing pages.
On Annanuna website the video motion is right-to-left. Headings are on the right. Illustrations are ideally chosen. A sight for sore eyes:)
But look at the other page of this site. Here, according to the rules, icons indicating the direction should be reflected. And the logos at the bottom of the page move from left to right, but in right-to-left languages localization it should be the other way around.
While working on the Hebrew app design, we wondered where to put the percent sign. The correct answer you can see in the picture:
Image from tzina.space
On createmagazine.co.il you can see an example of proper pagination
Here is an interesting example of filling in the fields from left to right on int-college.co.il
It should be noted separately that most of the analyzed sites have a mode for people with disabilities. That’s very thoughtful.
Conclusion
Hopefully, these tips will help you to cope with the right-to-left app localization easily. Besides, seeing your mockup during the website or mobile app localization in a mirror-like way is good training for your brain :)
But still, our main advice - if you have some doubts, ask the native user and use professional design services.
