Bidirectionality: arabic UX that extends beyond the screen

Let’s assume you’ve just been approached with a proposal of working on a highly prospective, Arabic UX project for the first time in your career. Alternatively, your company is looking to expand into the MENA market and needs to design and localize their product to new grounds. Sounds exciting, doesn’t it?

Still, your knowledge of the language and alphabet is near zero, and you’ve never studied the culture enough to know how it overlaps with the widely-defined Western world. If you’re new to the RTL (right-to-left) world of interfaces, then going into a new field can be as intriguing, as challenging.

If you’re about to kick off your first Arabic script project, then let me share some words of reassurance:

a. for a while, you’ll likely feel lost when you leave your LTR UX design comfort zone,

b. with some guidance, you’ll quickly learn about the differences in culture and script, and will be surprised how quickly you find common ground

So, how do we get you started?

Firstly, if you’re new to my Medium page, I highly recommend you take a look at my first article on Arabic UX, which is perfect introductory reading. In the following article, I’d like to shed more light on an area I mentioned in my previous articles; one that I believe is the most critical issue on the horizon once you embark on your Arabic UX journey.

I’m talking about bidirectionality (also referred to as “bidi”), or, more specifically, the lack thereof. In my experience as a UX consultant, bidi is the most recurring challenge that developers and designers face on their way to creating an Arabic website or app.

So what does bidi do? To simplify, bidi is the technical ability of your software to process Latin script (LTR) within an Arabic, or other RTL text — or vice versa — without it being broken into pieces. The most common effect of bidi incompatibility is undesired word reordering in a sentence. An extreme form — less common, but still notable — is when text editors/software lack RTL processing capabilities, and not only distort the word order but also their letters (which, in turn, makes it impossible to read).

If that just sounded like a purely technical issue that only the dev team needs to worry about, then let me tell you this — the effects of bidi incompatibility (and other issues with RTL support) extend far beyond the screen. Precisely, to human skin.

Have you ever seen a compilation of Arabic tattoo fails? 99% of the failed Arabic skin art you see online are a result of the journey the text went through before the tattoo artist started inking.

So here’s what potentially takes place:

  1. A person decides to tattoo an Arabic word or sentence — he/she looks it up in Google Translate, or asks an Arabic-speaking friend to send over the proper phrase.
  2. He/she copy-pastes the text from GT or communicator to a .doc/.pdf file, resizes the font accordingly, prints it out, and hands it over to the tattoo artist.
  3. A non-reader of Arabic tattoos exactly what was provided to him/her on paper.
  4. If the person is lucky, the text editor/messenger handled the script well and everything looks good. If not, then the new body art owner has just been tattooed a word or letter in distorted form.

While some programs handle RTL and combined LTR/RTL strings correctly, such as Google Translate and Microsoft Word (according to this post), others do not necessarily have to, given their presets. Hence, if you process words in text editors or graphic programs optimized for Latin script only, it is possible that Arabic text will be mirrored and treated as an LTR language, with words and letters ordered from left-to-right.

Surprisingly, many professional outlets fall into this trap — below, are two examples of many out there:

The letters in the poster are in isolated form and written from left-to-right. A possible error of a graphic editing program.
This combines several errors — not only are the Arabic words distorted but the name and surname of the expert reads (sic!) “Name” and “Surname” — a template was sent to production without anyone transcribing the real credentials! Source: A documentary I watched a while back — can’t recall the title.

Handling Bidi as a Designer

As we leave the tattoo analogy and having shown you what can happen if you don’t pay attention to word processing, what can you, as a designer, do to avoid a flawed, unprofessional first impression on the Arabic market?

Here are some of the crucial tips:
– inform your tech team and stakeholders right away that bidi implementation is critically needed and might engage time and resources,
– check if the software you use handles scripts you can’t personally read (i.e. check for settings/plugins in Sketch, Axure, or AI),
– before launching a product on the market, consult an Arabic speaker or consultant so you can rest assured that all content will be legible upon publication.

With the above in mind, you’ll be able to minimize one of the most critical technical risks and concentrate your efforts on perfecting other aspects of the service.

Interested in discussing your own product in regards to bidi? Or maybe there’s something you’d like to share/add RTL support implementation goes?

Let me know in the comments or contact me directly!

Categorized as UX Tagged

Leave a comment

Your email address will not be published.