Test the interaction in its real language
Arabic mobile UX combines RTL layout, readable typography, mixed-direction content, regional formats, and recoverable interactions. These fifteen patterns are a review framework. Choose and validate them for the audience, task, and platform rather than treating them as fixed rules for every market.
Layout and navigation
- Document-level direction. Establish Arabic language and RTL direction at the appropriate root. Let logical layout properties follow that direction.
- Predictable back navigation. Align the visible affordance with the platform's localized navigation behavior and preserve the previous screen state.
- Readable tab labels. Test actual Arabic labels at small widths. Do not depend on abbreviations that users cannot recognize.
- Selective icon mirroring. Reverse directional meaning when appropriate, while keeping non-directional symbols and brand marks intact.
- Stable language switching. Keep the user on the equivalent route and preserve appropriate progress when changing languages.
Content and input
- Arabic-first typography testing. Evaluate connected letterforms, line height, weight, and small labels in the chosen Arabic font.
- Directional isolation for mixed content. Keep email addresses, reference codes, and phone numbers readable within Arabic sentences.
- Persistent form labels. Keep the field purpose visible after typing, with help and error text associated with the control.
- Appropriate keyboards. Select input types that help the task without preventing valid names, numbers, or regional address data.
- Regional formatting. Test currency, dates, phone numbers, and address formats for the supported locale rather than assuming a single Arabic convention.
Feedback and recovery
- Clear loading feedback. Explain what is happening and avoid moving essential controls as content arrives.
- Actionable validation. Describe the correction in natural Arabic and move focus to a useful place after submission.
- Preserved progress. Keep appropriate non-sensitive work when a connection fails or the app is interrupted.
- Accessible status changes. Ensure that meaningful results and errors are available to assistive technology as well as visually.
- Confirmation with a next step. State what completed, identify any reference needed later, and explain what the user can do next.
Test the patterns together
A localized screen may look correct while its complete journey fails. Test a task that includes navigation, a mixed-content field, an error, an interruption, and confirmation. Use actual Arabic copy and realistic regional data.
Record the device, locale, direction, and state for each issue. Recheck both Arabic and English after a shared component changes, since a fix in one direction can affect the other.
