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

140
!"#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST UVWXYZ[\]^_‘abcdefghijklmnopqrstuvwxyz{|}~ DOES YOUR WEB APP SPEAK SCHADENFREUDE?

Upload: codemotion

Post on 05-Apr-2017

24 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

DOES YOUR WEB APP SPEAK SCHADENFREUDE?

Page 2: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 3: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

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

Page 4: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

DOES YOUR WEB APP SPEAK SCHADENFREUDE?

Page 5: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 6: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

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

Page 7: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 8: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

INTERNATIONALIZATION & LOCALIZATION

Page 9: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 10: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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.

Page 11: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GREG REWIS @GARAZI

Page 12: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GREG REWIS @GARAZI

Page 13: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GREG REWIS @GARAZI

Page 14: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GREG REWIS @GARAZI

Page 15: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GREG REWIS @GARAZI

Page 16: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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)

Page 17: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

INTERNATIONALIZATION & LOCALIZATION

Page 18: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

INTERNATIONALIZATION VERSUS LOCALIZATION

Page 19: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 20: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 21: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 22: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

IT’S MORE THAN JUST WORDS

Page 23: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 24: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CALL ME, PLEASE!

Page 25: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USE PLACEHOLDERS OR PATTERN EXAMPLES

Page 26: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USE PLACEHOLDERS OR PATTERN EXAMPLES

Page 27: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USE PLACEHOLDERS OR PATTERN EXAMPLES

Page 28: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

HOW HARD CAN IT BE?

Page 29: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 30: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE PROBLEM WITH WORDS

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

Page 31: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 32: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 33: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CONSIDER THE LOWLY BUTTON

EDIT

Page 34: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CONSIDER THE LOWLY BUTTON

EDIT

BEARBEITEN

Page 35: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

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

Page 36: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 37: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

HANDLING COMPOUND WORDS

Page 38: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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.

Page 39: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 40: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

JUST ADD LETTERS

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

Page 41: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

JUST ADD LETTERS

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

Page 42: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

JUST ADD LETTERS

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

Page 43: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS

Page 44: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS

Page 45: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE LONGER, THE SHORTER

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

Page 46: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ALL CHARACTERS ARE NOT CREATED EQUAL

Page 47: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ALL CHARACTERS ARE NOT CREATED EQUAL

Page 48: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ASCENDERS AND DEFENDERS, OH MY!

Page 49: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ASCENDERS AND DEFENDERS, OH MY!

Page 50: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ASCENDERS AND DEFENDERS, OH MY!

Page 51: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USING THE SAME LINE HEIGHT CAN LEAD TO A CROWDED SCREEN

Page 52: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

TEXT OVERRUNS AND OVERLAPS...

Page 53: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLEXBOX TO THE RESCUE

Page 54: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLEXBOX TO THE RESCUE

Page 55: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 56: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 57: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 58: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 59: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

TABS POSE A SPECIAL PROBLEM

Page 60: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 61: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHEN TRUNCATIONS GO WRONG

Page 62: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THERE ARE ALWAYS COMPROMISES...

TruncationWrapping

Page 63: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 64: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CAPITALIZATION FAIL

Page 65: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE PROBLEM WITH SEMANTICS

What is wrong with this?

Page 66: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE PROBLEM WITH SEMANTICS

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

Page 67: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 68: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

KNOW YOUR LANGUAGE

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

Page 69: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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…

Page 70: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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…

Page 71: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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>

Page 72: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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>

Page 73: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 74: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 75: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

AVOID USING UI CONTROLS WITHIN A SENTENCE

What translators see:

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

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

Page 76: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

LABELS NEED CONTEXT

Page 77: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

LABELS NEED CONTEXTWhat translators see:

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

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

Page 78: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 79: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 80: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

WHAT DIRECTION ARE WE GOING?

You'd say that in Chinese as .

Page 81: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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>.

Page 82: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLEXBOX TO THE RESCUE

Page 83: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLEXBOX TO THE RESCUE

Page 84: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

JUST GIVE ME THE FAQ

English: FAQ

German: FAQ

Portuguese: Perguntas freqüentes

Page 85: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 86: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE IMPORTANCE OF PROPER ENCODING

Page 87: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE IMPORTANCE OF PROPER ENCODING

Page 88: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

UTF-8

Page 89: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

BREAKING NEWS FROM MORDOR

Page 90: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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>

Page 91: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

PSEUDO LOCALIZATION

Page 92: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

PSEUDO LOCALIZATION

Hard-coded Text

Page 93: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

PSEUDO LOCALIZATION

Hard-coded Text

Text Expansion/Truncation

Page 94: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

BRING PSEUDO LOCALIZATION TO ...

Page 95: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

BRING PSEUDO LOCALIZATION TO ...

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

Page 96: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CULTURE PLAYS A PART IN BOTH I18N AND L10N

Page 97: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 98: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

LOOK INTO MY EYES

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

Page 99: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

LOOK INTO MY EYES

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

Page 100: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

LOOK INTO MY EYES

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

Page 101: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 102: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 103: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 104: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 105: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 106: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 107: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 108: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 109: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 110: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 111: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 112: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 113: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THIS IS KNOWN AS CONTEXTUAL DESIGN

Page 114: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

ARE YOU HIGH CONTEXT OR LOW CONTEXT?

Page 115: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 116: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

CONSIDER THE LOWLY BUTTON (AGAIN)

CHECKOUTCHECKOUT

Page 117: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 118: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

HOW DO YOU INDICATE THE AVAILABILITY OF MULTIPLE LANGUAGES?

Page 119: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

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

Page 120: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLAGS≠LANGUAGES

Flagsaresymbolsthatrepresentcountriesorna2ons.

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

Page 121: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

FLAGS≠LANGUAGES

Flagsaresymbolsthatrepresentcountriesorna2ons.

Languagesrepresentasharedmethodofcommunica2onbetweenpeople.

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

Page 122: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

THE LANGUAGE ICON

http://languageicon.org/

Page 123: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USE GENERIC IMAGES AND ICONS THAT ARE CULTURALLY NEUTRAL.

Page 124: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 125: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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

Page 126: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

IMAGES REFLECT CULTURE

Page 127: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

IMAGES REFLECT CULTURE

Page 128: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

IMAGES REFLECT CULTURE

Page 129: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

IMAGES REFLECT CULTURE

Page 130: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 131: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 132: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

Page 133: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

USE MULTICULTURAL PERSONAS

Page 134: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GET INVOLVED EARLY

Page 135: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GET INVOLVED EARLY

I18N

Page 136: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

GET INVOLVED EARLY

L10N

L10N

I18N

Page 137: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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.

Page 138: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

http://l10nchecklist.com/

Page 139: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

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

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

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

Page 140: Does Your Web App Speak Schadenfreude? - Greg Rewis - Codemotion Rome 2017

!"#$%&'()*+,-./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