Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

B1720ad8dd59327f01f704eb8870247f?s=128

Moriel Schottlender

September 30, 2017
Tweet

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

  5. None
  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
  8. None
  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

  13. None
  14. None
  15. None
  16. None
  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

  100. None
  101. None
  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: