Elite Dev Squad

Creating
Right-to-Left
Design

/

Creating Right-to-Left Design

Link Copied

Edit Template

How to Develop Interfaces for Middle Eastern Users 

Right-to-left design is a focus of many creative agencies around the world. Given the dynamic business environment in the Middle East, we need to closely monitor the preferences and habits of our users in the region. First of all, this means that you will need to make certain changes to your app’s design, as writes and reads are done from right to left. Our agency follows his best UI/UX design practices to follow during development. The difference between LTR (left-to-right) and RTL (right-to-left) languages ​​is in the direction of content, or navigation. RTL languages ​​include Arabic, Persian, and Hebrew, with the majority speaking Arabic. This frame either mirrors the entire design  or requires mirroring. Now that the navigation is right-to-left, the controls in the header are mirrored, the back button goes forward, and  the slider also works backwards. I would like to explain how I handle  localization for RTL languages. Let’s explain the basics of right-to-left design. Right-to-Left Design, Text Direction UI elements, titles, and icons flow from right to left. If any part of your text uses LTR phrases, phrases, or URLs, they will be displayed  in  LTR format. The rest of the content is written in  RTL language, but please follow these rules. Use the right alignment for the text, including headers. What if the interface is not yet mirrored, but you need to insert RTL text? In this case, text elements such as  toolbar buttons are the RTL equivalent. Icons are mirrored and  text content is right-aligned.

Right-to-Left Design

Layout direction in right-to-left designs

The overall layout reflects the RTL read direction. Common elements such as navigation bars, sidebars, and menus appear on the right side of the screen. Content such as articles and main sections should start on the right and flow to the left. Research shows that users in the Middle East region respond positively to RTL progression when presented with content. App designers are developing innovative solutions to avoid visually unorganized app typography, such as organizing content in a single column format. This allows for a more consistent and aesthetically pleasing app design. Some elements, such as icons and icon orientation, remain consistent across LTR and RTL layouts to accommodate different user groups and maintain familiarity in different regions. If the orientation of the user interface changes, the designer does not reflect the following elements:  Untranslated text or parts of it Numbers Assume that  mirroring the user interface causes these changes: Icons will appear on opposite sides of the room Layout will be reversed Navigation buttons Directional symbols (such as arrows) will be mirrored However, some elements should not be mirrored: Direction Symbols that do not mean anything (such as a camera) Numbers Graphics and Diagrams Icons. Completed SF Icons already have a right-to-left (RTL) language to choose from for your app’s interface icons. When designing custom icons, you have  flexibility in direction to ensure consistency and clarity. When working with  icons that symbolize reading, align the text bar to the right side of the icon. If you need to specify the direction of movement, insert a symbol in the corresponding RTL frame. Universal characters do not follow this rule. Please insert it without turning it over. The logo also remains aligned and is not flipped. An example of a universal symbol is the check mark. The same applies to all items  intended for right-handed people. Reversing it can confuse readers. Media progress bar and play button are not inverted.

Right-toLeft Design 2

Inverting elements is useful when working with localized symbol versions. When you flip the app’s UI, the flipped version of the icon fits perfectly. Inverts the linear representation of time in RTL, but retains the circular time symbol. The same principle applies to symbols with  clockwise arrows. The arrows are not mirrored and the clockwise direction remains the same regardless of  writing format. A progress indicator indicates the status of an action or process. In  RTL designs, progress bars also indicate right-to-left direction. Navigation A “right-to-left” layout switches between  navigation pages and  overflow menu pages. In  RTL format, invert the page selector by placing the relevant button on the right side. The “next page” indicator on the left  is based on this. We recommend that you rearrange the digits in your page numbers. However,  if the main content is still displayed in English or another language that uses LTR fonts, it makes sense to set the page selector to his LTR position. Let’s take a look at the text of the notification. The layout and text will be adjusted depending on the notification language. Align RTL text to the right. Normally, the operating system automatically repositions the search input text. The designer’s job is to arrange the UI elements so that they don’t overlap. The rating display will be mirrored. The same applies to directional animations that include carousels. Digit Select the type of digit to use in the user interface. The mix will be confusing. You can use one of two spellings of the  Arabic numeral: 0 – 9 (Western Arabic) or ٨ ٧ ٦ ٥ ٤ ٣ ٢ ١ ٠ (Eastern Arabic). Right-justifies numbers the same way as characters. The numbers  must be read from left to right.


Fonts

We recommend that Arabic fonts be 1 to 2 pixels larger than non-RTL languages. You can increase your funds by approximately 3 points. The reason is that Arabic letters are more complex and  if you choose  the same size as, for example, English letters, they can quickly become difficult to read. Of course, you don’t have to mirror the words in your LTR language, but you do need to localize them. Some RTL languages ​​have different comma separators, so you must use the symbol (‘،’) as long as Arabic is involved. The Arabic words will be shorter and the final text will be shorter. Be sure to check  the alignment after setting the translation.  To emphasize text, we recommend using an overline instead of an underline. Fonts can be agreed with the customer. 

Conclusion: When developing a product, users should be seen as real individuals, not just statistics checked off a list. The first interaction with a product and its visual presentation are critical to the success of a design. Therefore, it is important that users can achieve their goals easily and quickly. Every user interaction with a product must effectively engage the user and lead to the desired outcome.

Related Articles

Edit Template

Let’s talk about
your project

    Edit Template