Going Global: The Intersection of IA and UX in a Multilingual Environment

@design4context Going Global IA Summit 2018 #IAS18 1
Going Global
The Intersection of IA and UX
in a Multilingual Environment
IA Summit • March 25, 2018 slides posted at: designforcontext.com/insights
!
#IAS18
@design4context
Kate Blanch, Data Architect
Janette Shew, User Experience Designer
Rachel Sengers, User Experience Designer
1

@design4context
Janette Shew Rachel SengersKate Blanch

TIM BERNERS-LEE / 1989
His vision for the worldwide web:
an open platform that would
allow everyone, everywhere
to share information,
access opportunities, and
collaborate across geographic
and cultural boundaries.
www.theguardian.com/technology/2017/mar/11/tim-berners-lee-web-inventor-save-internet

To reach people who speak other languages, we
need to create a special data structure underneath
our interface.

DESIGNING
FOR
CONTEXT
DEVICE
TYPES
ACCESSI-
BILITY
NEEDS
USER
TYPES
EXPERIENCE
EDUCATION
SKILL LEVELS
USER TASKS
& GOALS
In addition to the UCD basics…

DEVICE
TYPES
ACCESSI-
BILITY
NEEDS
USER
TYPES
EXPERIENCE
EDUCATION
SKILL LEVELS
USER TASKS
& GOALS
DESIGNING
FOR
CONTEXT
LANGUAGES
REGIONAL
REQUIRE-
MENTS
CULTURAL
DIFFERENCES
…We also need to consider…

‫ا‬
अ
あ
a
a
a
a
SOURCE CONTENT
IN 1 LANGUAGE
TRANSLATED VERSIONS
OF THE SITE
APPLY STRUCTURE
TO THE CONTENT
a
SITE IN SOURCE
LANGUAGE
MULTILINGUAL SITES

SOURCE CONTENT
IN >1 LANGUAGE
ONE LANGUAGE AT A TIME
User flips a
master switch
to see the site in
another language
BROWSE/FIND MIXED LANGUAGE CONTENT
COMPONENT-LEVEL TRANSLATIONS
User has option to
see the content in
another language
to compare
User can find
multilingual content
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT
MIXED LANGUAGE CONTENT

SOURCE CONTENT
IN >1 LANGUAGE
User flips a
master switch
to see the site in
another language
User has option to
see the content in
another language
to compare
User can find
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT

Source: Blavatnik Archive (future site)

SOURCE CONTENT
IN >1 LANGUAGE
User flips a
master switch
to see the site in
another language
User has option to
see the content in
another language
to compare
User can find
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT

“The most general definition of interoperability of language resources is the capability for
these resources to interact or to work together.”
Multilingual language resources and interoperability
Language Resources and Evaluation, 2009, Volume 43, Number 1. Witt, Heid, Sasaki, Sérasset.
Flower ≠ Fleur
Buttercup ≠ Botón de oro ≠ ‫ﻋﺷب‬ ‫اﻟﺣوذان‬

ENRICHING WITH
LINKED OPEN
VOCABULARIES
STRUCTURING
TRANSLATIONS &
METADATA
INTERRELATING WITH
ONTOLOGIES
CONCEPT 1
CONCEPT 2
CONCEPT 3
SOURCE CONTENT
IN >1 LANGUAGE
aअ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT
WAYS TO YIELD AN INTEROPERABLE LANGUAGE RESOURCE

STRUCTURING TRANSLATIONS & METADATA
CONCEPT 11
subject
flower
sujet
fleur
French
French
English
English
ämne
blomma
Swedish
Swedish
SOURCE
See Also:
Flora
See Also:
Flora
See Also:
Flora
TRANSLATION TRANSLATION
Contributor:
National
Gallery
Date
Translated:
03-10-2005
Date
Translated:
07-25-2016

parent
parent
+ child
child
parent
+ child
CONCEPT 11

