RTL UI

RTL UI
Zdenek Zenger
03/2019 UX Meetup

One day ...
We are planning deployment in Israel, Arabic and other “RTL”
countries this year. For the next months, you were assigned
to this key task - adapt our current LTR solution to RTL.

Bidi Bidirectionality
UIs for languages that are read from right-to-left (RTL), such
as Arabic and Hebrew, should be mirrored to ensure content
is easy to understand.
- Google Material Design

Just a few simple tweaks ...
<html dir="ltr|rtl|auto">
<bdo dir="rtl"></bdo>
Bidirectional Text Override
Dir Attribute
Right-to-Left Development: Tips and Tricks | Right-To-Left Development In Mobile Design

Innovation, integration, accessibility for disabled people in Israel

Users
■ 467 mil. Arabic speakers (~6% of world population)
■ ~ 17% (1.6 mil.) people with disabilities (Israel)
■ Other largest Hebrew speaking population in USA, France or Canada
■ 9 mil. Hebrew speakers in Israel + ~2 mil. worldwide
UA Central Bureau of Statistics | Israel Central Bureau of Statistics | CZSO - Statistical offices
■ ~ 2% (8 mil.) people with disabilities
■ > 10 Arabic dialects

Israel Saudi Arabia United Arab Emirates Egypt
9 mil. 33.5 mil. 9.5 mil. 98 mil.
54% 39% 47% 51%
44% 60% 51% 48%
2% 1% 2% 1%
360x640, 1920x1080,
1366x768
360x640, 1366x768 360x640, 1366x768,
1920x1080
360x640, 1366x768,
1024x768
Chrome, Safari, IE,
Firefox
Chrome, Safari,
Firefox
Chrome, Safari Chrome, Safari,
Firefox

Designing for the Arab User — Basic Arabic UX for Business

https://www.ynetnews.com/articles/0,7340,L-4335235,00.html
https://qz.com/969597/hebrew-was-the-only-language-ever-to-be-revived-from-
extinction-there-may-soon-be-another/
https://www.telegraph.co.uk/news/2019/03/14/egypt-desperate-bid-curb-birth-rate-population-nears-100-million/

Most people talk about mirrored F-shape ...
F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant

… but eye tracking studies found more.

Visual Reading Patterns on Arabic Interfaces: Insights from Eye Tracking
Another common pattern that the
participants exhibited is the tendency
to read only the headings and skipping
the subheadings.
... in that the banner on the left side
has received less attention by the
users. Reem reported that, ads placed
in the right side of an Arabic website
get more attention.

What they said
Internationalization is the process of designing a software
application so that it can be adapted to various languages and
regions without engineering changes.
Localization is the process of adapting internationalized software
for a specific region or language by translating text and adding
locale-specific components.
- Wikipedia

Language From English Into English
Arabic +20% to +25% -20% to -25%
Hebrew -20% to -30% +20% to +30%
Will the translated version be longer or shorter than the
original document?

Script / Alphabet Language
Arabic Arabic, Azeri, Bakhtiari, Balochi, Farsi/Persian, Gilaki, Javanese, Kashmiri,
Kazakh, Kurdish Sorani, Malay, Malayalam, Pashto, Punjabi, Qashqai,
Sindhi, Somali, Sulu, Takestani, Turkmen, Uighur, Western Cham
Hebrew Hebrew, Yiddish
Syriac Syriac Assyrian, Modern Aramaic, Syriac
Samaritan Samaritan Aramaic
Mandaic Mandaic
Thaana Dhivehi
N’Ko Manding languages
Adlam Fula languages
Tifinar Tamashek
Urdu Urdu

Hebrew (Modern)
■ Numbers - Hindu-Arabic system (1,2,3, …) or Hebrew system (‫,ג,ב,א‬ ...)
■ Decimals - separator is comma “,” such as 1 000,00 or 1.000,00
■ Currency - rather names than symbol, “$17” > “dollar 17”
■ Date - DD/MM/YYYY or YYYY/MM/DD, abbreviation for months or number
■ Time - 12-hour format with a.m. / p.m. or 24-hour clock
■ Abbreviations - quite uncommon
■ Capital letters - no capital letters but character position matters
■ Contact information - phone numbers, emails, URLs are in LTR format
>1% worldwide

