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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Introduction:
   Languages and
   Wikipedia
   

   View Slide

5. View Slide

6. ~285 content languages
   ● Each Wikipedia is a unique
   community
   ● 424 interface languages available
   ● ~120,000 combinations
   

   View Slide

7. ~285 content languages
   ● Each Wikipedia is a unique
   community
   ● 424 interface languages available
   ● ~120,000 combinations
   

   View Slide

8. View Slide

9. Introduction to
   Right-to-Left
   

   View Slide

10. Scripts written Right-to-Left
    The quick brown fox jumps over the lazy dog
    Left to Right (LTR)
    

    View Slide

11. Scripts written Right-to-Left
    The quick brown fox jumps over the lazy dog
    Left to Right (LTR)
    ידו ,הסח םעטב רזג תצק לכא ןפש
    Right to Left (RTL)
    

    View Slide

12. johnhain, pixabay; CC0, https://pixabay.com/p-744180/
    The mental
    model
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

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/
    

    View Slide

18. Right-to-Left
    in Wikipedia
    

    View Slide

19. 17 Right-to-Left
    Wikipedias
    ● RTL and mixed content
    

    View Slide

20. 17 Right-to-Left
    Wikipedias
    ● RTL and mixed content
    

    View Slide

21. Quick intro:
    Unicode Bidirectional
    Algorithm
    

    View Slide

22. BiDi Entity Types (really really simplified)
    Strong
    Weak
    Neutral
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. BiDi Entity Types (really really simplified)
    ...ב דלונ (Albert Einstein) ןייטשנייא טרבלא
    

    View Slide

26. BiDi Entity Types (really really simplified)
    ...ב דלונ (Albert Einstein) ןייטשנייא טרבלא
    RTL
    RTL LTR
    

    View Slide

27. BiDi Entity Types (really really simplified)
    123 תירבע
    

    View Slide

28. BiDi Entity Types (really really simplified)
    123 תירבע
    RTL
    LTR
    

    View Slide

29. LTR
    BiDi Entity Types (really really simplified)
    123 תירבע
    RTL
    23 1 תירבע
    RTL
    LTR
    

    View Slide

30. LTR
    BiDi Entity Types (really really simplified)
    123 תירבע
    RTL
    23 1 תירבע
    RTL
    3 2 1 תירבע
    RTL
    LTR
    

    View Slide

31. LTR
    BiDi Entity Types (really really simplified)
    123 תירבע
    RTL
    23 1 תירבע
    RTL
    3 2 1 תירבע
    RTL
    LTR
    

    View Slide

32. BiDi Entity Types (really really simplified)
    English 1 2 3 Hebrew 1 2 3 English
    

    View Slide

33. BiDi Entity Types (really really simplified)
    English 1 2 3 3 2 1 תירבע English
    

    View Slide

34. BiDi Entity Types (really really simplified)
    English 1 2 3 3 2 1 תירבע English
    RTL
    LTR LTR
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

37. http://ltr.wtf/explained/intro-bidirectional-algorithm/
    Intro to the Bidirectional Algorithm
    (and examples of its challenges)
    

    View Slide

38. But my product doesn’t
    need internationalization!
    clickphoto, pixabay; CC0 https://pixabay.com/en/cat-animal-pet-eyes-teeth-1739091/
    

    View Slide

39. Everyone needs
    internationalization!
    StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/
    

    View Slide

40. Everyone needs
    internationalization!
    StockSnap, pixabay; CC0 https://pixabay.com/en/lion-wildlife-forest-woods-brown-2573900/
    Globalization
    Diversity
    Inclusiveness
    Bigger markets
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. Planning for
    Right-to-Left Support
    makes your product better
    

    View Slide

44. Planning for
    Right-to-Left Support
    makes your product better
    Bad UX decisions aren’t always obvious
    

    View Slide

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
    

    View Slide

46. Example
    Naming product (and
    code) actions
    

    View Slide

47. Left Right
    Popup edge left
    Popup indicator alignment: left
    

    View Slide

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
    ...
    

    View Slide

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
    ...
    

    View Slide

50. Toolbars
    LTR
    RTL
    

    View Slide

51. Toolbars
    LTR
    RTL
    

    View Slide

52. Toolbars
    LTR
    RTL
    

    View Slide

53. Toolbars
    LTR
    RTL
    

    View Slide

54. Toolbars
    LTR
    RTL
    ??
    

    View Slide

55. Toolbars
    LTR
    RTL
    Undo Redo
    

    View Slide

56. Toolbars
    LTR
    RTL
    Undo Redo
    Undo
    Redo
    

    View Slide

57. LTR
    Flipping all icons
    LibreOffice
    

    View Slide

58. LTR
    RTL
    Flipping all icons
    LibreOffice
    

    View Slide

59. LTR
    RTL
    Flipping all icons
    5?
    LibreOffice
    

    View Slide

60. Flipping all icons
    Wikimedia’s VisualEditor
    

    View Slide

61. Flipping all icons
    Wikimedia’s VisualEditor
    

    View Slide

62. Interface
    (and code)
    actions
    ● Think about your actions and what they mean
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

67. Example
    Numbers and
    Non-numbers
    

    View Slide

68. Phone:
    :ןופלט
    555-123-4567
    555-123-4567
    

    View Slide

