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
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.
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.
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.
- A tutorial on designing for Arabic from the W3C
- Designing for RTL Languages — Getting Started
- Apple’s design guidelines on supporting Right-to_left Languages for iOS
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 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)
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’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.