UI UX Design for Arabic Apps: A Practical Right-to-Left Guide

You open an app that "supports Arabic" and find the back arrow pointing the wrong way, a phone number scrambled, and Arabic headings looking small and faint next to the English. These aren't translation errors. They are design errors. Good UI UX design for Arabic apps starts from one question: how does an Arabic-speaking user read and move through a screen? Everything else follows from the answer, from layout direction to fonts, numbers and dates.

This guide collects the practical rules we apply: what mirrors and what doesn't, choosing Arabic type, bidirectional numbers and dates, user research, prototypes, accessibility and design systems, plus the starting price of our service.

Why isn't flipping the English interface enough?

Because an automatic flip mirrors everything, including what must stay as it is. Numbers read left to right even inside Arabic text. Logos and photos don't mirror. Some icons point to a real direction, not the reading direction. The result is an interface that feels "translated and flipped", and users sense it even when they can't say why.

Fixing this after development costs far more than designing it right from the start. That's why we design the Arabic screen first and derive the English from it, not the other way round.

What mirrors in an Arabic interface, and what stays the same?

The rule of thumb: anything that expresses reading order or progress mirrors; anything that represents a real object or a universal mark stays. Apple's right-to-left guidelines cover these cases, and they apply to web and mobile alike:

How do developers build this without doubling the work?

• Set the page language and direction at the root: lang="ar" and dir="rtl".
• Use logical properties such as start and end instead of left and right in styles, so the layout mirrors automatically with the language.
• Keep a mirrored version of every direction icon in the icon library, and never flip photos with CSS.

How do you choose and tune Arabic type for screens?

Pick a type family with matching Arabic and Latin designs, because one screen mixes both languages in buttons, names and numbers. Then tune Arabic size and line height on their own, because Arabic doesn't behave like Latin.

• Size: Arabic has no capital letters, so it looks smaller next to all-caps Latin text. Apple suggests increasing the Arabic size by about 2 points in that case.
• Line height: Arabic ascenders and descenders extend further than Latin ones, as the W3C Arabic and Persian Layout Requirements explain. Give lines more room so dots and diacritics don't collide.
• No letter-spacing: Arabic letters join, and spacing them apart breaks the word. Stretching an Arabic word in a heading is a different technique from Latin tracking.
• No fake italics: a machine-slanted style usually distorts Arabic letters, so use weight or colour for emphasis.
• Test with real text: the longest product name, the longest heading and the actual error messages, not placeholder text.

How do you handle numbers and dates in a bidirectional interface?

Numbers are written left to right even inside an Arabic sentence, and that is behind most of the errors users notice. The W3C notes that Arabic-Indic digits (٠١٢٣) are used in Saudi Arabia, while Western digits (0123) are also common in many interfaces. So choose one digit system per product and apply it on every screen.

Digits, phone numbers and amounts

• Phone numbers: isolate them as left-to-right text, or the "+" in +966 may jump to the wrong end of the number.
• Input fields: phone, card and IBAN fields are typed left to right, even in an Arabic form.
• The riyal sign: version 17.0 of the Unicode Standard added the SAUDI RIYAL SIGN character (U+20C1). Check that your font supports it before using it as text, or it will show as an empty box.

Dates: Hijri and Gregorian

Set the calendar explicitly on every screen instead of leaving it to the device. In a test we ran on Node.js 22, the locale code ar-SA returned "٢٩ أكتوبر ٢٠٢٦" with Arabic-Indic digits, the code ar returned "29 أكتوبر 2026" with Western digits, and the Umm al-Qura calendar returned "١٨ جمادى الأولى ١٤٤٨ هـ". Three formats for the same day, decided by one line of settings.

If your users deal with documents that carry Hijri dates, show both calendars in the fields that matter, and write the month name instead of its number to avoid confusion.

How do you ground user research in real Saudi users?

Start with short interviews with real users before drawing a single screen: how they do the task today, where they get stuck, and the words they use for it. Your customers' words are the words that belong on your buttons and menus.

• Review competitors' apps and the apps your customers use every day, because those shape their expectations.
• Mix your participants: different ages, different devices, people who prefer Arabic and people who switch between languages.
• Test in Arabic first, because that is where most problems show up.
• If you already have a product, start from its data: where users drop off, and which step takes longest.

Why test a clickable prototype before development?

Because changing a screen in a design file takes minutes, and changing it after development takes days. We work in four stages: understand, then structure with user journeys and colourless wireframes, then design with final screens and a clickable prototype, then test, refine and hand over developer files.

In a test session, give the user a real task, such as "book an appointment for Thursday", and watch without explaining. Every pause or question is a valuable design note, and it will never be cheaper to act on than now.

Record four simple things in each session:

• Did the user finish the task without help?
• Where did they pause or hesitate, and how often did they go back a step?
• Which words did they use for what they were looking for?
• Did they read numbers, dates and prices the way you intended?

A handful of short sessions in Arabic usually shows the clearest problems. Fix them and test again, rather than running one long session.

How do you make an Arabic interface accessible to everyone?

The global reference is WCAG 2.2, which is now an international standard, ISO/IEC 40500:2025, according to the W3C announcement. The requirements that matter most for Arabic interfaces include:

• Page language: declare Arabic in the code so screen readers pronounce it correctly.
• Contrast: at least 4.5 to 1 between normal text and its background.
• Target size: at least 24 by 24 pixels for each tappable button or link, or enough space around it.
• Visible focus: a clear indicator for keyboard users, not hidden behind a sticky bar.
• Not colour alone: an error message is clear text next to the red, not just the red.
• Arabic alt text for every image that carries information.

What is a design system, and when does your business need one?

A design system is one shared, documented library of colours, type, spacing and components used by designers and developers alike. You need one when you have more than one product or team, or when the same button appears in five styles on five screens.

• Design tokens: named values for colours, type sizes and spacing, with separate Arabic values where needed.
• Bidirectional components: every component is designed and tested in Arabic and English.
• Usage documentation: when to use each component, and when not to.

At national level, the Digital Government Authority has launched the Platform Code, an open-source unified design system for government platforms. It is a useful reference for anyone building services that Saudi users compare with the government apps they use every day.

How much does UI/UX design cost at Manzomia?

Manzomia's UI/UX design service starts from SAR 6,900, one-time, before 15% VAT. That is SAR 7,935 with VAT. Your written quote sets the scope, number of screens and timeline.

We deliver the original design files and developer specs, and we can design while your own team builds, supporting them during development. Planning a mobile app? Read our guide to mobile app development cost in Saudi Arabia, or see our mobile app development service. Building a client portal or internal system instead? Start with our guide to web application development in Saudi Arabia.

Want an interface your customers understand at first glance?

Manzomia is a foreign-owned, MISA-licensed company in Riyadh. Our founder has more than nine years of building web and mobile products, and apps he launched reached more than 50 million users. We also build what we run: our cloud system, Manzomia, is live at manzomia.com.

Start by requesting a quote for a quick UX audit or a full product design, or book a free 30-minute consultation and we will review the most important journey in your product with you.