A global online user population necessitates the exchange of content from different sources, and the ability to aggregate multilingual content is a critical requirement within many research and business contexts. Mixed-language content provides a rich information set, while adding another layer of complexity and scale, which we can address through thoughtful UX design. To effectively reach a global audience and provide access to content in multiple languages, we must structure mixed-language content to support its successful presentation and delivery, and provide innovative designs that facilitate exploration. In this talk given at the UXPA conference, we discuss real-world examples for: – Presenting content in multiple languages so it co-exists well on the screen and in search – Designing interfaces that support navigating, exploring, and understanding content available in multiple languages – Structuring content to support a flexible, scalable multilingual information management approach Some of the examples in this slideshow are from projects we have worked on, and some are not.

1. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 1
Hello, Meet Hola!
Design for mixed-language interfaces
UXPA 2021 • September 2, 2021 slides posted at: designforcontext.com/insights
!
#UXPA2021
@design4context
Rachel Sengers User Experience Designer
Duane Degler Information Architect and Principal

2. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 2
@design4context
Duane Degler
Rachel Sengers

3. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 3
‫ا‬
AGENDA
INTRODUCTION MIXING IT UP EXAMPLES
a
अ
あ
!
Framing the topic
Enabling multiple
languages to live together
in an interface
UI patterns

4. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 4
あ
! !
a
a
a
a
SOURCE CONTENT
IN 1 LANGUAGE
TRANSLATED VERSIONS
OF THE SITE
APPLY STRUCTURE
TO THE CONTENT
SITE IN SOURCE
LANGUAGE
a अ
‫ا‬
COMMON SCENARIO
FOR MULTILINGUAL SITES

5. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 5
SOURCE CONTENT
! !
IN >1 LANGUAGE
a
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT DISPLAY
IN >1 LANGUAGE
あ
अ
‫ا‬
あ
अ
‫ا‬
SITE FRAMEWORK
CONTENT
META
DATA
BY CONTRAST
MIXED-LANGUAGE SITES = THE FOCUS OF THIS TALK

6. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 6
EXAMPLES
blavatnikarchive.org
rme.rilm.org
classic.europeana.eu

7. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 7
IF YOU HAVE INCOMPLETE
TRANSLATIONS
FOR USERS TO
SHARE + REUSE
FOR USERS TO COMPARE
TRANSLATED VERSIONS
IF REGULATIONS
REQUIRE IT
FOR THE
POLYGLOT USER
a
あ 中
FOR A MULTILINGUAL
COMMUNITY
あ
a 中
WHY DO IT?

8. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 8
● Localization
The process of adapting a product or content to a specific region —
including translating content, creating localized content and images,
adapting formats for date/time formats, currencies, addresses etc.
● Designing for cultural differences
● Translation methods
At the end of this slideshow, we provide links to articles and resources
about these topics.
WHAT THIS TALK IS NOT ABOUT...

9. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 9
1. Establishing the default language for the user’s experience
2. Displaying multiple languages together on a page
3. Structuring the content/application to support mixed languages
Enabling multiple languages to live together
MIXING IT UP

10. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 10
1. Establishing the default language for the user’s experience
Enabling multiple languages to live together
MIXING IT UP
あ
अ
‫ا‬
OR TRANSLATE SITE FRAMEWORK & CONTENT INTO >1 LANGUAGE
a !
SITE = 1 DEFAULT LANGUAGE
あ
अ
‫ا‬
!
中
あ
अ
‫ا‬
a !
But still present some content
in other languages.
User can select preferred default language for overall site.
UI can still contain some content in other languages.

11. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 11
SITE =
1 DEFAULT
LANGUAGE
blavatnikarchive.org
In this example,
overall site is only
in English (not
translated yet to
other languages),
but transcripts of
many artifacts are
available in multiple
languages.

12. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SITE = MULTIPLE DEFAULT LANGUAGES In this example, entire site is translated to several languages
12
fedlex.admin.ch

13. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SITE = MULTIPLE DEFAULT LANGUAGES In this example, entire site is translated to several languages
13
fedlex.admin.ch

14. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SITE = MULTIPLE DEFAULT LANGUAGES In this example, entire site is translated to several languages
14
fedlex.admin.ch

15. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SITE = MULTIPLE DEFAULT LANGUAGES In this example, entire site is translated to several languages
15
fedlex.admin.ch

16. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 16
ESTABLISHING THE DEFAULT LANGUAGE
CONSIDERATIONS
Auto-detect the user’s language.
If your site is offered in the user’s
language, default to that.
Automatically detect the user’s
language if possible (there are several
ways to do that). Language of user’s
browser or operating system is
preferred over automatic detection via
IP address.
Determine fallback language.
If your site is not available in user’s
preferred language, display it in a
fallback language that you determine
(e.g. English).
You should still offer an easy way for user to change languages
because autodetection is not 100% reliable.

17. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 17
SITE LANGUAGE SELECTOR
CONSIDERATIONS
Language’s label should be in its local format.
AVOID: using flags to symbolize languages.
(But can use flags to symbolize countries.)
AVOID: Displaying language’s label in the selected language.
wfp.org
duolingo
Previous version of Visit Dubai site
@design4context

18. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 18
SITE LANGUAGE SELECTOR
CONSIDERATIONS
Globe icon can be used as a visual indicator.
2-character language code (ISO 639) can be used to save space.
Mixed characters as a visual indicator
who.int
amazon.com
Indicators
languageicon.org

19. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 19
2. Displaying multiple languages together on a page
Enabling multiple languages to live together
MIXING IT UP
あ
अ
‫ا‬
a !
あ
अ
‫ا‬
!
中

20. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED LANGUAGES = MIXED CHARACTERS
20
rilm.org
jdcrp-demo.org

21. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SPECIFY THE LANGUAGE
21
CONSIDERATIONS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
Or
html lang="en" xml:lang="en"
Page-level Markup for mixed-language content
Example 1
<p>People with COVID-19 have had a wide
range of symptoms reported – ranging from
mild symptoms to severe illness </p>
<p lang="vi">
Những người mắc bệnh COVID-19 đã có một
loạt các triệu chứng được báo cáo - từ các triệu
chứng nhẹ đến bệnh nghiêm trọng. </p>
Example 2 - Inline
<p>Watch for symptoms
<span lang="vi"> (Theo dõi các triệu chứng)
</span></p>
www.w3.org/International/techniques/authoring-html
Why use lang tags:
www.w3.org/International/questions/qa-lang-why
Accessibility:
www.w3.org/WAI/WCAG21/Understanding/
language-of-parts.html
Lang tags: www.w3.org/International/articles/language-tags

22. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
BI-DIRECTIONAL TEXT ADDS ANOTHER LEVEL OF COMPLEXITY
22
In these examples, some text is not in the expected left or right alignment.
Twitter
Twitter

23. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SPECIFY THE DIRECTION
23
CONSIDERATIONS
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8"/>
Page-level Markup for mixed-language content
Example 1
<p> ‫ﺳ‬
‫ﻮ‬
‫ف‬
‫أ‬
‫ﻋ‬
'
(
‫ﻣ‬
‫ﺜ‬
‫ﺎ‬
‫ﻻ‬
‫ﻋ‬
-
‫ذ‬
‫ﻟ‬
‫ﻚ‬
.
‫ﻻ‬
‫ﺗ‬
‫ﻤ‬
‫ﺎ‬
‫ﻧ‬
‫ﻊ‬
? </p>
<p dir="ltr" lang="en">I will give an example.
Don’t you mind?</p>
If you don’t know in advance what direction it will need: dir="auto”
Example 2 - Inline
<p> ‫ﺳ‬
‫ﻮ‬
‫ف‬
‫أ‬
‫ﻋ‬
'
(
‫ﻣ‬
‫ﺜ‬
‫ﺎ‬
‫ﻻ‬
‫ﻋ‬
-
‫ذ‬
‫ﻟ‬
‫ﻚ‬
<span dir="ltr" lang="en"> I will give an
example. </span></p>
rtlstyling.com
www.w3.org/International/questions/qa-html-dir
www.w3.org/International/articles/inline-bidi-markup/
www.w3.org/International/techniques/authoring-html#inline
www.smashingmagazine.com/2017/11/right-to-left-mobile-design

24. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
‫ا‬
a
中
SELECT FONTS THAT SUPPORT THE SITE’S LANGUAGES
24
अ
あ
Option 1: Use same font for everything
Option 2: Specify fallback fonts
body { font-family: 'Roboto', 'Amiri', 'Galada', sans-serif; }
Option 3: Specify different fonts to use for specific
languages, using :lang selector
CSS:
body { font-family: Avenir, sans-serif }
:lang(ar) {font-family: Amiri, sans-serif; font-size: 120%; }
HTML:
<p>The title is <span dir="rtl” lang="ar"> ‫ﻣ‬
‫ﻘ‬
‫ﺪ‬
‫ﻣ‬
‫ﺔ‬
W
X
Y
‫ا‬
‫ﻟ‬
]
‫ﻣ‬
‫ﺠ‬
‫ﺔ‬ </span> in Arabic.</p>
css-tricks.com/considerations-when-choosing-fonts-for-a-multilingual-website
www.w3.org/International/questions/qa-css-lang
CONSIDERATIONS

25. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 25
3. Structuring the content/application to support mixed languages
Enabling multiple languages to live together
MIXING IT UP
! !
a
अ
‫ا‬
あ !
あ
अ
‫ا‬
a
SOURCE CONTENT
APPLY STRUCTURE
TO THE CONTENT DISPLAY

26. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
ENTERING CONTENT
26
Record-level (all fields)
title
content section
instruction
extended description
classifications
language
➔
EN
Field-level, multiple languages
FR
DE
+
Field-level, single-language dominant
french phrase
english phrase;
german phrase; etc
PREFERRED (FR)
ALTERNATIVE
LANGUAGES

27. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATING SITE FRAMEWORKS
27
Label translation (all fields)
nav-menu-3
LABEL ID:
Collections
ENGLISH:
FRENCH:
GERMAN:
ITALIAN:
signup-prompt small
LABEL ID:
To keep informed of our latest
innovations and publications, sign
up for our (low volume) emails.
ENGLISH:
FRENCH:
While this is often done by
circulating files to translators,
(JSON, XML, Markdown), it
can be beneficial to create a
small app:
• There may be a lot of terms
to translate, so it aids
validation
• Site framework labels and
messages change over time,
so plan for a few updates

28. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
PARTS OF A SITE
28
ich.unesco.org
METADATA
METADATA
CONTENT
CONTENT
• Header/footer
• Navigation
• Controls
• Microcopy
e.g. messages, labels,
buttons, fixed content
SITE FRAMEWORK
• Titles / names
• Keywords /
Classification
• Data items
e.g. dates, about,
measurements

29. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
PARTS OF A SITE
29
• Header/footer
• Navigation
• Controls
• Microcopy
e.g. messages, labels,
buttons, fixed content
SITE FRAMEWORK
29
METADATA METADATA
CONTENT
CONTENT
ich.unesco.org
• Titles / names
• Keywords /
Classification
• Data items
e.g. dates, about,
measurements

30. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
PARTS OF A SITE
30
• Header/footer
• Navigation
• Controls
• Microcopy
e.g. messages, labels,
buttons, fixed content
SITE FRAMEWORK
ich.unesco.org
METADATA METADATA
CONTENT
CONTENT
• Titles / names
• Keywords /
Classification
• Data items
e.g. dates, about,
measurements

31. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED
SOURCES
31
METADATA
SITE FRAMEWORK
CONTENT
METADATA
SITE FRAMEWORK
classic.europeana.eu

32. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED
SOURCES
32
classic.europeana.eu
MIXED
EN (fallback)
EN Irish
MIXED
ES Spanish
ES Spanish
(vocabulary)

33. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED
SOURCES
33
classic.europeana.eu
MIXED
EN (fallback)
EN Irish
MIXED
EL Greek
EL Greek
(vocabulary)

34. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
connect
MULTILINGUAL SOURCE CONTENT
34
source
1
EN
source
2
FR
transform
transform
id: "aat:300404676"
label_en:
0 "pen and ink drawings"
label_fr:
0 "dessins à l'encre"
type: "Type"
External
vocabularies
External vocabulary
references often provide
translations, making
integration easier.
Getty Art & Architecture
Thesaurus (AAT).

35. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
oak
VOCABULARIES TO SUPPORT MIXED LANGUAGES
35
See Also:
deciduous
flora
EN English
EN
flore
FR French
chêne
See Also:
décidu
FR
flora
PT Portuguese
carvalho
See Also:
decíduo
PT

36. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 36
PAGE-LEVEL PATTERNS
User flips a
master switch
to see the page
in another
language
COMPONENT-LEVEL PATTERNS
User has option to
see the content in
another language
to compare
a
Content is displayed
in its source language,
while framework is in
user’s preferred
language
あ
!
BROWSE/FIND PATTERNS
User can find
multilingual content
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
a
あ
a
あ
MIXED-LANGUAGE UI PATTERNS

37. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 37
PAGE-LEVEL PATTERNS
User flips a
master switch
to see the page
in another
language
COMPONENT-LEVEL PATTERNS
User has option to
see the content in
another language
to compare
a
Content is displayed
in its source language,
while framework is in
user’s preferred
language
あ
!
BROWSE/FIND PATTERNS
User can find
multilingual content
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
a
あ
a
あ
MIXED-LANGUAGE UI PATTERNS

38. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATED VERSIONS OF PAGES
38
Wikipedia

39. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATED VERSIONS OF PAGES
39
wfp.org

40. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATED VERSIONS OF PAGES
40
wfp.org

41. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATED VERSIONS OF PAGES
41
wfp.org

42. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TRANSLATED VERSIONS OF PAGES
42
wfp.org

43. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
IF NO TRANSLATION IS AVAILABLE
43
wfp.org
User lands at home page of localized site

44. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 44
PAGE-LEVEL PATTERNS
User flips a
master switch
to see the page
in another
language
COMPONENT-LEVEL PATTERNS
User has option to
see the content in
another language
to compare
a
Content is displayed
in its source language,
while framework is in
user’s preferred
language
あ
!
BROWSE/FIND PATTERNS
User can find
multilingual content
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
a
あ
a
あ

45. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
PRESENTING MATERIALS IN ORIGINAL LANGUAGE
45
Source material (content and
metadata) catalogued in French
Displayed in French
Source material (content and
metadata) catalogued in English
Displayed in English
Duchamp Research Portal (not yet available online)

46. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
PRESENTING MATERIALS IN ORIGINAL LANGUAGE
46
SITE FRAMEWORK
(FR)
EN
FR
EN
FR EN
Duchamp Research Portal (not yet available online)

47. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
COMPONENTS
SUPPORT
MIXED
SOURCES
47
classic.europeana.eu

48. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
COMPONENTS
SUPPORT
MIXED
SOURCES
48
classic.europeana.eu

49. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
COMPONENTS
SUPPORT
MIXED
SOURCES
49
classic.europeana.eu

50. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
COMPONENTS
SUPPORT
MIXED
SOURCES
50
classic.europeana.eu
MIXED
EN (fallback)
EN Irish (source)
MIXED
ES Spanish
ES Spanish
(vocabulary)

51. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TABBED
COMPONENT
51
whc.unesco.org
This site's
framework,
metadata, and
content is available
in 2 languages
(English and
French)...

52. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TABBED
COMPONENT
52
whc.unesco.org
...While the
description of each
heritage site is
available in multiple
languages.

53. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TABBED
COMPONENT
53
whc.unesco.org
The description of
each heritage site is
available in multiple
languages.

54. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
TABBED
COMPONENT
54
whc.unesco.org
The description of
each heritage site is
available in multiple
languages.

55. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
CONTENT TRANSLATIONS & COMPARISONS
55
fedlex.admin.ch

56. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 56
fedlex.admin.ch

57. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 57
fedlex.admin.ch

58. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 58
fedlex.admin.ch

59. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 59
fedlex.admin.ch

60. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEGMENT-LEVEL TRANSLATIONS
Some types of content, like diaries, books, and videos,
are comprised of pages or segments.

61. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEGMENT-LEVEL TRANSLATIONS
61
blavatnikarchive.org/item/1299
Transcript of diary is in a scrolling pane on the right

62. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEGMENT-LEVEL TRANSLATIONS
62
blavatnikarchive.org/item/1299
Clicking on pages auto-scrolls you to that page’s entries, in the transcript

63. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEGMENT-LEVEL TRANSLATIONS
63
blavatnikarchive.org/item/1299
Switch between English and Russian at any time; stay in the same place

64. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEGMENT-LEVEL TRANSLATIONS
64
blavatnikarchive.org/item/1299
Ability to search the Russian or English transcript for phrases

65. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED-LANGUAGE CONTENT BLOCKS WITH INLINE TRANSLATION
65
Facebook

66. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
MIXED-LANGUAGE CONTENT BLOCKS WITH INLINE TRANSLATION
66
LinkedIn

67. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 67
PAGE-LEVEL PATTERNS
User flips a
master switch
to see the page
in another
language
COMPONENT-LEVEL PATTERNS
User has option to
see the content in
another language
to compare
a
Content is displayed
in its source language,
while framework is in
user’s preferred
language
あ
!
BROWSE/FIND PATTERNS
User can find
multilingual content
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
a
あ
a
あ

68. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
RESULTS
MAY BE IN
MULTIPLE
LANGUAGES
68
classic.europeana.eu

69. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
RESULTS
MAY BE IN
MULTIPLE
LANGUAGES
69
classic.europeana.eu
descriptions
CONTENT
titles
vocabulary
METADATA
Making a
distinction
between country
and language
METADATA

70. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEARCH ACROSS CONTENT IN MULTIPLE LANGUAGES
70
classic.europeana.eu

71. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SEARCH ACROSS CONTENT IN MULTIPLE LANGUAGES
71
classic.europeana.eu

72. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SIGNPOSTING AVAILABLE LANGUAGE(S)
72
Carnegie Endowment for International Peace
ceip.org

73. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
SIGNPOSTING AVAILABLE LANGUAGE(S)
73
Carnegie Endowment for International Peace
ceip.org
METADATA

74. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context
LANGUAGE WEIGHTING IN SEARCH: DUCHAMP RESEARCH PORTAL
74
EN
FR
1.0
0.7
FR
EN
1.0
0.7
Vocabulary
emphasis on
user’s language
adjusts ranking
order
Duchamp Research Portal (not yet available online)

75. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 75
rme.rilm.org
Hosted by Répertoire International de Littérature Musicale (RILM)
RILM Music Encyclopedias
QUICK CASE STUDY

76. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 76
rme.rilm.org
RILM is a small organization that
provides access to historical music
encyclopedias for a global
audience.
RME is 60 encyclopedias
stretching back to 1775.
Scholars like having original texts.
RILM does not have resources to
translate all the site’s content.
They have a layered translation
strategy.

77. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 77
rme.rilm.org
The site’s framework
and metadata is in
English and translated
to German, because
those are their main
user bases.

78. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 78
rme.rilm.org
If user selects German,
site framework and
metadata is displayed in
German.

79. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 79
rme.rilm.org
Metadata such as the
topics filter menu are
displayed in German.

80. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 80
rme.rilm.org
If we switch the site
back to English...

81. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 81
rme.rilm.org
... We can see that the
topics menu is now in
English.

82. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 82
rme.rilm.org
Publications are in their
source language. User
can filter the
publications by
language.

83. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 83
rme.rilm.org
Here, we have filtered
the publications down
to just French language
publications.

84. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 84
rme.rilm.org
When user clicks on it,
some metadata is
displayed about it in
English below its title,
because user has
selected English for the
overall site framework.

85. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 85
rme.rilm.org
If user browses the
contents of the
publication, the
metadata is in English
but is articles are in
their source language
(French).

86. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 86
rme.rilm.org
The article is displayed
in its source language
(French).

87. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 87
rme.rilm.org
If user is not a native
speaker of the
publication’s source
language, the site offers
Google Translate
service. User can select
another language.

88. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021
@design4context 88
rme.rilm.org
In this example, Google
Translate translated the
page (content,
framework, and
metadata) into
Javanese.

89. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 89
SOURCE CONTENT
! !
IN >1 LANGUAGE
a
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT DISPLAY
IN >1 LANGUAGE
あ
अ
‫ا‬
あ
अ
‫ا‬
SITE FRAMEWORK
CONTENT
META
DATA
WRAP UP
slides: designforcontext.com/insights
#UXPA2021 @design4context

90. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 90
PAGE-LEVEL PATTERNS
User flips a
master switch
to see the page
in another
language
COMPONENT-LEVEL PATTERNS
User has option to
see the content in
another language
to compare
a
Content is displayed
in its source language,
while framework is in
user’s preferred
language
あ
!
BROWSE/FIND PATTERNS
User can find
multilingual content
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
a
あ
a
あ
WRAP UP
slides: designforcontext.com/insights
#UXPA2021 @design4context

91. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 91
W3C i18n
w3.org/International/resources
w3.org/International/articlelist
validator.w3.org/i18n-checker
Regionalizing Your Mobile Designs
Steve Hoober
article on uxmatters.com
Supporting Localization Jonathan Walter
article on uxmatters.com
RTL Styling 101 rtlstyling.com
Product Design Best Practices & Tools for
Localization Michelle Chin (UXPA talk)
speakerdeck.com/soysaucechin/product-design-best-
practices-and-tools-for-localization
Going Global Design for Context
(IA Summit talk) d4c.link/global18
RESOURCES
#UXPA2021 @design4context slides: designforcontext.com/insights
Best Practices for Multilingual Access Europeana
pro.europeana.eu/post/best-practices-for-multilingual-access
UXPA Magazine articles
uxpamagazine.org/tag/global-ux
uxpamagazine.org/tag/cross-cultural
Global by Design John Yunker
globalbydesign.com
Build bridges, not walls Jenny Shen
youtu.be/CtB-M6dW7yY
Global UX Whitney Quesenbery, Daniel Szuc (book)
How the ideology of monolingualism drives us
to monolingual interaction
Manuel Pérez-Quiñones, Consuelo Carr Salas
dl.acm.org/doi/10.1145/3457871

92. @design4context Mixed-language interfaces UXPA 2021 Conference #UXPA2021 92
By building monolingual interfaces, designers
disregard the nuances of linguistic diversity and
ignore the bilingual individual as a user class.
Instead, designers assume that all users are
monolingual and that bilingual users are
comfortable communicating in one monolingual
interface at a time.
It is time we separate bilingualism from
internationalization — the idea that people
can use multiple languages is now common.
From How the ideology of monolingualism drives us to monolingual interaction
by Manuel Pérez-Quiñones and Consuelo Carr Salas