Designing UX for Arabic Tech products

Pratik Shetty
7 min readApr 6, 2021
Emerging Arab Startups

When you think of the best websites, apps, and layouts you’ve ever seen, you probably think of layouts with a western structure. But have you thought about what the same UX would look like to an Arabic user?

Before diving deep into the difference of UX, think upon the basic difference between the Arabic language and languages all over the world.

Did you get it?

Except for the language, Arabic and Urdu languages are written and read in the opposite direction; from right to left.

Designing for an Arabic audience is not just about translation, but about convenience as per their reading and writing habits. A language is not only a way of expressing ideas for users, but it also determines how to tell a story, how to connect with the world, and how to interact with its users.

When we speak of the Arab world we mean the 358 million people in 25 countries and territories who speak Arabic. If the Arab population were a single country, it would represent the eighth largest economy in the world, bigger than India or Russia alone.

More than half of the population is under the age of 25, making it one of the youngest markets in the world. It is a new economy as a whole that grows every day and must be analyzed. The question is, how do we design engaging product experiences for them?

I have met some amazing folks who work in Design and have seen built some amazing products focused on the Arab population. A few of the leading apps are Anghami, Talabat, Careem, and Zomato. Here are some of the keynotes to keep in mind as you plan your UX:

*Mirroring layouts is very important as the language is written from right to left; so is the reading habit.

* Usually compared to other languages, Arabic language requires a bigger Font as words and sentences have many dots and curves.

* It is the 5th most spoken language and has 420 Million speakers across 20 countries.

*Spacing of UI should be taken care of as the words take more space and have to look presentable

*Arab users are more likely to be aware of progression and forward movement if designs are viewed from right to left.

*The Arabic world is a more conservative world than the Western one. Therefore, in order to engage with this kind of audience, we should use a better representation of their values and social norms.

*Use imagery that Arabic people can identify with. Also, make sure you don’t fall into any stereotype traps.

For example, a representation of a woman in Saudi Arabia is not the same as that of a woman in Tunisia.

Below are some of the basic things which I feel are important, this is from using some products like iPhone, language mode, Careem, Talabat.

Mirroring:-

Since most of the modern world apps in all languages follow the LTR (Left to right ) approach, Arabic Apps more specifically follow the RTL (Right to left) approach. This enables UX to be rolled over and presented from (RTL)

For example

( I swiped the screen down from left to menu Bar)

In the above case, functionality is changed but it is not necessary to change the Icons, As you should know that Arabic speaking people are used to using Facebook or google hence the symbolic representation of the logos is not changed but the name written in Arabic changes.

Some Apps like Telegram in the above case have changed their ‘name’ in Arabic as well. Making it more clear to users. This is one of the strongest use cases that adds a lot of value to the users. So if you have any product built for the Arab world you need to ensure if the language of the phone changes, The name of the product also changes to Arabic. This brings a strong foothold to the brand and also to the product and in all cases, it will be opened up more than other Apps.

Usability:-

This is one of the most important features which focus on Usability which should be very simple to use and easy to work upon. Usability focuses on the ease of usage of the product. Since it’s built using (RTL) commands should be focussed on a similar approach making it easy for users to use the product. Amazon does well its approach on adding easy navigation flows for all languages, this one in Arabic and even the product content has a layer of Arabic words written in it. This makes it easy for viewing. The usability core function is to enable easy viewing of the content, Understanding the content without losing the users interest.

Images:-

It is important to know that images play a very important role in the Arabic world, if you see around most the adverts have a lot of images. This is because images convey the message more easily and precisely. To put this in context images create a wide array of thoughts and can easily convey a message. Any tech product which has images has more meaning than the context for example below image. Images convey a very simple and direct message. This is also in the case of Google Adwords.

UI in Arabic:-

Since most of the words in Arabic have long letters it is very important to use crisp letters or sentences in the post to convey the right message. That being said UI should be very basic and easy to understand without having too much written as the words or the advertisement becomes shabby below are some of the use cases.

Here the words written are exactly the same as words written in English but the only difference is it starts from RTL and has taken much of the space around it. This makes the whole website to be full of content with no space and making the overall page full of information. Hence when designing a UI, you need to understand giving extra spacing for all the lines enable easy drafting of content. The above image shows the ease of use.

Colors/UX:-

Using Culturally appropriate shades is very important, For example, every language has a specific color which adds a lot of advantages. Read about colors here. Colors give a clear perspective and understanding to the audience, it also acts as a behavioral trend to some extent. Arabic UI and UX must-have colors like blue, green, or black. Wondering why black because the words in the white are very clear and contrast. Use case the below site and UI. You can see the colors which are very contrastive and can bring a completely different feel and approach towards the whole website. Prettylittlething.ae was the first website which was launched in Arabic. Also note Prettylittlething has operations in countries like the UK, Qatar, France, the US, Canada, New Zealand, Ireland. Every time you change the country from the top corner of the website the language changes plus the content of the website changes showing very specific and targeted to the users in that region, based on attributes like culture, region, trends, and fashion in that region, upcoming trends in that region. This UX feels to the whole website brings a lot of assertiveness to the users and makes them browse the website to find out more about the products.

(Language and country change cause the whole UX change as per culture/ attributes of the country)

(Arabic language UI, Cart settings, user settings moved to the left making it accessible for use)

Conclusion:

As a UX designer, it is interesting to see how each society has its own interpretation of reality. It makes positioning a product difficult but also enjoyable. Here we have talked about Arabic languages but today more than 700 languages are spoken around the world and each of them has its own characteristics.

UI and UX for Arabic content work very differently than any other website, the reason being LTR. Also, the length of a sentence to complete one line of the English word is also longer, making too much to fit in a limited space. Now imagine if there is an App it would be more difficult to fit that data in one single App screen. Hence colors and icons play a very important role in demonstrating the design and pattern. Furthermore, it is very important to know users and their personas who are using the App.

--

--