Designing Arabic and Bilingual Apps: Right-to-Left UX Best Practices

Most products in Lebanon and the Gulf need to work in Arabic and English. The usual approach is to design in English, then flip the layout at the end and hope for the best. The result is a product that technically supports Arabic but feels foreign to the people using it.

Mirroring is the starting point, not the job

In right-to-left mode, layout direction flips: navigation, alignment, progress, back and forward. But not everything should flip, and deciding what stays is where most teams go wrong.

• Flip: layout, alignment, navigation order, back arrows, progress indicators, sliders, and anything expressing sequence or direction.
• Don’t flip: logos, media playback controls, clock icons, most product photography, and anything representing a physical object that doesn’t mirror in reality.
• Careful: icons that contain text, checkmarks, and illustrations with people or arrows in them.

Typography is where quality shows

Arabic type has different rhythm and proportions than Latin type. A font size that reads comfortably in English often looks cramped in Arabic, because Arabic letterforms are shorter in height but need more line spacing to breathe.

• Use a proper Arabic typeface, not an automatic fallback
• Increase line height compared with your Latin settings
• Test the Arabic weight against the Latin one, as they rarely match visually at the same nominal weight
• Never use letter spacing in Arabic, since it breaks the connected letterforms

Numbers, dates and currency

Numbers can be Western (1, 2, 3) or Eastern Arabic (١, ٢, ٣), and the right choice depends on the audience. UAE and Lebanese users typically expect Western numerals in digital products, while some government and print contexts use Eastern. Decide deliberately, keep it consistent, and remember that numbers stay left-to-right inside right-to-left text, which affects phone numbers, prices and dates.

Text expansion and contraction

Arabic translations are often shorter than English, sometimes by 20–25%. Buttons designed to fit an English label can look empty, and interfaces that were dense in English feel loose in Arabic. Design the components to handle both, and check the longest and shortest labels in each language.

Forms and input

• Align labels and fields to the right in Arabic mode
• Keep email and URL fields left-to-right, since those are always Latin
• Test mixed-direction input, such as an Arabic address containing a Western number
• Check that error messages read naturally in Arabic instead of sounding machine-translated

Practical workflow

1. Design the core flows in one language, but decide early that both are first-class.
2. Build components that support both directions from the start, rather than duplicating screens.
3. Produce a real Arabic version of your key screens with real translated content, not lorem ipsum.
4. Test with native speakers, who will spot awkward phrasing and reversed logic immediately.
5. Hand developers both versions, with direction rules documented for edge cases.

The most common mistakes

• Machine translation with no review, which is the fastest way to look unprofessional
• Flipping logos and media controls that should stay as they are
• Reusing Latin typography settings for Arabic text
• Testing Arabic only at the very end, after the design is locked
• Treating Arabic as a checkbox rather than a version real customers will use daily

Frequently asked questions

---

Note: Sign up to my mailing list to receive useful articles like this one every once in a while.