does your web app speak schadenfreude? - greg rewis - codemotion rome 2017

Post on 05-Apr-2017

24 Views

Category:

Technology

2 Downloads

Preview:

Click to see full reader

TRANSCRIPT

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

DOES YOUR WEB APP SPEAK SCHADENFREUDE?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

DOES YOUR WEB APP SPEAK SCHADENFREUDE?DOES YOUR WEB APP SPEAK SCHADENFREUDE?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

DOES YOUR WEB APP SPEAK SCHADENFREUDE?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

SCHADENFREUDE1. boshafte Freude über das Missgeschick und Unglück eines andern

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

SCHADENFREUDE1. boshafte Freude über das Missgeschick und Unglück eines andern

1. pleasure or enjoyment derived from the accidental misfortune of others

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

INTERNATIONALIZATION & LOCALIZATION

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

New data from research firm Common Sense Advisory suggests that if your brand is to achieve truly global reach in our online world, your website must "speak" more than 16 languages.

Source: Fast Company

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THINKING GLOBALLY, CODING LOCALLY

As web developers, it is our responsibility to understand how design decisions, layouts and even coding patterns can affect our ability to deliver our web sites and applications in a different language.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GREG REWIS @GARAZI

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GREG REWIS @GARAZI

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GREG REWIS @GARAZI

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GREG REWIS @GARAZI

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GREG REWIS @GARAZI

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FACTS...

▸ Salesforce is translated into 34 languages

▸ Salesforce1 is translated into 25 languages

▸ 15% Non-English users (As of Oct. 2014)

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

INTERNATIONALIZATION & LOCALIZATION

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

INTERNATIONALIZATION VERSUS LOCALIZATION

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

INTERNATIONALIZATION

▸ Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

▸ Abbreviated as i18n

image created by Jan Cavan

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LOCALIZATION

▸ Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).

▸ Abbreviated as l10n

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

I DON’T REALLY CARE ABOUT THIS. I’VE GOT PEOPLE THAT DO ALL OF THE TRANSLATION FOR OUR SITE.

the collective thought of the audience right now

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IT’S MORE THAN JUST WORDS

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IT’S MORE THAN JUST WORDS

▸ Date and time formats

▸ Number formats

▸ Currency formats

▸ Telephone numbers

▸ Symbols and icons

▸ Colors

▸ …and even the layout of a page

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CALL ME, PLEASE!

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USE PLACEHOLDERS OR PATTERN EXAMPLES

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USE PLACEHOLDERS OR PATTERN EXAMPLES

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USE PLACEHOLDERS OR PATTERN EXAMPLES

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HOW HARD CAN IT BE?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HOW HARD CAN IT BE?

▸ Most translations are done via XML documents

▸ Limited, if any, context

▸ Translation challenges are compounded when the text is technical

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE PROBLEM WITH WORDS

Source: https://www.brighttalk.com/webcast/13375/188539/getting-started-with-web-app-localization

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE PROBLEM WITH WORDS

▸ Le modem et l'imprimante sont des périphériques de mon ordinateur.

▸ The modem and the printer are peripheral devices connected to my computer.

Source: https://www.brighttalk.com/webcast/13375/188539/getting-started-with-web-app-localization

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

http://www.telegraph.co.uk/news/newstopics/howaboutthat/10280244/Translation-table-explaining-the-truth-behind-British-politeness-becomes-internet-hit.html

WHAT THE BRITISH SAY WHAT THE BRITISH MEAN WHAT FOREIGNERS UNDERSTAND

With the greatest respect You are an idiot He is listening to me

That's not bad That's good That's poor

Quite good A bit disappointing Quite good

Oh, incidentally/ by the way The primary purpose of our discussion is That is not very important

Very interesting That is clearly nonsense They are impressed

I'm sure it's my fault It's your fault Why do they think it was their fault?

You must come for dinner It's not an invitation, I'm just being polite I will get an invitation soon

I only have a few minor comments Please rewrite completely He has found a few typos

Could we consider some other options I don't like your idea They have not yet decided

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CONSIDER THE LOWLY BUTTON

EDIT

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CONSIDER THE LOWLY BUTTON

EDIT

BEARBEITEN

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TEXT EXPANSION CREATES LAYOUT TROUBLE IF A DESIGN ONLY FOCUSES ON ENGLISH...

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

“AS LONG AS WE ALLOW 20% EXPANSION FOR NON-ENGLISH TEXT, WE ARE GOOD.”

