Arabnet Arabnet

Arabic UX design is a buzz phrase that bears no difference in its core principals than standard UX design. It refers to the design of a specific experience, tailored to a specific crowd – in this case, the Arabs. Yet, whomever the user was, your UXD shouldn’t lose its Human-Centric glow.

Carving out the gist of Arabic UXD is pivotal to any Arab UXD practitioner. Why? We’ll start off with some numbers from the Arabian Gazette to put you in the mood for what’s next:

• 60% of Arabic speakers prefer browsing internet content in Arabic.
• Arabic is the 7^th most popular language on the web, and the 4^th most popular on a global scale.
• Less than 1% of the digital content is in the Arabic language. 

In that context, the online community finds itself hungry for more quality content in Arabic to satisfy the growing need of the 141M users who use it. Hence, the demand for savvy Arab UX Designers is on the rise.

Now, as UXD follows mental models in its workflow, same goes for the Arabic UX. But before making any assumptions, you need to be aware of the differences that mark Arab users’ interactions with online products – in other words, their user experience.

In this article, we’ll be underlining the steps to creating a splendid Arabic UXD. Here they are!

Take Up the Right to Left Layout
The main difference between Right To Left (RTL) layout and Left To Right (LTR) layout is the direction in which the content of your interface is displayed. When the interface switches from one direction to another, the process is called mirroring. RTL layout is the mirror image of an LTR layout; in other words all visual elements should be mirrored – texts, images, graphics, numbers, etc.

The concept of mirroring in this context expands to the user behavior. However, that doesn’t imply that the Arabic UX designer is obliged to mirror every single element on the interface. One can break the rules without bending them.

Let’s take logos and icons as an example - if your user has gotten used to a certain alignment of visual elements, then hardcore mirroring shouldn’t be implemented. Remember, users favor recognition over recall, which means that familiar design pays off better.        

See below an example of logos and icons alignment: 

Source - uxbert.com

On another note, users scan the elements on your interface in two ways - either diagonally, or in an F shape. One thing is certain, they will work their way from the top down. Make sure that the hierarchy flatters that behavior. 

In conclusion, the mirroring process depends in its majority on your user’s expectation of information flow. Think affordability, think familiarity!

Don’t Get Lost in Translation
Adopting a direct translation strategy for your Arabic website/app can engender usability fails. English is a very concise and straightforward language; on the contrary, Arabic tend to be verbose.  Some English words or expressions don’t have a direct Arabic translation, and end up being described in long sentences. This can be problematic, if the designer is limited to a screen real estate such as button copy or mobile interfaces.

In this context, you need to make sure that your copywriter knows his/her way around the language, and won’t get trapped inside the box. He/she will have to steer clear from word-to-word translation, and focus on capturing the essence of the message.  

This resonates well with how users read online copy – they want things quick, they want things now. Users don’t like to scratch their heads too much to achieve a desired task on your interface; they like things quick and dirty.

Moreover, as users are of a fickle nature, lengthy content will scare them off.

Look at Namshi’s translated copy – short, concise, and everything nice!

 On the contrary, here’s a bad example of English-to-Arabic copy translation – see below: 

Ain’t Nothing Wrong With Being Multilingual
Even if we’re talking about the Arabic user experience, that doesn’t cast away the multilingual feature and its usability purposes.

Yes, most Arabs prefer surfing the web and browsing websites in the Arabic language; however, including both Arabic and English will make your design more affordable and task-bound.

A valid example in that context is ecommerce websites. Take a for instance - your users are searching for a phone called LG G4 Stylus. Imagine having to type that in Arabic! Another valid example is software language that users only know the English labels of. So, don’t test your audience’s patience and keep things familiar!

Understand the Arabs’ Culture
If you’re running for the elections, you’re in it for the win. Same goes for UXD. Let’s draw the parallel here. You want to win the elections, you have to advertise a political agenda that resonates with the citizens’ needs. The same logic applies to UXD; you want to convert, you have to design an experience that resonates with your users’ culture. In other words, you want to be loved by the people, you gotta please them!

Culture in Pictures
If you want your visual elements to be aligned with Arabic culture, it doesn’t mean that you should infuse your design with pictures of camels, deserts, palm trees, etc. Not at all! It’s fairly simple, use visuals that are appropriate and compatible with the Arab world’s social norms.

More on the matter - give the users visuals they can relate to.  For example, if you’re targeting males in Saudi Arabia, you can use the visual of a man wearing the traditional thawb. Of course, your choice also depends on the context of your product. Whatever you do, don’t fall into the stereotyping snake pit!

via GIPHY

Culture in Dialect
The variation in culture travels beyond visuals towards dialect. The Arabic people speak in a diversity of dialects. The question is, if one wants to create a website or an app that appeals to all Arabic speakers, how would one accommodate that?

By using what’s referred to as “Modern Standard Arabic” (MSA) or Classical Arabic aka Fusha, the problem should be solved. The majority of Arabs are familiar with this dialect, as they have studied it in schools and know how to read and write it.

But if you decide on using Fusha, note that this dialect is only used in formal means of communication. So, if you’re looking for an interactive voice tone for your brand, Fusha might not be your best pick. That is why you will have to research the dialect that fits your product’s character the best.

I Like Big Fonts & I Cannot Lie!
Off to the greatest challenge in Arabic UXD – Arabic Typeface. As it represents a key factor in the usability of the interface – heck, we’re talking about legibility! – the UX designer has to be very intricate when it comes down to making the typeface choice.

The hurdle here is the following: Arabic characters are shorter and wider than Latin characters, and they also take up a lot of horizontal space as they are not readable if used in the same format of English letters. So, in order to achieve legibility, the Arabic type should be 4 points larger than the English type.  This implies that your Arabic UXD should take into account the necessary space requirements for the Arabic copy. 

via GIPHY

Keep This in Mind
On a side note, it is very important to mention that there is no monolithic way to create Arabic UXD. Testing should always be placed on a pedestal, as it is your gateway to the final answers; you’ll fully understand how your users interact with your designs and what they really want out of them.