{"id":18636,"date":"2019-12-12T16:00:20","date_gmt":"2019-12-12T16:00:20","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18636"},"modified":"2023-10-02T22:44:49","modified_gmt":"2023-10-02T21:44:49","slug":"mirroring-designing-for-arab-users","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/mirroring-designing-for-arab-users\/","title":{"rendered":"How to Design for Arabic Users"},"content":{"rendered":"

When you think about the best websites, apps, and designs you have ever seen you will probably think of designs with a western structure. But have you thought about how the same website would look for an Arabic audience?<\/p>\n

Designing for an Arabic audience is not just about translating. 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 world and how to engage with your users.<\/p>\n

<\/div>
<\/svg><\/div>

\"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 world and how to engage with your users.\"<\/p><\/span><\/blockquote>\n

When we talk about the Arabic world we refer to the 358 million people in 25 countries and territories that speak Arabic. If the Arabic population was one country, it would represent the world\u2019s eighth-largest economy \u2014 bigger than India or Russia.<\/p>\n

More than half the population is under 25 years of age, making it one of the world\u2019s most youthful markets.<\/p>\n

It is a new whole economy that is growing every day and should be looked at. The question is, how do we design for them?<\/p>\n

\"Design<\/p>\n

Design by: Hanan Hamdy<\/a><\/p>\n

Mirroring: an oppositive way to look to the world<\/h2>\n

When you design for an Arabic user you have to take into consideration the RTL (right-to-left) reading, which determines how you present a story, CTAs, image progressions, and product colocation.<\/p>\n

<\/div>
<\/svg><\/div>

\"Mirroring is the technique to apply design for content for Arabic countries.\"<\/p><\/span><\/blockquote>\n

While in Western countries (the ones that have the Latin alphabet) you apply LTR (left to right) reading, in the Arabic world, you should \u201cmirror\u201d the design in order to create the LTR (left to right) reading. This technique is often named the 101.<\/p>\n

Arabic users are more likely to perceive progression and forward movement if shown designs from right to left.<\/p>\n

Research has indicated that an Arabic user\u2019s reading pattern is based on mirroring. Starting from the top right corner of the page, they scan across the top and then scan down the right-hand side of the content.<\/p>\n

\"\"<\/p>\n

This is an example of how a story has to be presented for an Arabic audience. Even the movement of opening the door has to be inverted in order to be consistent with the LTR reading.<\/p>\n

Also, you can see how Facebook is represented in the Middle East. It looks like the page is presented using a mirror.<\/p>\n

\"\"<\/p>\n

Languages<\/h2>\n

The written word is an important key of any interface and it will lead the user to understand your product easily and clearly.<\/p>\n

Arabic is a language that employs more words than English. Information that can be communicated in a few words in English might need a long sentence in Arabic.<\/p>\n

Latin characters are longer and narrower than Arabic characters, meaning they take up more space horizontally.<\/p>\n

Most of the Arabic letters are written together, many have dots and small symbols that are written above the letters. This adds further challenges to making the reading comfortable for the user.<\/p>\n

Indeed, the Arabic language\u2019s complexity can affect how clear you want to be with your product. For this reason, direct translation doesn\u2019t work in Arabic languages. Finding the right words to express your sentiment concisely is always the best option to help the visual design perspective.<\/p>\n

\"Mirroring<\/p>\n

<\/div>
<\/svg><\/div>

\"Finding the right words to express your sentiment concisely is always the best option to help the visual design perspective.\"<\/p><\/span><\/blockquote>\n

Have a look at the text length in the Arabic version\u2019s buttons.<\/p>\n

It is recommended to use a bigger font and 3 points larger than you would normally use for English because you need to take consideration of the space in the letters in order for it to be readable.<\/p>\n

Fonts like Noto<\/a>, a universal font designed by Google, or Tahoma are good options.<\/p>\n

Here are some examples of English words next to Arabic translations<\/a> (notice the word length):<\/p>\n

TV \u2014 \u062a\u0644\u0641\u0632\u064a\u0648\u0646\u00a0 (this is a loanword read: te-le-fee-syoo-n)<\/p>\n

KFC \u2014 \u062f\u062c\u0627\u062c \u0643\u0646\u062a\u0627\u0643\u064a<\/p>\n

TV show \u2014 \u0628\u0631\u0646\u0627\u0645\u062c \u062a\u0644\u0641\u0632\u064a\u0648\u0646\u064a<\/p>\n

Iconography<\/h2>\n

Logos or Icons that are a trademark should not change, to ensure they are recognized in the same way in every language.<\/p>\n

The other types of icons should only change when they indicate movement otherwise they can remain the same.<\/p>\n

\"\"<\/p>\n

The first one is LTR reading and the second one is RTL reading.<\/p>\n

Here\u2019s an example of icon alignment done right:<\/p>\n

\"\"<\/p>\n

The location of the icons is reversed but the alignment remains the same.<\/p>\n

\"\"<\/p>\n

In this example, you can see that volume and storage space are represented differently for western countries to Middle Eastern countries.<\/p>\n

But there are some symbols that stay the same.<\/p>\n

\"\"<\/p>\n

The first image represents a Contact Profile in Latin characters. The second is the same profile in Arabic characters<\/p>\n

Some iconography such as the name, phone and address don\u2019t change.<\/p>\n

Numbers<\/h2>\n

It is easier to understand how numbers function in Arabic. The Arab language uses Hindi \u2014 Arabic numerals \u2014 the most common system for numbers \u2014 which are also written from left to right.<\/p>\n

Examples of digits in Arabic sentences:<\/p>\n

He was born on 29 October 1951<\/p>\n

1951\u00a0\u0648\u0644\u062f \u0641\u064a 29 \u0623\u0643\u062a\u0648\u0628\u0631<\/p>\n

As you can see even though you read the whole sentence from right to left you read the numbers themselves from left to right. It is 29 and not 92 and 1951, not 1591<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

Images<\/h2>\n

Besides words, images can be a really good representation of a product.<\/p>\n

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.<\/p>\n

Use imagery that Arabic people can identify with. Also, make sure you don\u2019t fall into any stereotype traps.<\/p>\n

For example, a representation of a woman in Saudi Arabia is not the same as, as that of a woman in Tunisia.<\/p>\n

On the right, we can see that the use of the niqab and burka are mandatory in Saud Arabi and covers most of the body. On the left, we can see an image Tunisia`women with only some of them wearing the hiyab because it is not mandatory in the country.<\/p>\n

Doing a proper investigation will save you from falling into stereotypes of the Middle East and will help you connect better with your users.<\/p>\n

Final thought<\/h2>\n

As a UX\/UI Designer, it is interesting to see how every society has its own interpretation of reality. It makes the positioning of a product a difficult task but an enjoyable one as well.<\/p>\n

Here we have talked about Arabic languages but nowadays there are over 700 spoken languages around the world and each of them has its own characteristics.<\/p>\n

<\/div>
<\/svg><\/div>

\"Getting deep into a language and its society will help you further understand the user\u2019s needs and present a better solution for them with your product.\"<\/p><\/span><\/blockquote>\n

This was originally posted on Gabriela's Medium Page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

When you think about the best websites, apps, and designs you have ever seen you will probably think of designs with a western structure. But have you thought about how the same website would look for an Arabic audience? Designing for an Arabic audience is not just about translating. A language is not only a way to express ideas for… Read More ￫<\/a><\/p>\n","protected":false},"author":307,"featured_media":18664,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-18636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n