Right To Left design considerations for mobile apps

We truly live in a global and inter connected society. But have you tested your app using a Right to Left (RTL) language such as Arabic? This blog post is a reflection on some of the design considerations to keep in mind when accomodating this.

Why does this matter?

Arabic is one of the top 5 spoken languages in the world with around 3 hundred million speakers and it is the third most spoken language in Australia. Even if you only release apps for the Australian market someone out there will have Arabic set as their default device language. It’s ok if you haven’t translated your app, but you should check that these people can still use it.

How do I test this?

Android

Enable developer options and select “Force RTL layout direction”. On My Samsung S10 this is what my screen and options look like after enabling this option:

iOS

In Xcode you can change the build target language to a Pseudo RTL language to see how your app renders in this way without having to change the language on your device.

Number pads

You don’t actually need to render your key pads in Right To Left, in fact it’s actually more jarring to render numbers in a RTL arrangement because ATM’s and phone pads are left to right in Arabic. Most Arab’s are use to globalised number pads. Samsung has an in-depth article on when RTL should be applied.

When I have RTL rendering set on my android phone, the log in pin screen and phone call functionality is in LTR. However some of my banking apps render their pin pads in RTL.

Common RTL Issues

I was pleasantry surprised to find out how many of my apps weren’t broken when I switched to RTL rendering. Facebook, twitter and email still look very good. Some apps (like my calculator) do not make sense to render RTL and they remain LTR:

Bug One: Overlapping labels

You will have to watch out for when labels overlap like in the domain app here:

Bug Two: Visuals doesn’t match written language

And when your text is rendered RTL but the visual cue is still LTR like in the shade bar for representing countries visitors to my blog in this wordpress statistics view:

Bug Three: Menu’s that animate from the side

In the app I’m helping build, the side menu renders pretty funkily in RTL mode, I can’t show you a screenshot of this behaviour but it’s probably the quirkiest RTL bug I’ve seen. If you find an app with bad side menu behaviour in RTL please share your screenshots with me. I’ve also seen a pin login screen where the icons where flipped but the button presses weren’t.

Bug Four: Icon’s aren’t flipped

Often icon’s have a direction associated with them like the walking person when you get google maps directions. Sometimes it can look a little odd when they aren’t flipped correctly (as if they are walking backwards).

Have you seen these bugs before?

Please let me know your thoughts or experiences in supporting RTL languages. I’d love to hear your stories.