The system of Hebrew numerals is a
quasi-decimal alphabetic numeral system
using the letters of the Hebrew alphabet. The
system was adapted from that of the Greek
numerals in the late 2nd century BCE.
In Israel today, the decimal system of Arabic
numerals (ex. 0, 1, 2, 3, etc.) is used in almost
all cases (money, age, date on the civil
calendar). The Hebrew numerals are used
only in special cases, such as when using the
Hebrew calendar, or numbering a list (similar
to a, b, c, d, etc.), much as Roman numerals
are used in the West.
- Wikipedia

Arabic
■ Numbers - Hindu-Arabic system (1,2,3, …) or Roman system (M,VII, ...).
■ Decimals - comma “,” as separator, e.g. 1 000,00 or 1.000,00
■ Currency - rather names than symbol, “$17” > “dollar 17”
■ Date - RTL reading YYYY-MM-DD, full name for months or number
■ Time - 12-hour format with a.m. and p.m.
■ Abbreviations - quite uncommon
■ Capital letters - no capital letters but character position matters
■ Contact information - phone numbers, emails, URLs are in LTR format
4th globally most used, in 26 countries

Arabic keyboard
Hebrew keyboard
(Israel standard)
Gate2home.com

… it is not classic.
Font increased by 4 points.

… easy, flexible and multiculti.
16
32
16
16

One rule to rule them all ...
Icons that communicate direction or are part of (an animated)
movement (horizontal, left-to-right movement) are mirrored.

Back & forward
Login & logout
Expand & collapse
Direction & Movement
Utility & system icons
LTR RTL LTR RTL LTR RTL
Direction icons in UI

… almost all.
Clock and time based symbols
Music and player controls
Question marks, info icons
Loupe, checkboxes
Slash symbols and “broken” symbols
Brand, proportionally balanced icons
Charts and special cases

What else?
■ Culture universal icons, e.g. be aware of hand gestures and body parts.
■ Being “different” for all cost - humor, slang, mythological, and religious.
■ Translation of text inside icons.
■ Interpretation of colors in icons.
■ Semantics of the icons.
■ Keep LTR format for icons representing objects usually held with the
right hand, e.g. phone icon.
Star / asterisk as a symbol? Some countries use a five-point star / asterisk instead of
the six-point version - the latter can be misinterpreted as the Jewish Star of David.

Internet Explorer and Safari also do RTL :)
But not all versions of these browsers switch scrollbar ...

Please wait, content is loading ...
Source

In a seconds I will fill this form

What's the date today?
Hebrew and Arabic date picker from Booking.com

What's the date today?
Sunday or Monday as a first day of week? CLDR can help :)
Source

Volume up, this is my favourite

What else?
■ Search for international projects should be (ideally) multilingual - letting
users search in English and in their native language.
■ (Cultural) appropriate images.
■ Accessibility.
■ Content first.
■ Design system review.
RTL plugin (Sketch)

Common pitfalls
■ ”LTR” text in RTL layout
■ ”Translator” vs native speaker
■ Dots “...” can make the longer words shorter
■ No local people for interview or testing
■ No testing, only best practises and internet
■ ”Universal” habits

LTR or RTL?
■ What is the value of RTL for my international project?
■ Do we have sources to build “totally new” solution?
■ How we will support RTL solution after launch?
■ Will our solution fit target market?

Want more?
■ Arabic usability guidelines for e-learning platforms (dissertation)
■ How We Conducted User Research in The Arab Market
■ Universal UX Design: Building Multicultural User Experience
■ Designing an Arabic User Experience
■ Web Accessibility in the Middle East
■ Internet Usage in The Middle East – Statistics and Trends
■ Blog Global Media Insight

■ MIDDLE EAST SHOPPERS ONLINE SHOPPING BEHAVIOR – STATISTICS
AND TRENDS
■ Complete List of Arabic Speaking Countries
■ Google Material Design
■ Microsoft Dev Center
■ RTL Apple Developers
■ Lighting Design System Localization
■ Structural markup and right-to-left text in HTML and RTL CSS
■ Hebrew

thank you
cz.linkedin.com/in/zzenger / zdenek.zenger@gmail.com

RTL UI

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to RTL UI

Similar to RTL UI (20)

Recently uploaded

Recently uploaded (20)

RTL UI