Mobile App Design for Right-to-Left Languages (Arabic)

Kristina Volchek: Senior Product Designer & Design Mentor 👩🏼‍💻 Mobile, Fintech, Growth Design, Web3, Health & Fitness, eCommerce

Kristina Volchek

Originally posted Jul 25, 2022 on Dribbble · 6 min read

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

How We Localized our App for Arabic Languages

Being an international app with 100M+ users around the world has its challenges. One of the biggest challenges is language — and how language affects interface design.

If you’re not familiar with the terms “LTR languages” and “RTL languages”, here’s a quick recap for you:

The point is — Arabic and Hebrew are written from the right side of the page to the left. And that means the entire design also needs to be flipped or mirrored. The navigation goes right-to-left, which means the header controls are mirrored, the back button goes forwards, and even slide controls go the other way.

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

My name is Kristina and I’m a Senior Product Designer at Sweatcoin Growth Team.

I want to quickly explain how our team approached Arabic language localization and how it affects user retention in a big way.

The biggest challenge (for me personally) was the mental shift; the way I should scan, read, navigate and understand the direction of all elements on the screen. It took a lot of brain power to finally adapt to RTL rules, especially to the navigation displayed in reverse order.

Here in my notebook, you can see some of my struggles!

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

The easiest way to experience this is to switch your phone to the Arabic language and try to use it for a couple of hours. Trust me, it’s a good mental exercise for a designer. 😅

Why localize anyway?

Speaking of Arabic only, there are 240 million internet users, while only 1.1% of websites on the internet are available for browsing in their native language. This is a sad situation for Arabic speakers, who must learn English to view 99% of the content out there.

This is also why it’s such an effective way to boost user retention. Your app can be one of the few that actually works in their native language.

Just a few weeks after launching our app in Arabic, we saw a 13% increase in Day 3 User Retention.

For those who know how hard it is to get even a few percentages of growth in user retention, these numbers might seem unreal. But that’s what localization does.

So, how do we begin?

This was my first time facing such a big language challenge.

Our app is pretty huge, and has a lot of different elements — timers, cards, our own currency sign, illustrations, animations, progress bars and so on. And there was no systematic approach to preparing designs for RTL yet… Yes, I was terrified!

So I started with research… 🧐

Luckily, there are so many useful resources to help you with creating a set of RTL rules and systems for your product. The most trusted and internationally tested are Google Material Design & Apple Human Interface guidelines.

Google calls it bidirectionality and you can find it here —  https://material.io/design/usability/bidirectionality.html

Apple recently refreshed their RTL guidelines and you can find them here —  https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left

And they are life savers. For a person like me, who has never learned or used any RTL language, these guidelines are a real treasure.

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Practical design tips

Below are some condensed guidelines that helped me the most in the beginning. However to really start work you must gain an understanding of the logic behind all these guidelines.

Again, the biggest life hack I can share is to spend a lot of time using your phone in the target language. This will get your mind used to thinking that way.

And lastly, keep in mind that its not just visual mirroring — all gestures and interactions are also mirrored!

Layout Mirroring

Most likely your development team will handle it. From the technical perspective, there are lots of ready-to-use decisions provided by the platform itself (like android or iOS).

From a design perspective, you can also simply flip some elements horizontally (Shift + H in Figma). But keep in mind that it might flip images or texts in an unnatural way.

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Text alignment & numbers

In short, numbers are not mirrored. You can find more cases described by Apple & Google, but in general, the numbers stay the same.

Text is always aligned to the right. Except for a few interesting cases well described by Apple Guidelines (e.g. when you have a mix of languages).

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Controls & Navigation

The navigation buttons are displayed in reverse order and icons that communicate direction (e.g. back/forward arrows) are mirrored.

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Progression & Timeline

My favourite one. No really, it breaks my brain almost every time. 😅
Basically, anything representing the passage of time or forward/backward movement should be mirrored. This includes progress bars, loading animations, and volume sliders.

