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
- 1. RTL UI Zdenek Zenger 03/2019 UX Meetup
- 3. 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.
- 5. 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
- 6. 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
- 10. Innovation, integration, accessibility for disabled people in Israel
- 12. Research
- 14. 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
- 15. 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
- 16. Designing for the Arab User — Basic Arabic UX for Business
- 18. Reading
- 19. Most people talk about mirrored F-shape ... F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant
- 20. … but eye tracking studies found more.
- 21. 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.
- 22. Localization
- 23. 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
- 24. 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?
- 25. 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
- 26. 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
- 27. 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
- 28. 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
- 29. Arabic Alphabet
- 30. Arabic keyboard Hebrew keyboard (Israel standard) Gate2home.com
- 31. Typography
- 32. When you go classic ...
- 33. … it is not classic. Font increased by 4 points.
- 34. Time for something new ...
- 35. … easy, flexible and multiculti. 16 32 16 16
- 36. Iconography
- 37. One rule to rule them all ... Icons that communicate direction or are part of (an animated) movement (horizontal, left-to-right movement) are mirrored.
- 38. Back & forward Login & logout Expand & collapse Direction & Movement Utility & system icons LTR RTL LTR RTL LTR RTL Direction icons in UI
- 39. … 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
- 40. 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.
- 41. Mirroring UI
- 42. Internet Explorer and Safari also do RTL :) But not all versions of these browsers switch scrollbar ...
- 43. Please wait, content is loading ... Source
- 47. Sir, please where I am?
- 48. In a seconds I will fill this form
- 49. What's the date today? Hebrew and Arabic date picker from Booking.com
- 50. What's the date today? Sunday or Monday as a first day of week? CLDR can help :) Source
- 51. I will just type some words
- 52. Volume up, this is my favourite
- 53. 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)
- 54. Wrap-up
- 55. 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
- 56. 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?
- 57. A Q
- 58. 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
- 59. ■ 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
- 60. thank you cz.linkedin.com/in/zzenger / zdenek.zenger@gmail.com