WAIT, IT DOES ??TAHW: HOW SUPPORTING RIGHT-TO-LEFT CAN EXPOSE YOUR BAD UX DECISIONS

When you are forced to reconsider your product's UX to account for the needs of some languages, you are better suited to confront the underlying issues that hurt your interface for all.

As the popularity and reach of Open Source grows, so does the need to support more languages, scripts, and directions. One of the most challenging problems in language support is dealing with languages that are Right-to-Left, where the effects are not just limited to translations, scripts and fonts, but also require a complete change of thinking about how and where to place almost every single element of your product on the screen.

Right-to-Left support helps the creators of a product — developers, designers, product managers, etc — expose usability concerns that could be fixed to make the lives of your users better, regardless of what language (and direction) they speak.

This lecture will focus on the common challenges involved in supporting i18n in general and Right-to-Left in particular when building user interfaces. It will showcase examples of how, by working towards supporting solutions for these challenges, we can uncover underlying problems with the interface in general, and how we can fix them. Fixing those issues doesn't just mean supporting the important goal of making your software reachable and inclusive - it also means making your code stronger, and your user experience smoother.

https://www.thestrangeloop.com/2017/wait-it-does-tahw-how-supporting-right-to-left-can-expose-your-bad-ux-decisions.html

Transcript

