Design, Mobile App, Web Development, Website How We Design Arabic User Experience
As per the current trends, localization of a website or app is a vital factor for success in a particular region. We often hear about how we design Arabic user experience with websites or apps or designs in western structure, but have you ever thought about how the same website would look for an Arabic audience or with Arabic user experience?
Designing for an Arabic user experience targeting the local audience is not just about translating. Shout out loud!
Being in the website & mobile app development industry for decade, Stimes team always study the target audience of the product and identified that a language is not only a way to express ideas for users, but it also determines how to tell a story, how to connect with the region and how to engage with your users. In fact, the targeted audience we talk now is about 360 million people in 25 countries and territories that speak Arabic. In numbers, if the Arabic population was one country, it would represent the world’s eighth-largest economy — bigger than India or Russia.
More than half the population is under 30 years of age, making it one of the world’s most youthful markets. It is considered a new whole economy that is growing every day and should be looked at.
The question is, how do we design ideas or business product for them?
It is a known fact that everyone considers the RTL (right-to-left) reading for Arabic language design, which determines how you present a story, CTAs, image progressions, and product colocation, etc. From the design perspective, we call it mirroring, a technique (often named 101) to apply design for content for Arabic countries. While in Western countries (the ones that have the Latin alphabet) you apply LTR (left to right) reading, in the Arabic world, you should “mirror” the design in order to create the LTR (left to right) reading.
Above is an example of how a story has to be presented for an Arabic audience in their way likely. Note that even the opening of the door could keep inverted in order to be consistent with the LTR reading. A perfect example of a mirror concept live is how Facebook is represented in the Middle East.
LANGUAGES
A written word is an important key of any interface and it will lead the user to understand your business flow easily and clearly. In many cases, information that can be transferred to one user in a few words in other LTR (Left to Right) languages might need a long sentence in Arabic. Latin characters are much longer and narrower than Arabic characters, which means they take up more space horizontally as well.
Most Arabic words are written with many dots, notations, small symbols, which add challenges for a designer if the content takes more space in the collaterals. Indeed, the Arabic language’s complexity can affect how clear you want to be with your product. No reputed companies directly translate the content from other languages to Arabic using Google translator or other tools as it doesn’t work well. Choosing the right words to convey the concept concisely is always the best option to help the visual design perspective.
The above example shows the text length difference in the Arabic buttons. It is recommended to use a bigger font and 3 points larger than you would normally use for English because you would need to take consideration of the space in the letters in order for it to be readable. Just for reference, fonts like Noto, Google’s font, or Tahoma are good options to use.
ICONOGRAPHY
Though there is a change in language, it is recommended to keep logos or Icons that are a trademark should not change, to ensure they are recognized in the same way in every language. The other types of icons can be changed depends on business to business when they indicate movement otherwise they can remain the same.
The above shows, first one is LTR reading and the latter is RTL reading. Another example below for an icon alignment, in which the location of the icons is reversed but the alignment remains the same.
In this example, you can see that volume and storage space are represented differently for western countries to Arabic language selected individuals. But there are some symbols that stay the same.
The first image represents a Contact Profile in Latin characters. The second is the same profile in Arabic characters. Some iconography such as the name, phone and address don’t change.
NUMBERS
It is common and understands easily how numbers function in Arabic. The Arab language uses Hindi — Arabic numerals — the most common system for numbers — which are also written from left to right.
Examples of digits in Arabic sentences:
He was born on 29 October 1951
ولد في 29 أكتوبر 1951
As you can see even though you read the whole sentence from right to left you to read the numbers themselves from left to right. Date 29 comes and not 92 and 1951, not 1591. The same happens with clocks for time. When you display the time on a clock it will still turn clockwise for RTL languages. A clock icon, a circular refresh or progress indicator with an arrow pointing clockwise should not be mirrored.
IMAGES
Finally words, design Arabic user experience includes images that can be a good representation of a product or business. 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 images that Arabic people can relate to their culture or social living. 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 Qatar.
On the right, we can see that the use of the burka (Abaya) is mandatory in Saudi Arabia and covers most of the body. On the left, we can see an image of Tunisia women with only some of them wearing the hijab because it is not mandatory in the country. Doing proper research on user persona will save you from falling into stereotypes of the Middle East and will help you connect better with your users.
FINAL THOUGHT
As a UX/UI Designer, we need to understand how we can design Arabic user exxperience and it is interesting to see how every region has its own interpretation of reality. It makes the positioning of a product a bit difficult task but an enjoyable one for the creative project manager or designer as well. It is more interesting if we dig deeper as we have over 700 spoken languages around the world and each of them has its own characteristics.
Getting deep into a language and its culture will help you further understand the user’s needs and present a better solution for them with your product.
