Arabic web / app design and UX

I get asked on a regular basis about designing for Arabic so I thought I'd share the advice more widely

I’ve run user research in Saudi Arabia, Dubai and Egypt and worked on design projects for the wider Arabic region and I’ve learnt some important lessons. If you need help with UX for any country or culture I can help.

Tips for designing for Arabic

Mirror image

The first and most noticeable thing about Arabic is that it runs from right to left. This has a profound effect on the design.

Effectively, the website runs from left to right. The content is mirrored. Here’s Booking.com doing a great job.

In English:
booking_English

In Arabic:
booking_arabic_page

The flow and hierarchy of design elements runs from right to left.

The easiest way to think about it is that the page is a mirror image. This includes navigation items reversing in order.

Arabic_web_design

The good news is that many mobile layouts which have content organised in a single column, make it easier to design for Arabic.

This can make design a challenge so I always recommend getting an Arabic designer whenever possible.

Arabic fonts usage

In Arabic the font choice is limited. Webfonts are typically larger in size than Latin versions. Think 20Kb per weight, Alef bold is 94Kb, Helevtica Bold 74Kb.

This issue along with little support from Google Fonts and other font CVNs makes choice a challenge. Google does have limited support for Arabic in its Early Access programme.

The easiest choice is to default to the system font Arial which is rock solid in Arabic.

Arabic set in Arial
Arabic set in Arial

Arabic is cursive, meaning letters flow together to create the words. This can be easily lost if the font size is too small. Throughout the user research I’ve done in the region everyone at some point had to use the browser text zoom on western designed websites to make the words legible.

In this example from Booking.com the small point size in English is legible but the Arabic is less so. (zoomed in)
arabicexample

Typically add +2 to the point size of body and smaller text.

Advice for a good Arabic User Experience

Don’t stereotype in the design

It’s easy to take the western view on design from the Arabic region. Camels, minarets, tiles, tagines etc.

Stop. Don’t stereotype. It’s the equivalent to adding red telephone boxes, Big Ben for the British, or cowboys, yellow cabs and the statue of liberty for Americans. Too many cliches.

Investigate contemporary design in the region and add a local feel.

Different types of Arabic

Just like there isn’t one type of English the same is true of Arabic. It is spoken from the Oman in the Middle East to Mauritania in North West Africa.

There is the standard ‘official’ Arabic taught in schools across the region and this often spoken alongside a dialect of Arabic. When an Arabic speaker from Syria meets an Arabic speaker from Saudi Arabia then will use official Arabic where possible with words taken from the local dialect where the official may not be known. It’s akin to a Spanish person and an Italian trying to speak to each other in Latin.

Education standards differ across the region meaning many users may not be 100% confident with standard Arabic.

In practice this means if you are designing for the region use standard Arabic, if you are designing for a certain country use elements of the dialect where possible to make the design fit the culture. Egypt is a good example where official Arabic may not be suitable.

To be successful you should offer a site per country for the major countries rather than a one-size-fits-all generic Arabic site. Especially for the 88 million Arabic speakers in Egypt.

Get local, professional help specific to the country

Whenever possible get help from a native Arabic speaker on the design, even better get them to design it for you.

I’d also recommend getting support from specific countries you are targeting.

Get in touch with me for contacts in the region.

User research the problem and the solution

User research will help you understand the specific cultural needs of the region. If your focus is all Arabic speakers ensure you research in each individual country as they will all have different needs. Dubai, Egypt, Morocco will give a good spread across the region.

Try where possible to use local moderators. I’ve worked with Syrian Arabic moderators in Saudi Arabia and had problems with the moderator not understanding the user. Also have both a man and woman moderator for each gender to respect beliefs.

Again if you need help get in touch.

Translation is not enough

You will need to factor in more time, resources and money to make a website or app work for Arabic speakers than say for a German audience.

I’ve seen many underperforming international sites because all they do is translate the content into Arabic.

The fact that Arabic runs right to left, the different font needs and sizes, the cultural nuances mean a straight, direct translation of your site or app into standard Arabic means it won’t be as effective as if you had spent the time design it from the ground up to meet local needs.

If you need help with UX for any country or culture I can help

More Arabic design resources

The BBC offer some great advice:
13 tips for making responsive web design multi-lingual

I regularly update my Arabic design resources and I’m always happy to help if you need it on your next Arabic project.

I’m not a native Arabic speaker so no doubt I’ve made a mistake somewhere, please get in touch to help my improve the article.

If you have more resources you’d like to share please add a comment.

2 Responses to “Arabic web / app design and UX”

  1. Ahmed Adel

    Great article, especially the “stereotyping-translation” points are really spot on.I think this is very helpful for all web designers even the Arabs among them 🙂
    For Arabic @font-face go to http://www.fontface.me/
    Thanks for sharing your knowledge Joe 🙂

  2. Mark Warman

    Great article Joe. Even with an estimated 255 million+ Arabic speakers around the world, it seems that Arabic itself is a really poorly supported language online. Although I don’t think that’s entirely the fault of the web community at all. The main issue for us (we cover a lot of social media marketing for a couple of government entities here) is Arabicisation rather than translation. There are so many sayings, phrases and combinations in both English and Arabic that just don’t translate at all that getting copy to make sense and flow is a real art. The fascinating thing for us has always been that our clients (who are often Bahraini) won’t touch copywriting with a barge pole – there seems to be a huge difference between being able to write an email or a short document and writing for public consumption. So localisation and professional translation is super important!

Leave a Reply