Somebody who didn’t know what they were talking about

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HANDLING COMPOUND WORDS

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HANDLING COMPOUND WORDS

▸ A number of languages, such as Finnish, German and Dutch, create single large 'words' to replace what is a sequence of smaller words in other languages.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HANDLING COMPOUND WORDS

▸ A number of languages, such as Finnish, German and Dutch, create single large 'words' to replace what is a sequence of smaller words in other languages.

▸ English: Input processing features

▸ German: Eingabeverarbeitungsfunktionen

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

JUST ADD LETTERS

Source: http://www.w3.org/International/articles/article-text-size

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

JUST ADD LETTERS

Source: http://www.w3.org/International/articles/article-text-size

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

JUST ADD LETTERS

Source: http://www.w3.org/International/articles/article-text-size

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE LONGER, THE SHORTER

Source: http://www.w3.org/International/articles/article-text-size

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ALL CHARACTERS ARE NOT CREATED EQUAL

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ALL CHARACTERS ARE NOT CREATED EQUAL

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ASCENDERS AND DEFENDERS, OH MY!

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ASCENDERS AND DEFENDERS, OH MY!

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ASCENDERS AND DEFENDERS, OH MY!

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USING THE SAME LINE HEIGHT CAN LEAD TO A CROWDED SCREEN

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TEXT OVERRUNS AND OVERLAPS...

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLEXBOX TO THE RESCUE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLEXBOX TO THE RESCUE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TABS POSE A SPECIAL PROBLEM

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHEN TRUNCATIONS GO WRONG

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THERE ARE ALWAYS COMPROMISES...

TruncationWrapping

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

TO WRAP OR NOT TO WRAP

UI Element Okay to Wrap Okay to Truncate

Button No NoDropdown list/Picklist Yes No

Field label Yes NoTextbox Yes Yes

Sys messaging Yes NoInput field Yes if field expands No

Tab No NoMenu No It depends**Tile Yes Yes

When wrapping UI text, use dynamic wrapping instead of manually inserting line breaks.

** It might be acceptable to add ellipses (...) to longer menu items

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CAPITALIZATION FAIL

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE PROBLEM WITH SEMANTICS

What is wrong with this?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE PROBLEM WITH SEMANTICS

What is wrong with this?What is <b>wrong</b> with <i>this</i>?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE PROBLEM WITH SEMANTICS

What is wrong with this?What is <b>wrong</b> with <i>this</i>?

https://r12a.github.io/scripts/tutorial/part6#emphasis

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

KNOW YOUR LANGUAGE

I’m getting a real sense of schadenfreude from this presentation.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

KNOW YOUR LANGUAGE

I’m getting a real sense of schadenfreude from this presentation.

…sense of <i lang=“de-DE”>schadenfreude</i> from…

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

KNOW YOUR LANGUAGE

I’m getting a real sense of schadenfreude from this presentation.

…sense of <i lang=“de-DE”>schadenfreude</i> from…

…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

KNOW YOUR LANGUAGE

I’m getting a real sense of schadenfreude from this presentation.

…sense of <i lang=“de-DE”>schadenfreude</i> from…

…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…

<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

KNOW YOUR LANGUAGE

I’m getting a real sense of schadenfreude from this presentation.

…sense of <i lang=“de-DE”>schadenfreude</i> from…

…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…

<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>

<span title="Spanish"><a lang="es" href="qa-html-language-declarations.es">Español</a></span>

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

AVOID USING UI CONTROLS WITHIN A SENTENCE

What translators see:

<param name=”part1”>After</param>

<param name=”part2”>occurrences</param>

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LABELS NEED CONTEXT

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LABELS NEED CONTEXTWhat translators see:

<param name=”from”>From</param>

<param name=”to”>To</param>

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LABELS NEED CONTEXTWhat translators see:

<param name=”from”>From</param>

<param name=”to”>To</param>

Japanese: 10/1/2015 12/31/2015

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LABELS NEED CONTEXTWhat translators see:

<param name=”from”>From</param>

<param name=”to”>To</param>

Japanese: 10/1/2015 12/31/2015

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHAT DIRECTION ARE WE GOING?

You'd say that in Chinese as .

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

WHAT DIRECTION ARE WE GOING?

You'd say that in Chinese as .

…Chinese as <span dir="rtl" lang="zh-Hans"> </span>.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLEXBOX TO THE RESCUE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLEXBOX TO THE RESCUE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

JUST GIVE ME THE FAQ

English: FAQ

German: FAQ

Portuguese: Perguntas freqüentes

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

JUST GIVE ME THE FAQ

▸ If you are abbreviating your text tomakeitfitinarestrictedspace, you should really consider whether this is a good idea. Other languages may not be able to replicate such an abbreviation.

▸ If you think you need abbreviations, as always work with your writer (at the design stage).

English: FAQ

German: FAQ

Portuguese: Perguntas freqüentes

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE IMPORTANCE OF PROPER ENCODING

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE IMPORTANCE OF PROPER ENCODING

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

UTF-8

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

BREAKING NEWS FROM MORDOR

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

PSEUDO LOCALIZATION

‣ Pseudo localization is a cost-effective preventive measure which allows you to test and detect certain internationalization and localization issues before the text is actually localized

English:

<param name="title">Introducing Accounts</param>

After Pseudo Localization:

<param name="title">[Eöש Introducing AccountsEöש ]</param>

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

PSEUDO LOCALIZATION

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

PSEUDO LOCALIZATION

Hard-coded Text

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

PSEUDO LOCALIZATION

Hard-coded Text

Text Expansion/Truncation

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

BRING PSEUDO LOCALIZATION TO ...

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

BRING PSEUDO LOCALIZATION TO ...

https://github.com/arieare/Sketch-Pseudol10n

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CULTURE PLAYS A PART IN BOTH I18N AND L10N

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LOOK INTO MY EYES

Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LOOK INTO MY EYES

Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

LOOK INTO MY EYES

Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE WAY USERS PERCEIVE AND BEHAVE...

▸ Western cultures tend to be more analytical: they perceive elements sequentially and read from the left to the right, top to bottom.

Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE WAY USERS PERCEIVE AND BEHAVE...

▸ Japanese, Chinese and Korean audiences tend to scan the whole page in a non-linear fashion

Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THIS IS KNOWN AS CONTEXTUAL DESIGN

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

ARE YOU HIGH CONTEXT OR LOW CONTEXT?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

CONSIDER THE LOWLY BUTTON (AGAIN)

CHECKOUTCHECKOUT

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

HOW DO YOU INDICATE THE AVAILABILITY OF MULTIPLE LANGUAGES?

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

https://en.wikipedia.org/wiki/List_of_countries_where_Spanish_is_an_official_language

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLAGS≠LANGUAGES

Flagsaresymbolsthatrepresentcountriesorna2ons.

Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

FLAGS≠LANGUAGES

Flagsaresymbolsthatrepresentcountriesorna2ons.

Languagesrepresentasharedmethodofcommunica2onbetweenpeople.

Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

THE LANGUAGE ICON

http://languageicon.org/

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USE GENERIC IMAGES AND ICONS THAT ARE CULTURALLY NEUTRAL.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

SHOW ME THE MONEY

You are designing for an e-commerce checkout process. You need an icon which depicts the idea of an 'invoice'. It has to make sense in a global context.

http://ux.stackexchange.com/questions/83894/can-the-symbol-be-safely-considered-as-universal-when-making-a-graphic-depic

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

SHOW ME THE MONEY

You are designing for an e-commerce checkout process. You need an icon which depicts the idea of an 'invoice'. It has to make sense in a global context.

http://ux.stackexchange.com/questions/83894/can-the-symbol-be-safely-considered-as-universal-when-making-a-graphic-depic

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IMAGES REFLECT CULTURE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IMAGES REFLECT CULTURE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IMAGES REFLECT CULTURE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

IMAGES REFLECT CULTURE

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

USE MULTICULTURAL PERSONAS

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GET INVOLVED EARLY

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GET INVOLVED EARLY

I18N

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

GET INVOLVED EARLY

L10N

L10N

I18N

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

A CHECKLIST TO FOLLOW

▸ Allow for text expansion and contraction in your UI.

▸ Think twice about international user experience before truncating your UI text

▸ Avoid inline UI controls.

▸ Avoid embedding UI text into images.

▸ Use culturally-neutral icons and graphics.

▸ Do not use flags to represent languages.

▸ Pseudo Localization is your friend.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

http://l10nchecklist.com/

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

https://www.flickr.com/photos/wwworks/4759535950

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST

UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������

RESOURCES

▸ http://www.w3.org/International/articles/article-text-size

▸ https://blogs.oracle.com/translation/entry/text_expansion_for_ux_designers_points_to_consider

▸ http://uxmag.com/articles/select-country-select-language

▸ http://ux.stackexchange.com/questions/25295/best-practice-for-designing-ui-for-a-multilingual-site

▸ http://uxmag.com/articles/global-by-design

top related