Part 3: What else can go wrong? The Arabic Help page

Illustrating why you need to design with global users in mind

Welcome back for more explaining with examples! In Part 1, we dived into the Big Three definitions of the industry localization, internationalization, and globalization; we continued in Part 2 with what can go wrong if we don't implement these steps; and now in Part 3, we'll explore what else can go wrong, using examples that could literally flip your worldview!

Why? Because this time we'll investigate an interesting set of challenges in the Arabic language.

In the last article, we discovered some of the reasons why localization testing is important.?This time, we'll focus on designing for global users.?

THE ARABIC HELP PAGE EXAMPLE

In this example, let’s see how incorrect placement, layout, and language direction can cause issues for the user. It's common for developers to place translated words for different language versions into the same exact layouts that exist in the English source version. As we saw in Part 1, this is what we could call an internationalization error because they are assuming one design works the same for all languages… but we're going to see how it clearly does not!

English vs. Arabic

As we saw in Part 1, English (a language that primarily reads Left-to-Right) uses a different layout direction than Arabic (a language that primarily reads Right-to-Left). This can be an issue because if the layout doesn't support the appropriate direction of the languages, the user might not be able to read the content, or could be confused because the elements are not placed correctly on the page.

Why is this important??Global products are frequently designed in English and Left-to-Right (LTR) orientation to be launched into English-speaking markets first, leaving different language versions and layouts to be dealt with later. This is true for all languages but especially for Arabic, Hebrew, and Farsi language versions – many challenges arise because they require Right-to-Left (RTL) orientation, which will result in rework and redesign, which can get expensive.?

For this fictitious example, let's say we are developing an online game called Points! The company decided to release an Arabic version of the game, but in the rush to launch and with concern about costs, translation was performed but vital localization steps were skipped. As you can imagine, the results were not optimal.

Did you know? Elements for Right-to-Left content need to be flipped to the mirror opposite position, from the original design in Left-to-Right orientation

Like most online services and gaming platforms, if the user has issues or needs help, they can type in questions using a query box on the Help page. In our online game example, the English version shows the title: Question?, while the Arabic version has the title translated into Arabic: ?????

The dotted line shows the direction the characters will be typed - - ->

As mentioned in Part 1, a common misconception is that we only need translation in order to release a good product. In this example, since the game was not designed for other locales, and the layout was not addressed in the localization step, most elements on the page are wrong.

Why is this an issue? The user would be frustrated that the system doesn't support their language; and worse yet, the user would never be able to ask questions, since it's not possible to type them correctly.

What went wrong exactly??(See the Incorrect example above)

Layout issues: The translation and text box were left in the same direction for Arabic users as they were created originally for English users.

Input issues: Text input also remains in the direction as created originally for English users.

How do we fix the app for Arabic language usability? (See the Correct example above)

All elements needed to be switched to the correct RTL direction:

?? The Arabic text was moved to the right of the input box, and all art elements flipped accordingly

?? The text input direction is fixed, so that typing proceeds in the direction <-- RTL

Understanding how navigation changes

Here's another design flaw... Let's assume in our online game, a user guide is provided as an online document and downloadable PDF. But since the words were only translated and localization steps were skipped, these items will be difficult for the Arabic reader to use. Why? The pages move in the wrong direction, and the navigation buttons that move pages back and forward are wrong.

Navigation buttons can be as simple as an arrow bracket and word, like this: "< Previous" and "Next >". Most of the time this simple method works because the navigation flows Left to Right for most languages. But when you're dealing with an RTL language, it will be all backward.

What went wrong exactly? (See the Incorrect example above)

Here we have another usability failure. The words Previous and Next were translated, but just like the French shopping cart example from Part 2, only translating the words is not enough to make the product usable. Notice how the arrows change from source to translation. (The translator is giving you a clue by flipping the direction of the arrow.) More work needs to be done!

How to fix the navigation? (See the Correct example above)

The navigation needs to follow the language direction. The original LTR page flow was like this: Page 1 --> Page 2 --> Page 3, with forward and backward arrows indicating the direction back and forth, but generally moving in the direction left-to-right.

?? We need to rearrange the page flow, so the order is reversed into an RTL page flow like this: Page 3 <-- Page 2 <-- Page 1, generally moving in the direction right-to-left.

?? We need to switch the navigation buttons (and arrow brackets) for Next and Previous, to accommodate the rearranged page flow. The links between the buttons and pages will change accordingly.

Why are these examples and issues important?

If you're spending the extra time needed to design for global users as part of the general design phase, with the goal of understanding the needs of each locale ahead of time, you can produce more profitable global versions. As the most successful global brands know, this will save money, time, and reputation in the long run.

More to know about Bidirectional languages

What is Bidirectional?

You may find it useful to learn more about different directional aspects. As I'd mentioned previously, LTR and RTL languages have a primary direction. But Arabic, Hebrew, and Farsi are also known as Bidirectional languages, because "some portions of the text, such as numbers and embedded Latin languages (e.g. English) are written and read left to right." (Acc. IBM)

As you can see from this illustration, the words google.com in English stays intact in the LTR direction, while existing in the middle of an Arabic RTL sentence. The order is correct and will be understandable by the reader.

Arabic vs. Arabic-Indic numbers

Did you know? Arabic characters read from Right-to-Left, however the numbers used in Arabic content read Left-to-Right

In the graphic below, the top row shows Western "modern" numbers (known as Arabic numbers) that are familiar in most languages, while the bottom row shows "traditional" numbers used in the Arabic language (known as Arabic-Indic numbers). Whatever they're called, you can see that in both systems the numbers flow Left-to-Right, even though Arabic text flows Right-to-Left.

To find out more about Bidi languages, see the list of resources below.

Coming up next: Favorite localization gaffes to avoid

Gaffes in localization happen all the time, but there are grand examples you should know about, and try to avoid. As always we'll examine colorful examples when?Localization, Explained?continues next week. See you in the next article!

_______________________

Recommended: Read more about Bidirectional languages

One of the best resources explaining Bidirectionality and mirroring layouts

Designing for bidirectional languages, see Bidi algorithm from the W3C Internationalization blog

Wikipedia page about Arabic-Indic numbers

About Arabic and Hebrew, and Right-Side Binding in Adobe InDesign: Using Arabic and Hebrew

Designing screens and experiences for RTL languages: Working with Arabic in UX design

IBM documentation on Bidirectional languages

Copyright ? 2023 Marina Gracen-Farrell