Designing an Arabic User Experience – Part 2: Usability & Arabic User Interfaces
The second article in our 3-part series on UX for Arab users and the unique usability considerations that come with it.
Let’s talk about Arabic websites.
Actually, not just websites. Mobile applications, intranets, or even custom software. Basically, any interface where the content and copy is in Arabic.
In the first article in this series, we spoke about how digital products aimed at Arab users require certain considerations when it comes to designing the user experience. And an important aspect of delivering that user experience is for it to be in Arabic, which in turn brings its own challenges
In this article, we’ll run through some of those challenges and the related usability considerations.
The Importance of Language in UI Design
The written word is always going to be the backbone of communication on any interface.
Language has a direct impact on the user’s perceived usability of an interface. When users have difficulty understanding the content on your website or application, it leads to user frustration and dissatisfaction.
Whether it’s your headlines above the fold, labels in your menu, product descriptions or your button copy, the language you use plays a big role in your user’s experience.
Direct Translation Can Result in Usability Fails
Arabic tends to be a more ‘wordy’ language than English. Information that can be communicated in just a few words in English, can take a sentence or two in Arabic.
This becomes a usability issue when we consider how users read online. Almost all users scan rather than read content word for word.
Hence, the more content there is for them to have to scan, the greater the likelihood they’ll either miss the information they’re looking for or be intimidated by the length and leave altogether.
Your users will always prefer content that is concise and straight to the point.
Why? Because they’ve got something they want to do and they want to get it done fast. Even with websites and apps where consuming written information IS the goal, overly lengthy writing risks users zoning out and leaving.
And it’s not just about user needs. Lengthy Arabic copy also poses a problem from a visual design perspective.
It’s often the case that certain words or phrases in English don’t have direct Arabic translations. Instead, they end up being described with longer phrases. This becomes a particular problem when there’s limited screen real estate available, for example, button copy or copy for a mobile design.
So don’t just rely on direct translation from your English content. When creating your Arabic copy, you’ll need to make an effort to think about what exactly it is you want to communicate and how best to do it as concisely as possible.
Here the Arabic version of the product description is cut off because of the lengthy translation of ‘4G’. Also, notice the differences in copy length for the different buttons.
Keeping in Mind Different Cultural Values
Language is an important aspect of any culture. If the goal is to create a great user experience for Arab users by catering to their local culture, communicating in Arabic has to be the starting point.
But it isn’t as simple as mirroring your existing content in Arabic.
Even with the best translators, you need to have a good understanding of different local cultures and societal practices. By not doing so, you risk putting out content that is confusing at best or is considered offensive at worst.
Arab cultures are (for the most part) traditionally conservative and controversy averse, with many practices and norms revolving around Islamic beliefs and customs. So everyday words or phrases that may be completely acceptable in Western countries could rub Arab audiences the wrong way.
That said, it’s important to remember that there is no single Arab culture. What may be common practice in one Arab country may be completely foreign in another.
Even within a particular culture, it’s important not to rely too heavily on what are essentially characteristics drawn from shared group identity. You need to make sure you look at the characteristics and behaviors of your target users, and not those drawn from the general population.
Should You Use Formal or Local Arabic?
As we just mentioned, there is no single Arab culture.
Different countries and, in some cases, even different regions within the respective countries have their own unique and particular customs and habits.
This variation in culture extends to the dialect of Arabic people speak.
Words that have a specific meaning in one Arabic dialect could have a completely different meaning in another one. They could even be words that sound completely foreign to Arabic speakers from another country. Often, certain words or phrases require a contextual understanding of that particular culture in order to know their meaning.
So if your website or application has to be used by, and appeal to, Arabic speaking users from across the region, how do you accommodate variations in dialect?
The simplest solution is to use what is sometimes referred to as “Modern Standard Arabic” (MSA) or Classical Arabic (fusha in Arabic). MSA is the standard that is most commonly taught in schools, with the majority of Arabic speakers able to read and write in it.
It’s often considered a prestigious form of Arabic and tends to be used in academia and other formal circumstances such as in the media.
However, it’s important to make the distinction that MSA is NOT a neutral form of Arabic. Arab users do not speak MSA in their daily lives.
If you do end up using MSA, while the majority of users will be able to understand your content, the formal nature may not match your brand or the tone of voice you’re going for.
Deciding on the format of Arabic you should use will be influenced by a number of different factors. Are your target users based in a single country or are you targeting the whole region? Do you have the resources and capabilities to have your website cater to the local dialect? What’s the tone of voice that you want your website or application to convey?
Again, it’s important to fully understand who your target users are and then base your decisions accordingly.
Providing Multilingual Search Functionality
We know that Arab users prefer sites and applications that are in Arabic.
But when it comes to search functionality, incorporating both Arabic and English is often a usability necessity.
Users looking for a specific product on an e-commerce site will use the product name that’s most familiar to them. And more often than not, that brand name will be in English.
Similarly, many B2B industries often use specialist terminology or software that users only know the English names for, meaning they’ll need to search for it in English.
Depending on your business and the needs of your users, providing multilingual search functionality may be a key aspect of usability for your website or application.
But if you do offer it, keep in mind the usability principle of allowing for user error in the form of misspelled keywords. Users will often make spelling mistakes, either because they’re in a rush, they get distracted or simply because they’re not sure of the correct spelling.
Make sure your search results accommodate for spelling mistakes. You can do this by either taking into account common spelling mistakes and providing the search results you think users are looking for, suggesting alternate search keywords that could be what they wanted to enter or including predictive text in the search field.
Either way, don’t just return ‘no search results found’. It’s a big usability no-no.
Searching for the English keyword ‘iPhone’ still delivers the correct results in Arabic.
Visual Design in Arabic Interfaces
Arabic language interfaces also bring with them particular challenges in relation to their visual design.
From the obvious issue of the Right to Left (RTL) layout to other usability considerations related to images, icons and type font and size.
Right to Left (RTL) Layout
Because Arabic is written right to left, Arabic websites and products are designed with the elements of the page aligned to the right-hand side.
Research from NNg as well as our own eye-tracking studies at UXBERT has shown us that user behavior on Arabic sites mirrors the F-shaped reading pattern typical of users on English language websites.
Users on Arabic language sites start from the top right corner of the page, scan across the top and then scan down the right-hand side of the content.
Despite the differences in layout, users across the board exhibit the same behavioral patterns regardless of the alignment of the site. They pay more attention to the beginning of the content, scan for headlines and subheadings that match what they’re looking for as they scroll down the page and for the most part will be less and less engaged the further down they scroll.
Interestingly, we’ve seen Arab users be able to switch back and forth between Arabic and English language websites with ease, adjusting their scanning and behavior accordingly with minimal effort.
So even if they’ve just been using an Arabic language, RTL website, if their next destination online is a Left to Right (LTR) website in English, their scanning behavior automatically switches to scanning down the left-hand side.
However, while user behavior on RTL websites is a mirror of LTR websites, it doesn’t necessarily follow that designing an Arabic language interface is simply a question of mirroring every element of the site.
Logos and icons are a good example of elements that should sometimes keep their LTR alignment on RTL websites. If your users have a degree of familiarity with a particular logo or icon, then it makes sense to keep the same orientation to make recognition easier.
When determining whether the orientation of an icon should be mirrored or kept the same, consider whether there is a user expectation for the icon to look a certain way. Also, think about whether changing the icon’s alignment has an effect on the metaphor it’s communicating.
Here’s an example of icon alignment done right:
Alignment done right. While the location of the icons is reversed, the alignment remains the same, sticking with user expectations.
LTR Text in a RTL Website
Another consideration that often comes up is how you should align LTR text on Arabic websites. This can apply to text labels (in menus or above input fields) as well as when inputting text into forms.
The issue arises when there is no Arabic word for the required label or input. Even if there is a direct translation, users may be more familiar with the English word within the context of the interaction in question. The same thing happens when dealing with numbers, specific names or abbreviations which are written in Latin script meaning they’ll also be read LTR.
Using Culturally Appropriate Images
A picture is worth a thousand words.
When it comes to web design, images play an important role in enhancing your user’s experience. They can actively work to increase your conversions, promote your branding or simply increase your visual appeal.
But you can’t just use any old image and expect it to enhance the user’s experience with your product. Eye-tracking research from usability experts NNg has shown that images that have no particular purpose other than to take up space are routinely ignored by users.
“Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to jazz up web pages.” – Jakob Nielsen
You need to put real thought into the images you choose to use and how your users will perceive them. And if you’re targeting Arab users, you need to keep in mind their different cultural and social norms and how these norms affect the perception of images you use.
Images are particularly useful for creating and leveraging emotional appeal. In order to do so effectively, however, your users need to personally relate to the images being used.
The most common way of doing this is to have an image that features a person your user can identify with, i.e. they’re able to see themselves in the same position.
For example, if your target users are males in Saudi Arabia, you’d want to use images of men who look like Saudis. This could mean that they’re wearing the traditional thawb.
Sounds simple, but it’s a great example of how not having the correct cultural understanding could backfire. To the untrained eye, the thawb is something that all Arab men wear; but the reality is each country in the region has their own version of it. So if you want to create the desired effect of your user identifying with the image, you need to make sure that you’ve got all the details right.
When picking images, it’s also important not to fall into using common stereotypes.
The thawb isn’t the only thing that Saudi men wear and equally, women don’t wear the abaya all day. It’s important to bear in mind the context of what your product is conveying and who your actual target users are.
And it’s not just in terms of what people are wearing in your images. The Middle East is a colorful and diverse region with a rich history. It really is much more than just the stereotypical deserts, camels and oil. If you’re trying to really connect with your users, don’t rely on lazy and naive caricatures of what countries here are like.
Font & Text Size
We’ve already talked about some of the challenges that come with using Arabic as a language for your websites and products.
Along with the issues with translation and localization, there’s also a visual element to consider when it comes to using Arabic for your interfaces in the form of Arabic typography.
Typography is a key factor in the usability of any interface. With the majority of information on any website or application being in written language, the type you use will often be amongst the first impressions a user has with your interface.
Arabic characters tend to be shorter and wider than Latin characters. This means that they take up more space horizontally while not being particularly readable when using the same text size as an English version.
It’s common that Arabic type is often set 4 points larger than corresponding English type in order to achieve the same degree of legibility. Therefore, when designing the layout of your interface, you’ll have to take into account the necessary space requirements for your copy.
It All Comes Down to Testing With Your Real Users
All of the things we’ve talked about above cover the basics to get you started if you’re new to designing interfaces in Arabic.
And if your target users are Arabs, then you probably don’t need us to tell you why your website or application needs to be in Arabic (yes, it sounds obvious, but honestly you’d be surprised).
But remember, these insights are just a starting point.
In order to design a truly outstanding user experience, you need to research your actual target users. That means talking to them to really understand their needs and goals as well as testing your designs to uncover usability problems.
When it comes to the user-centered design process, Arab users are no different to American users who are no different to Chinese users, at the end of the day you need to design with your actual users at the center of the process.
At UXBERT, we’ve carried out research and usability testing with Arab users from all walks of life. While a lot of our research is for projects that are aimed at Saudi users, we also get to talk to and test users from the large expatriate community here.
In the final article of this series, we’ll talk about some of the particular situations and barriers that we’ve come across while carrying out usability testing here in Saudi Arabia, from recruiting users to actually testing with them.
Points of Note:
- Arabic is a more ‘wordy’ language than English. You can’t just rely on direct translation, make the effort to write Arabic copy that communicates as concisely as possible.
- Arabic copy will often require more words than English and therefore takes up more screen real estate. Keep this in mind when designing layout and UI element pixel size
- It’s important to have a good understanding and appreciation of local culture when choosing the type of language you’ll use
- Different Arab countries use different dialects of Arabic so make sure you’re using the right dialect for your target users
- If your product is aimed at users across the region, you’ll need to consider using ‘Modern Standard Arabic’ (fusha)
- Implement multilingual search functionality to accommodate for when users are more familiar with English keywords rather than their Arabic equivalents
- Arabic speaking users mirror the F-shaped reading behavior of English speaking users when using Arabic interfaces
- Even in RTL websites, certain icons and logos should retain their LTR alignment
- When using images, make sure that they’re culturally appropriate for your target users
- Arabic type needs to be at least 4 points larger than corresponding English type in order to achieve the same degree of legibility
Other Articles in the ‘Designing an Arabic User Experience’ Series:
• Part 3: Usability Testing in Saudi Arabia
At UXBERT Labs we specialize in UX Research, Design & Development services that deliver world-class experiences. With offices in Riyadh and Dubai, our team of UX Researchers, Designers, and Developers deliver custom designed and built software to help businesses succeed.
Looking for a UX agency in Dubai or Saudi? Email us at hello@uxbert.com and let us show you why we’re an award winning company.