● Your structure should support
collections of things (i.e. languages).
● Hierarchy creates space for layered
metadata.
● Compare and combine with unique,
inherited and shared metadata.
● Highly structured environments yield
highly contextualized UIs.
STRUCTURING
TRANSLATIONS &
METADATA
CONCEPT 1

ENRICHING WITH
LINKED OPEN
VOCABULARIES
STRUCTURING
TRANSLATIONS &
METADATA
INTERRELATING WITH
ONTOLOGIES
CONCEPT 1
CONCEPT 2
CONCEPT 3
SOURCE CONTENT
IN >1 LANGUAGE
aअ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT

ENRICHING DATA WITH VOCABULARIES & AUTHORITIES
CONCEPT 12
Painting 2
Rembrandt
(en)
Painting 1
Rembrandt
van Rijn
(fr)
Painting (en)
http://vocab.getty.edu/
aat/300033618
name ≠ name
Pintura (es) Gemälde (de)
http://fr.dbpedia.org
/page/Rembrandt
heterogeneous
terms

CONCEPT 12
semantic
see also:
concepts
semantic
see also:
images
semantic
see also:
related resources

ENRICHING WITH
LINKED OPEN
VOCABULARIES
STRUCTURING
TRANSLATIONS &
METADATA
INTERRELATING WITH
ONTOLOGIES
CONCEPT 1
CONCEPT 2
CONCEPT 3
SOURCE CONTENT
IN >1 LANGUAGE
aअ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT

INTERRELATING WITH ONTOLOGIES
material
(en)
cotton
ivory gold
matériel
(fr)
coton
ivoire or
材料
(zh)
棉
象牙金
CONCEPT 13

INTERRELATING WITH ONTOLOGIES
Dublin Core: Physical Medium
http://purl.org/dc/terms/PhysicalMedium
Focus is on entire objects
not individual values
material
(en)
matériel
(fr)
材料
(zh)
CONCEPT 13

Class-level
Mappings
= Aggregations
Type Mappings
= Facets
CONCEPT 13

Class-level
Mappings
= Aggregations
Type Mappings
= Facets
Bonus!
Multilingual
Facets
CONCEPT 13

CONCEPT 13
Lots of existing resources and frameworks to use
And many more…

● Vocabularies, authorities help preserve the
shared meaning of values.
● Ontologies help relate like objects.
● Enable the retrieval of like things despite
lingual differences.
● Interactive search results, see alsos, facets,
filters, aggregations and groupings all
become possible.
ENRICHING WITH
LINKED OPEN
VOCABULARIES
CONCEPT 2
INTERRELATING WITH
ONTOLOGIES
CONCEPT 3

COLLABORATE EARLY & OFTEN

analyze content build target model

look at real data in
presentation layer
analyze content contributors refactor
and/or
add enrichments
look at real data in
presentation layer

analyze content gap analysis look at real data in
presentation layer
!

analyze content gap analysis return to
presentation layer

User needs govern
the UI presentation
UNDERSTAND
THE
CONTENT
SUPPORT
EXPLORATION
ENABLE
COLLABORATION

SOURCE CONTENT
IN >1 LANGUAGE
User flips a
master switch
to see the site in
another language
User has option to
see the content in
another language
to compare
User can find
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT
IN >1 LANGUAGE

@design4context Going Global IA Summit 2018 #IAS18
1 LANGUAGE AT A TIME
https://www.admin.ch/opc/de/classified-compilation/20141117/index.html
SWISS FEDERAL COUNCIL

https://www.europeana.eu/portal/en#

LOCALIZATION
Localization (also referred to as "l10n")
the process of adapting a product or content to a specific locale or
market. Translation is only one of several elements of the localization
process.

LOCALIZATION
RED
• Western cultures: excitement, action, love, danger
• Asian cultures: Good luck, joy, prosperity, long life
• Russia: Communism, revolution
• Africa: death

@design4context Going Global IA Summit 2018 #IAS18http://britishmuseum.org.cn/index.html
LOCALIZATION
CHINESE SITE