69. Phone:
    :ןופלט
    +1-555-123-4567
    555-123-4567
    

    View Slide

70. Phone:
    :ןופלט
    +1-555-123-4567
    1-555-123-4567+
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

73. Username:
    :שמתשמ םש
    MSchottlender (WMF)
    http://ltr.wtf/explained/intro-bidirectional-algorithm/
    (Unicode Bidirectional Algorithm)
    

    View Slide

74. Username:
    :שמתשמ םש
    (MSchottlender (WMF
    MSchottlender (WMF)
    http://ltr.wtf/explained/intro-bidirectional-algorithm/
    (Unicode Bidirectional Algorithm)
    

    View Slide

75. Username:
    :שמתשמ םש
    (הידמיקיו) לאירומ
    הידמיקיו) לאירומ)
    http://ltr.wtf/explained/intro-bidirectional-algorithm/
    (Unicode Bidirectional Algorithm)
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

78. Example
    Content vs. Interface
    

    View Slide

79. LTR interface
    RTL interface
    

    View Slide

80. Spanish content
    

    View Slide

81. Spanish content
    Spanish content with English interface
    

    View Slide

82. RTL content
    

    View Slide

83. RTL content
    RTL content with LTR interface
    

    View Slide

84. Interface
    Content
    RTL content
    RTL content with LTR interface
    

    View Slide

85. Interface
    Content
    RTL content
    RTL content with LTR interface
    

    View Slide

86. RTL Wikipedia
    LTR Interface
    RTL Wikipedia
    RTL Interface
    

    View Slide

87. RTL Wikipedia
    LTR Interface
    RTL Wikipedia
    RTL Interface
    

    View Slide

88. RTL Wikipedia
    LTR Interface
    RTL Wikipedia
    RTL Interface
    

    View Slide

89. RTL Wikipedia
    LTR Interface
    RTL Wikipedia
    RTL Interface
    Is this interface or content?
    Should it be flipped?
    

    View Slide

90. Separate your
    content from
    interface
    ● Define your product’s pieces properly
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

93. Example
    Inconsistent mobile and
    web experience
    

    View Slide

94. Web
    Maximum 2 Terms
    

    View Slide

95. Web
    Mobile
    Inconsistent implementation of BiDi (Facebook)
    Maximum 2 Terms
    Terms 2 Maximum
    

    View Slide

96. Mobile and web
    experience
    ● Make sure the experience in mobile and web
    are consistent
    

    View Slide

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
    

    View Slide

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
    

    View Slide

99. Example
    User-generated content
    

    View Slide

100. View Slide

101. View Slide

102. New topic created on [board name]: “[topic title]”
     

     View Slide

103. New topic created on [board name]: “[topic title]”
     (Isolated) (Isolated)
     

     View Slide

104. Gmail flight display (RTL Gmail)
     

     View Slide

105. Gmail flight display
     

     View Slide

106. Gmail flight display
     8:40 ,יאמב IST 28 לא TLV
     

     View Slide

107. Gmail flight display
     8:40 ,יאמב IST 28 לא TLV
     TLV to IST 28 May, 8:40
     

     View Slide

108. Gmail flight display
     8:40 ,יאמב IST 28 לא TLV
     TLV to IST 28 May, 8:40
     

     View Slide

109. Gmail flight display
     8:40 ,יאמב IST 28 לא TLV
     TLV to IST 28 May, 8:40
     

     View Slide

110. Gmail flight display
     (Isolate) (Isolate)
     8:40 ,יאמב IST 28 לא TLV
     TLV to IST 28 May, 8:40
     

     View Slide

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
     

     View Slide

112. User-generated
     content
     ● Make sure all user-generated content is
     isolated
     ○ You never know what your users type...
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

116. Helpful Tools
     

     View Slide

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 );
     

     View Slide

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 );
     

     View Slide

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 );
     

     View Slide

120. translatewiki.net
     ● Open source and standardized
     ● Provides context for translators
     ○ Users translate according to descriptions of the strings
     https://translatewiki.net
     

     View Slide

121. translatewiki.net
     https://translatewiki.net
     

     View Slide

122. translatewiki.net
     https://translatewiki.net
     Original
     Translation
     Explanation
     

     View Slide

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
     

     View Slide

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
     

     View Slide

125. rtl.wtf
     http://rtl.wtf
     

     View Slide

126. Summary
     wsilver, Flickr, CC-by-SA2.0; https://www.flickr.com/photos/psycho-pics/3396404808
     

     View Slide

127. Summary
     ● Beware of mixed-content inputs
     

     View Slide

128. Summary
     ● Beware of mixed-content inputs
     ● Think about where elements are placed through
     your interface
     ○ And what it means to emphasize an element
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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!
     

     View Slide

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
     

     View Slide

135. UOY KNAHT
     

     View Slide

136. Bonus:
     Emoticons
     harvey117, pixabay; CC0 https://pixabay.com/en/dog-smile-outdoor-paste-variety-1558962/
     

     View Slide

137. :)
     LTR
     (:
     RTL
     Typing : and then )
     

     View Slide

138. :)
     LTR
     (:
     RTL
     Typing : and then )
     :(
     LTR
     ):
     RTL
     Typing : and then (
     

     View Slide

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
     

     View Slide

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:
     

     View Slide