But this does not include anything based on the clockwise/anti-clockwise directions. Arabic clocks are the same as ours.

Also, media playback buttons and bars are always LTR (they reflect the direction of the tape, not the time progression). Imagine a mirrored YouTube — that would be scary 😧

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Icons & Images

DO: Flip icons that show directions — e.g. icons representing text, battery icon, any progress bar, writing, forward movement (like bicycle), volume, etc…

DON’T: Don’t mirror icons that don’t communicate any directions — e.g. camera, search, share, clockwise-based icons (like refresh), headphones, etc…

For images, a general rule is to avoid flipping photographs, illustrations, and general artwork. Basically, it only makes sense to mirror an image when that image conveys a certain direction or order.

Mobile App Design for Right-to-Left Languages (RTL, e.g. Arabic Language) by Kristina Volchek for Sweatcoin

Cultural aspect

Even if you did everything right from the RTL & translation perspective, there is still a chance of failure due to different cultural values.

Arabic culture is more conservative and traditional, and something that is common for the Western world might have a negative impact on user feedback in Arabic countries.

As a real-life example — we avoid launching any pride-related designs in Arabic-speaking countries. And while preparing the Ramadan campaign we researched colours that are traditionally associated with this holy month.

So do your research and respect your users’ cultural values.

Becoming a better designer

Once you work on an RTL project, there is no going back.

Now every time I design something my brain tries to mirror it to make sure it will work with RTL languages (and with German…if you ever translated your designs to German you will understand 😅).

In general, I’m really glad that I now have this knowledge and this way of thinking. The ability to create flexible designs and design systems for every language.

In a world that is quickly becoming more globalized, this is a very important skill for any designer.

Love this case study?

Follow me on Dribbble, Instagram or LinkedIn for more posts about product design.

P.s. Note for Arabic speakers - I was using google translate for these Dribbble shots. It's not the real content.

Featured projects

Growth Design Case Study, In-App Referral, Virtual Tickets, Rewards, Invite Friends, Friend Referrals, Sweatcoin Growth Engine, Growth Team Structure, Growth Design Process, Growth Design Impact, Success Metrics, KPIs, Framer
Growth Design
Mobile App

66M Users in a Year:
Growth Design Case Study

In 2022, Sweatcoin became the world's most downloaded Health & Fitness App. One of the features that helped to gain more than 66M downloads that year was 'Scratch The Prize'.

Explore the innovative growth design strategies, in-app referrals, and the power of localization.

RTL
Localization

Mobile App Design for Right-to-Left Languages

Designing for 120M+ users worldwide: dive into RTL localization challenges, from interface mirroring to cultural nuances, boosting user engagement.

Mobile
Web Design

SweatPaws: Dog Health Quiz for Gen Z

This playful dog step calculator is designed for GenZ and their love for dogs. I was experimenting with neon and Midjourney AI to bring you a truly pawsome user experience.

Humanizing Crypto, Web3 & NFTs: A Designer's Perspective by Kristina Volchek kristi.digital | Mobile Crypto Wallet App | Dark Theme UI UX Product Design iOS
Mobile App
FinTech

Is Humanizing Crypto Even Possible?

Can we ever truly humanize crypto? Can we make crypto simple and user-friendly? The short answer: no.

A designer’s perspective on Web3, NFTs and the Crypto Space.

Other projects

Growth Design Case Study, In-App Referral, Virtual Tickets, Rewards, Invite Friends, Friend Referrals, Sweatcoin Growth Engine, Growth Team Structure, Growth Design Process, Growth Design Impact, Success Metrics, KPIs, Framer
Growth Design Case Study, In-App Referral, Virtual Tickets, Rewards, Invite Friends, Friend Referrals, Sweatcoin Growth Engine, Growth Team Structure, Growth Design Process, Growth Design Impact, Success Metrics, KPIs, Framer

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.