LOCALIZED EXPERIENCES
CHINESE
BRITISH

LOCALIZED EXPERIENCES
CHINESE
BRITISH
ARABIC

SOURCE CONTENT
IN >1 LANGUAGE
User flips a
master switch
to see the site in
another language
User has option to
see the content in
another language
to compare
User can find
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT
IN >1 LANGUAGE

SIDE BY SIDE COMPARISONS
https://www.admin.ch/opc/en/classified-compilation/20141117/index.html
SWISS FEDERAL COUNCIL

SOURCE CONTENT
IN >1 LANGUAGE
User flips a
master switch
to see the site in
another language
User has option to
see the content in
another language
to compare
User can find
even if it’s not
available in their
preferred language
aअ
‫ا‬
あ
a
あ
a
あ
अ
‫ا‬
あ
APPLY STRUCTURE
TO THE CONTENT
IN >1 LANGUAGE

User can find
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
MIXED LANGUAGE
BROWSE & SEARCH
VISUAL BROWSING
あ
अ
‫ا‬

https://www.louvre.fr/en/departements
ENABLING NON-LANGUAGE BASED EXPLORATION
VISUAL BROWSING

https://www.europeana.eu/portal/en/explore/colours.html
https://www.europeana.eu/portal/en/explore/periods.html
VISUAL BROWSING

VISUAL BROWSING

http://www.theeuropeanlibrary.org
/tel4/discover
VISUAL BROWSING

http://collections.lesartsdecoratifs.fr/publicite-graphisme
VISUAL BROWSING

http://collections.lesartsdecoratifs.fr/
air-france-amerique-du-sud
VISUAL BROWSING

http://collections.lesartsdecoratifs.fr
/skinwebsearch?f[0]=f_creation:Ca
rlu+Jean
VISUAL BROWSING

User can find
even if it’s not
available in their
preferred language
あ
अ
‫ا‬
MIXED LANGUAGE
BROWSE & SEARCH
VISUAL BROWSING
あ
अ
‫ا‬

SEARCH INPUT WITH DIFFERENT LANGUAGES
https://www.mdbg.net/chinese/dictionary?wdqb=%E4%BD%A0%E5%A5%BD
SEARCH MIXED LANGUAGE CONTENT

AUTO-COMPLETE ACROSS LANGUAGES
SEARCH MIXED LANGUAGE CONTENT
www.europeana.eu

UI PATTERNS WRAP-UP
1 language at a time
vs
Localized

UI PATTERNS WRAP-UP (CON’T)
Comparison
Visual exploration

UI PATTERNS WRAP-UP (CON’T)
Explore via Tags
Multiple / mixed language searches

TIM BERNERS-LEE / 1989
His vision for the worldwide web:
an open platform that would
allow everyone, everywhere
to share information,
access opportunities, and
collaborate across geographic
and cultural boundaries.
www.theguardian.com/technology/2017/mar/11/tim-berners-lee-web-inventor-save-internet

TRANSLATION = ACCESS

BASELINE

BASELINE
あ
अ
‫ا‬
a
ENABLE
DISCOVERY+ =

#IAS18 @design4context slides: designforcontext.com/insights
• FLIP-THE-SWITCH
• SEPARATE, VERY LOCALIZED SITE
COMPONENT-LEVEL
TRANSLATION
FIND CONTENT IN OTHER
LANGUAGES
• VISUAL BROWSING OPTIONS
• SEARCH MULTIPLE LANGUAGES
UI PATTERNS
STRUCTURE THE
TRANSLATIONS
& METADATA
ADD LINKED OPEN
VOCABULARIES
INTERRELATE WITH
ONTOLOGIES
APPLY STRUCTURE

Going Global: The Intersection of IA and UX in a Multilingual Environment

More Related Content

What's hot

Similar to Going Global: The Intersection of IA and UX in a Multilingual Environment

More from Design for Context

Recently uploaded

Going Global: The Intersection of IA and UX in a Multilingual Environment