1. WAIT, IT DOES ??TAHW How supporting Right-to-Left can expose your bad UX decisions Moriel Schottlender Senior Software Engineer
2. Front End Senior Engineer @ Global Collaboration Team, Wikimedia Foundation Right-to-Left support enthusiast Occasional answerer in StackOverflow About me @mooeypoo http://rtl.wtf Moriel Schottlender
3. About me Front End Senior Engineer @ Global Collaboration Team, Wikimedia Foundation Right-to-Left support enthusiast Occasional answerer in StackOverflow … an emoji @mooeypoo http://rtl.wtf Moriel Schottlender
4. Introduction: Languages and Wikipedia
6. ~285 content languages • Each Wikipedia is a unique community • 424 interface languages available • ~120,000 combinations
7. ~285 content languages • Each Wikipedia is a unique community • 424 interface languages available • ~120,000 combinations
9. Introduction to Right-to-Left
10. Scripts written Right-to-Left The quick brown fox jumps over the lazy dog Left to Right (LTR)
11. Scripts written Right-to-Left The quick brown fox jumps over the lazy dog Left to Right (LTR) ידו ,הסח םעטב רזג תצק לכא ןפש Right to Left (RTL)
12. johnhain, pixabay; CC0, https://pixabay.com/p-744180/ The mental model
17. Expectations of where things are placed on the screen Definitions of ‘start’ & ‘end’ ‘backwards’ & ‘forwards’ Typing mixed content in mixed directionalities Unicode Bidirectional Algorithm http://unicode.org/reports/tr9/
18. Right-to-Left in Wikipedia
19. 17 Right-to-Left Wikipedias • RTL and mixed content
20. 17 Right-to-Left Wikipedias • RTL and mixed content
21. Quick intro: Unicode Bidirectional Algorithm
22. BiDi Entity Types (really really simplified) Strong Weak Neutral
23. BiDi Entity Types (really really simplified) Strong Affect the directionality of entities around them Weak Do not affect the directionality of entities around them (are affected) Neutral Follow the directionality of the context they’re in
24. BiDi Entity Types (really really simplified) Strong Affect the directionality of entities around them Alphabet Weak Do not affect the directionality of entities around them (are affected) Punctuation, digits* Neutral Follow the directionality of the context they’re in Space, newline, tab, etc
25. BiDi Entity Types (really really simplified) ...ב דלונ (Albert Einstein) ןייטשנייא טרבלא
26. BiDi Entity Types (really really simplified) ...ב דלונ (Albert Einstein) ןייטשנייא טרבלא RTL RTL LTR
27. BiDi Entity Types (really really simplified) 123 תירבע
28. BiDi Entity Types (really really simplified) 123 תירבע RTL LTR
29. LTR BiDi Entity Types (really really simplified) 123 תירבע RTL 23 1 תירבע RTL LTR
30. LTR BiDi Entity Types (really really simplified) 123 תירבע RTL 23 1 תירבע RTL 3 2 1 תירבע RTL LTR
31. LTR BiDi Entity Types (really really simplified) 123 תירבע RTL 23 1 תירבע RTL 3 2 1 תירבע RTL LTR
32. BiDi Entity Types (really really simplified) English 1 2 3 Hebrew 1 2 3 English
33. BiDi Entity Types (really really simplified) English 1 2 3 3 2 1 תירבע English
34. BiDi Entity Types (really really simplified) English 1 2 3 3 2 1 תירבע English RTL LTR LTR
35. BiDi Entity Types (really really simplified) English 1 2 3 3 2 1 תירבע English RTL LTR LTR This is a sentence in an input. Input context direction = ”ltr” .This is a sentence in an input direction = ”rtl”
36. BiDi Entity Types (really really simplified) English 1 2 3 3 2 1 תירבע English RTL LTR LTR This is a sentence in an input. Input context direction = ”ltr” .This is a sentence in an input direction = ”rtl” The logical end of the sentence
37. http://ltr.wtf/explained/intro-bidirectional-algorithm/ Intro to the Bidirectional Algorithm (and examples of its challenges)
38. But my product doesn’t need internationalization! clickphoto, pixabay; CC0 https://pixabay.com/en/cat-animal-pet-eyes-teeth-1739091/
39. Everyone needs internationalization! StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/
40. Everyone needs internationalization! StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/ Globalization Diversity Inclusiveness Bigger markets
41. Everyone needs internationalization! StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/ Globalization Diversity Inclusiveness Bigger markets Better code Generic Extendible Easier to manage
42. Everyone needs internationalization! StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/ Globalization Diversity Inclusiveness Bigger markets Better code Generic Extendible Easier to manage Better product
43. Planning for Right-to-Left Support makes your product better
44. Planning for Right-to-Left Support makes your product better Bad UX decisions aren’t always obvious
45. Planning for Right-to-Left Support makes your product better Bad UX decisions aren’t always obvious Right-to-Left can help expose them
46. Example Naming product (and code) actions
47. Left Right Popup edge left Popup indicator alignment: left
48. Left Right Popup edge left Previous Before Beginning Backwards ... Next After End Forwards ... Popup edge before start beginning ... Popup indicator alignment: left Popup indicator alignment: backwards start beginning ...
49. Left Right Popup edge left Previous Before Beginning Backwards ... Next After End Forwards ... Popup edge before start beginning ... Popup indicator alignment: left Popup indicator alignment: backwards start beginning ...
50. Toolbars LTR RTL
51. Toolbars LTR RTL
52. Toolbars LTR RTL
53. Toolbars LTR RTL
54. Toolbars LTR RTL ??
55. Toolbars LTR RTL Undo Redo
56. Toolbars LTR RTL Undo Redo Undo Redo
57. LTR Flipping all icons LibreOffice
58. LTR RTL Flipping all icons LibreOffice
59. LTR RTL Flipping all icons 5? LibreOffice
60. Flipping all icons Wikimedia’s VisualEditor
61. Flipping all icons Wikimedia’s VisualEditor
62. Interface (and code) actions • Think about your actions and what they mean
63. • Think about your actions and what they mean • Separate literal actions from action’s purpose ◦ Do you really mean “go left” or do you mean “go to beginning”? Interface (and code) actions
64. • Think about your actions and what they mean • Separate literal actions from action’s purpose ◦ Do you really mean “go left” or do you mean “go to beginning”? • Consider the real meaning of your icons ◦ When you flip for RTL, watch out from unnecessary flipping of icons Interface (and code) actions
65. • Think about your actions and what they mean • Separate literal actions from action’s purpose ◦ Do you really mean “go left” or do you mean “go to beginning”? • Consider the real meaning of your icons ◦ When you flip for RTL, watch out from unnecessary flipping of icons • If you already flip icons, flip them properly Interface (and code) actions
66. • Think about your actions and what they mean • Separate literal actions from action’s purpose ◦ Do you really mean “go left” or do you mean “go to beginning”? • Consider the real meaning of your icons ◦ When you flip for RTL, watch out from unnecessary flipping of icons • If you already flip icons, flip them properly Thinking about what things should look like in RTL can help you clarify the UI for your users Interface (and code) actions
67. Example Numbers and Non-numbers
68. Phone: :ןופלט 555-123-4567 555-123-4567
69. Phone: :ןופלט +1-555-123-4567 555-123-4567
70. Phone: :ןופלט +1-555-123-4567 1-555-123-4567+
71. Phone: :ןופלט +1-555-123-4567 1-555-123-4567+ http://ltr.wtf/explained/intro-bidirectional-algorithm/ (Unicode Bidirectional Algorithm) Weak entity - Right to Left context!
72. Phone: :ןופלט +1-555-123-4567 1-555-123-4567+ http://ltr.wtf/explained/intro-bidirectional-algorithm/ (Unicode Bidirectional Algorithm) Beware of native mobile apps that automatically switch RTL for inputs... Weak entity - Right to Left context!
73. Username: :שמתשמ םש MSchottlender (WMF) http://ltr.wtf/explained/intro-bidirectional-algorithm/ (Unicode Bidirectional Algorithm)
74. Username: :שמתשמ םש (MSchottlender (WMF MSchottlender (WMF) http://ltr.wtf/explained/intro-bidirectional-algorithm/ (Unicode Bidirectional Algorithm)
75. Username: :שמתשמ םש (הידמיקיו) לאירומ הידמיקיו) לאירומ) http://ltr.wtf/explained/intro-bidirectional-algorithm/ (Unicode Bidirectional Algorithm)
76. Input with mixed number & non-numbers content • Watch for misleading characters ◦ Parentheses, plus, minus, commas, periods, etc ◦ Go over the Unicode Bidirectional Algorithm! http://ltr.wtf/explained/intro-bidirectional-algorithm/
77. Input with mixed number & non-numbers content • Watch for misleading characters ◦ Parentheses, plus, minus, commas, periods, etc ◦ Go over the Unicode Bidirectional Algorithm! http://ltr.wtf/explained/intro-bidirectional-algorithm/ • Be aware of where your OS or environment switches context for you ◦ Always dictate directionality when it’s important to preserve it
78. Example Content vs. Interface
79. LTR interface RTL interface
80. Spanish content
81. Spanish content Spanish content with English interface
82. RTL content
83. RTL content RTL content with LTR interface
84. Interface Content RTL content RTL content with LTR interface
85. Interface Content RTL content RTL content with LTR interface
86. RTL Wikipedia LTR Interface RTL Wikipedia RTL Interface
87. RTL Wikipedia LTR Interface RTL Wikipedia RTL Interface
88. RTL Wikipedia LTR Interface RTL Wikipedia RTL Interface
89. RTL Wikipedia LTR Interface RTL Wikipedia RTL Interface Is this interface or content? Should it be flipped?
90. Separate your content from interface • Define your product’s pieces properly
91. Separate your content from interface • Define your product’s pieces properly • Content (especially user-generated) should be isolated from the interface ◦ (As much as possible)
92. Separate your content from interface • Define your product’s pieces properly • Content (especially user-generated) should be isolated from the interface ◦ (As much as possible) • Reason your way through the actions that are content-dependent vs. interface-driven
93. Example Inconsistent mobile and web experience
94. Web Maximum 2 Terms
95. Web Mobile Inconsistent implementation of BiDi (Facebook) Maximum 2 Terms Terms 2 Maximum
96. Mobile and web experience • Make sure the experience in mobile and web are consistent
97. Mobile and web experience • Make sure the experience in mobile and web are consistent • Right to Left bugs are helpful in flushing inconsistencies out
98. Mobile and web experience • Make sure the experience in mobile and web are consistent • Right to Left bugs are helpful in flushing inconsistencies out • If you decided to “guess” user intent, be consistent
99. Example User-generated content
102. New topic created on <bdi>[board name]</bdi>: “<bdi>[topic title]</bdi>”
103. New topic created on <bdi>[board name]</bdi>: “<bdi>[topic title]</bdi>” (Isolated) (Isolated)
104. Gmail flight display (RTL Gmail)
105. Gmail flight display
106. Gmail flight display 8:40 ,יאמב IST 28 לא TLV
107. Gmail flight display 8:40 ,יאמב IST 28 לא TLV TLV to IST 28 May, 8:40
108. Gmail flight display 8:40 ,יאמב IST 28 לא TLV TLV to IST 28 May, 8:40
109. Gmail flight display 8:40 ,יאמב IST 28 לא TLV TLV to IST 28 May, 8:40
110. Gmail flight display (Isolate) (Isolate) 8:40 ,יאמב IST 28 לא TLV TLV to IST 28 May, 8:40
111. Gmail flight display 8:40 ,יאמב 28 לא TLV IST (Isolated) (Isolated) (Isolate) (Isolate) 8:40 ,יאמב IST 28 לא TLV TLV to IST 28 May, 8:40
112. User-generated content • Make sure all user-generated content is isolated ◦ You never know what your users type...
113. User-generated content • Make sure all user-generated content is isolated ◦ You never know what your users type... • Beware of comments, usernames, taglines or any other element that can be custom
114. User-generated content • Make sure all user-generated content is isolated ◦ You never know what your users type... • Beware of comments, usernames, taglines or any other element that can be custom • Validating characters isn’t always enough if your interface can flip to RTL ◦ Numbers and parentheses are a potential issue in a mixed environment
115. User-generated content • Make sure all user-generated content is isolated ◦ You never know what your users type... • Beware of comments, usernames, taglines or any other element that can be custom • Validating characters isn’t always enough if your interface can flip to RTL ◦ Numbers and parentheses are a potential issue in a mixed environment • You don’t always control interface direction! ◦ Especially in emails or mobile operating systems
116. Helpful Tools
117. CSSJanus https://cssjanus.github.io/ • Started as a Google project (We took over when it stopped being maintained) • Flips RTL/LTR positioning rules in CSS • Available as ◦ an npm module npm install cssjanus ◦ PHP library $rtlCss = CSSJanus::transform( $ltrCss );
118. CSSJanus https://cssjanus.github.io/ .content { float: left; background-image: url( ‘foo- ltr.svg’ ); padding: 1em 0 0 2em; /* @noflip */ margin-right: 0.5em; } • Started as a Google project (We took over when it stopped being maintained) • Flips RTL/LTR positioning rules in CSS • Available as ◦ an npm module npm install cssjanus ◦ PHP library $rtlCss = CSSJanus::transform( $ltrCss );
119. CSSJanus https://cssjanus.github.io/ .content { float: right; background-image: url( ‘foo- rtl.svg’ ); padding: 1em 2em 0 0; /* @noflip */ margin-right: 0.5em; } .content { float: left; background-image: url( ‘foo- ltr.svg’ ); padding: 1em 0 0 2em; /* @noflip */ margin-right: 0.5em; } • Started as a Google project (We took over when it stopped being maintained) • Flips RTL/LTR positioning rules in CSS • Available as ◦ an npm module npm install cssjanus ◦ PHP library $rtlCss = CSSJanus::transform( $ltrCss );
120. translatewiki.net • Open source and standardized • Provides context for translators ◦ Users translate according to descriptions of the strings https://translatewiki.net
121. translatewiki.net https://translatewiki.net
122. translatewiki.net https://translatewiki.net Original Translation Explanation
123. translatewiki.net • Open source and standardized • Provides context for translators ◦ Users translate according to descriptions of the strings • Supports powerful translation concepts ◦ Supports parameters ◦ Supports gender / plural rules https://translatewiki.net
124. translatewiki.net • Open source and standardized • Provides context for translators ◦ Users translate according to descriptions of the strings • Supports powerful translation concepts ◦ Supports parameters ◦ Supports gender / plural rules • Examples ◦ ‘{{GENDER:$1|Welcome(m)|Welcome(f)}} to Wikipedia!’ ◦ ‘You have {{PLURAL:$1|an apple|many apples}} in your basket.’ ◦ ‘I have {{PLURAL:$2|one apple|many apples|0=no apples|12=a dozen apples}} in my basket.’ https://translatewiki.net
125. rtl.wtf http://rtl.wtf
126. Summary wsilver, Flickr, CC-by-SA2.0; https://www.flickr.com/photos/psycho-pics/3396404808
127. Summary • Beware of mixed-content inputs
128. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element
129. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element • Thinking about what things should look like in RTL can help you clarify the UI for your users
130. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element • Thinking about what things should look like in RTL can help you clarify the UI for your users • Clearly separate content from interface
131. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element • Thinking about what things should look like in RTL can help you clarify the UI for your users • Clearly separate content from interface • Make sure UX is unified across platforms
132. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element • Thinking about what things should look like in RTL can help you clarify the UI for your users • Clearly separate content from interface • Make sure UX is unified across platforms • Make sure all user-generated content is isolated
133. Summary • Beware of mixed-content inputs • Think about where elements are placed through your interface ◦ And what it means to emphasize an element • Thinking about what things should look like in RTL can help you clarify the UI for your users • Clearly separate content from interface • Make sure UX is unified across platforms • Make sure all user-generated content is isolated • Support i18n and support Right-to-Left!
134. Everyone needs internationalization! StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/ Globalization Diversity Inclusiveness Bigger markets Better code Generic Extendible Easier to manage Better product
135. UOY KNAHT
136. Bonus: Emoticons harvey117, pixabay; CC0 https://pixabay.com/en/dog-smile-outdoor-paste-variety-1558962/
137. :) LTR (: RTL Typing : and then )
138. :) LTR (: RTL Typing : and then ) :( LTR ): RTL Typing : and then (
139. :) LTR (: RTL Typing : and then ) :( LTR ): RTL Typing : and then ( :D LTR D: RTL Typing : and then D :P LTR P: RTL Typing : and then P
140. :) LTR (: RTL Typing : and then ) :( LTR ): RTL Typing : and then ( :D LTR D: RTL Typing : and then D :P LTR P: RTL Typing : and then P D: