Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
DOES YOUR WEB APP
SPEAK SCHADENFREUDE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
DOES YOUR WEB APP
SPEAK SCHADENFREUDE?
DOES YOUR WEB APP
SPEAK SCHADE...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
DOES YOUR WEB APP
SPEAK SCHADENFREUDE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
SCHADENFREUDE
1. boshafte Freude über das Missgeschick und Unglück ei...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
SCHADENFREUDE
1. boshafte Freude über das Missgeschick und Unglück ei...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
INTERNATIONALIZATION 

& 

LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
New data from research firm Common Sense Advisory
suggests that if yo...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THINKING GLOBALLY, CODING LOCALLY


As web developers, it is our resp...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GREG REWIS
@GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GREG REWIS
@GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GREG REWIS
@GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GREG REWIS
@GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GREG REWIS
@GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FACTS...
▸ Salesforce is translated into 34 languages
▸ Salesforce1 i...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
INTERNATIONALIZATION 

& 

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

VERSUS 

LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
INTERNATIONALIZATION
▸ Internationalization is the design and
develop...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LOCALIZATION
▸ Localization refers to the adaptation of a
product, ap...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
I DON’T REALLY CARE ABOUT THIS. I’VE
GOT PEOPLE THAT DO ALL OF THE
TR...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IT’S MORE THAN JUST WORDS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IT’S MORE THAN JUST WORDS
▸ Date and time formats
▸ Number formats
▸ ...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CALL ME, PLEASE!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HOW HARD CAN IT BE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HOW HARD CAN IT BE?
▸ Most translations are done via XML documents
▸ ...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE PROBLEM WITH WORDS
Source: https://www.brighttalk.com/webcast/133...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE PROBLEM WITH WORDS
▸ Le modem et l'imprimante
sont des périphériq...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
http://www.telegraph.co.uk/news/newstopics/howaboutthat/10280244/Tran...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CONSIDER THE LOWLY BUTTON
EDIT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CONSIDER THE LOWLY BUTTON
EDIT
BEARBEITEN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TEXT EXPANSION CREATES LAYOUT
TROUBLE IF A DESIGN ONLY
FOCUSES ON ENG...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
“AS LONG AS WE ALLOW 20%
EXPANSION FOR NON-ENGLISH TEXT, WE
ARE GOOD....
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HANDLING COMPOUND WORDS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HANDLING COMPOUND WORDS
▸ A number of languages, such as Finnish, Ger...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HANDLING COMPOUND WORDS
▸ A number of languages, such as Finnish, Ger...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/art...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/art...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/art...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE LONGER, THE SHORTER
Source: http://www.w3.org/International/artic...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ALL CHARACTERS ARE NOT CREATED EQUAL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ALL CHARACTERS ARE NOT CREATED EQUAL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USING THE SAME LINE HEIGHT CAN LEAD TO A CROWDED SCREEN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TEXT OVERRUNS AND OVERLAPS...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TABS POSE A SPECIAL PROBLEM
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THERE ARE ALWAYS COMPROMISES...
Truncation
Wrapping
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
TO WRAP OR NOT TO WRAP
UI Element Okay to Wrap Okay to Truncate
Butto...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CAPITALIZATION FAIL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE PROBLEM WITH SEMANTICS
What is wrong with this?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE PROBLEM WITH SEMANTICS
What is wrong with this?
What is <b>wrong<...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE PROBLEM WITH SEMANTICS
What is wrong with this?
What is <b>wrong<...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from thi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from thi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from thi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from thi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from thi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
AVOID USING UI CONTROLS WITHIN A SENTENCE
What translators see:
<para...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LABELS NEED CONTEXT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LABELS NEED CONTEXT
What translators see:
<param name=”from”>From</pa...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LABELS NEED CONTEXT
What translators see:
<param name=”from”>From</pa...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LABELS NEED CONTEXT
What translators see:
<param name=”from”>From</pa...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHAT DIRECTION ARE WE GOING?
You'd say that in Chinese as .
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
WHAT DIRECTION ARE WE GOING?
You'd say that in Chinese as .
…Chinese ...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
JUST GIVE ME THE FAQ
English: FAQ
German: FAQ
Portuguese: Perguntas f...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
JUST GIVE ME THE FAQ
▸ If you are abbreviating your text to	make	it	fi...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE IMPORTANCE OF PROPER ENCODING
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE IMPORTANCE OF PROPER ENCODING
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UTF-8
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
BREAKING NEWS FROM MORDOR
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
PSEUDO LOCALIZATION
‣ Pseudo localization is a cost-effective prevent...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
PSEUDO LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
PSEUDO LOCALIZATION
Hard-coded Text
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
PSEUDO LOCALIZATION
Hard-coded Text
Text Expansion/Truncation
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
BRING PSEUDO LOCALIZATION TO ...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
BRING PSEUDO LOCALIZATION TO ...
https://github.com/arieare/Sketch-Ps...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CULTURE PLAYS A PART
IN BOTH I18N AND L10N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDes...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDes...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDes...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE WAY USERS PERCEIVE AND BEHAVE...
▸ Western cultures tend to be mo...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE WAY USERS PERCEIVE AND BEHAVE...
▸ Japanese, Chinese and Korean a...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THIS IS KNOWN AS
CONTEXTUAL DESIGN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
ARE YOU HIGH CONTEXT
OR LOW CONTEXT?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
CONSIDER THE LOWLY BUTTON (AGAIN)
CHECKOUTCHECKOUT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
HOW DO YOU INDICATE THE
AVAILABILITY OF MULTIPLE
LANGUAGES?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
https://en.wikipedia.org/wiki/List_of_countries_where_Spanish_is_an_o...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLAGS	≠	LANGUAGES
Flags	are	symbols	that	represent	countries	or	
na2o...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
FLAGS	≠	LANGUAGES
Flags	are	symbols	that	represent	countries	or	
na2o...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
THE LANGUAGE ICON
http://languageicon.org/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USE GENERIC IMAGES AND ICONS
THAT ARE CULTURALLY NEUTRAL.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
SHOW ME THE MONEY
You are designing for an
e-commerce checkout
proces...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
SHOW ME THE MONEY
You are designing for an
e-commerce checkout
proces...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
USE MULTICULTURAL PERSONAS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GET INVOLVED EARLY
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GET INVOLVED EARLY
I18N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
GET INVOLVED EARLY
L10N
L10N
I18N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
A CHECKLIST TO FOLLOW
▸ Allow for text expansion and contraction in y...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
http://l10nchecklist.com/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
https://www.flickr.com/photos/wwworks/4759535950
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
RESOURCES
▸ http://www.w3.org/International/articles/article-text-siz...
Upcoming SlideShare
Loading in …5
×

Does Your Web App Speak Schadenfreude?

47 views

Published on

Greg Rewis' presentation on i18n and l10n for Web Directions' Code conference, August 2016.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Does Your Web App Speak Schadenfreude?

  1. 1. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST DOES YOUR WEB APP SPEAK SCHADENFREUDE?
  2. 2. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  3. 3. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST DOES YOUR WEB APP SPEAK SCHADENFREUDE? DOES YOUR WEB APP SPEAK SCHADENFREUDE?
  4. 4. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST DOES YOUR WEB APP SPEAK SCHADENFREUDE?
  5. 5. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  6. 6. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST SCHADENFREUDE 1. boshafte Freude über das Missgeschick und Unglück eines andern

  7. 7. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST SCHADENFREUDE 1. boshafte Freude über das Missgeschick und Unglück eines andern
 1. pleasure or enjoyment derived from the accidental misfortune of others
  8. 8. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST INTERNATIONALIZATION 
 & 
 LOCALIZATION
  9. 9. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  10. 10. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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.
  11. 11. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GREG REWIS @GARAZI
  12. 12. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GREG REWIS @GARAZI
  13. 13. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GREG REWIS @GARAZI
  14. 14. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GREG REWIS @GARAZI
  15. 15. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GREG REWIS @GARAZI
  16. 16. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FACTS... ▸ Salesforce is translated into 34 languages ▸ Salesforce1 is translated into 25 languages ▸ 15% Non-English users (As of Oct. 2014)
  17. 17. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST INTERNATIONALIZATION 
 & 
 LOCALIZATION
  18. 18. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST INTERNATIONALIZATION 
 VERSUS 
 LOCALIZATION
  19. 19. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  20. 20. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  21. 21. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  22. 22. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST IT’S MORE THAN JUST WORDS
  23. 23. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  24. 24. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CALL ME, PLEASE!
  25. 25. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USE PLACEHOLDERS OR PATTERN EXAMPLES
  26. 26. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USE PLACEHOLDERS OR PATTERN EXAMPLES
  27. 27. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USE PLACEHOLDERS OR PATTERN EXAMPLES
  28. 28. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST HOW HARD CAN IT BE?
  29. 29. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  30. 30. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE PROBLEM WITH WORDS Source: https://www.brighttalk.com/webcast/13375/188539/getting-started-with-web-app-localization
  31. 31. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  32. 32. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  33. 33. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CONSIDER THE LOWLY BUTTON EDIT
  34. 34. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CONSIDER THE LOWLY BUTTON EDIT BEARBEITEN
  35. 35. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TEXT EXPANSION CREATES LAYOUT TROUBLE IF A DESIGN ONLY FOCUSES ON ENGLISH...
  36. 36. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST “AS LONG AS WE ALLOW 20% EXPANSION FOR NON-ENGLISH TEXT, WE ARE GOOD.” Somebody who didn’t know what they were talking about
  37. 37. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST HANDLING COMPOUND WORDS
  38. 38. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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.
  39. 39. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  40. 40. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST JUST ADD LETTERS Source: http://www.w3.org/International/articles/article-text-size
  41. 41. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST JUST ADD LETTERS Source: http://www.w3.org/International/articles/article-text-size
  42. 42. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST JUST ADD LETTERS Source: http://www.w3.org/International/articles/article-text-size
  43. 43. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
  44. 44. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
  45. 45. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE LONGER, THE SHORTER Source: http://www.w3.org/International/articles/article-text-size
  46. 46. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ALL CHARACTERS ARE NOT CREATED EQUAL
  47. 47. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ALL CHARACTERS ARE NOT CREATED EQUAL
  48. 48. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ASCENDERS AND DEFENDERS, OH MY!
  49. 49. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ASCENDERS AND DEFENDERS, OH MY!
  50. 50. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ASCENDERS AND DEFENDERS, OH MY!
  51. 51. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USING THE SAME LINE HEIGHT CAN LEAD TO A CROWDED SCREEN
  52. 52. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TEXT OVERRUNS AND OVERLAPS...
  53. 53. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLEXBOX TO THE RESCUE
  54. 54. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLEXBOX TO THE RESCUE
  55. 55. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  56. 56. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  57. 57. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  58. 58. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  59. 59. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TABS POSE A SPECIAL PROBLEM
  60. 60. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  61. 61. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHEN TRUNCATIONS GO WRONG
  62. 62. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THERE ARE ALWAYS COMPROMISES... Truncation Wrapping
  63. 63. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST TO WRAP OR NOT TO WRAP UI Element Okay to Wrap Okay to Truncate Button No No Dropdown list/Picklist Yes No Field label Yes No Textbox Yes Yes Sys messaging Yes No Input field Yes if field expands No Tab No No Menu 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
  64. 64. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CAPITALIZATION FAIL
  65. 65. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE PROBLEM WITH SEMANTICS What is wrong with this?
  66. 66. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE PROBLEM WITH SEMANTICS What is wrong with this? What is <b>wrong</b> with <i>this</i>?
  67. 67. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  68. 68. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST KNOW YOUR LANGUAGE I’m getting a real sense of schadenfreude from this presentation.
  69. 69. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST KNOW YOUR LANGUAGE I’m getting a real sense of schadenfreude from this presentation. …sense of <i lang=“de-DE”>schadenfreude</i> from…
  70. 70. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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…
  71. 71. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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>
  72. 72. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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>
  73. 73. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  74. 74. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  75. 75. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST AVOID USING UI CONTROLS WITHIN A SENTENCE What translators see: <param name=”part1”>After</param> <param name=”part2”>occurrences</param>
  76. 76. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LABELS NEED CONTEXT
  77. 77. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LABELS NEED CONTEXT What translators see: <param name=”from”>From</param> <param name=”to”>To</param>
  78. 78. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LABELS NEED CONTEXT What translators see: <param name=”from”>From</param> <param name=”to”>To</param> Japanese: 10/1/2015 12/31/2015
  79. 79. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LABELS NEED CONTEXT What translators see: <param name=”from”>From</param> <param name=”to”>To</param> Japanese: 10/1/2015 12/31/2015
  80. 80. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHAT DIRECTION ARE WE GOING? You'd say that in Chinese as .
  81. 81. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST WHAT DIRECTION ARE WE GOING? You'd say that in Chinese as . …Chinese as <span dir="rtl" lang="zh-Hans"> </span>.
  82. 82. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLEXBOX TO THE RESCUE
  83. 83. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLEXBOX TO THE RESCUE
  84. 84. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST JUST GIVE ME THE FAQ English: FAQ German: FAQ Portuguese: Perguntas freqüentes
  85. 85. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST JUST GIVE ME THE FAQ ▸ If you are abbreviating your text to make it fit in a restricted space, 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
  86. 86. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE IMPORTANCE OF PROPER ENCODING
  87. 87. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE IMPORTANCE OF PROPER ENCODING
  88. 88. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST UTF-8
  89. 89. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST BREAKING NEWS FROM MORDOR
  90. 90. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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>
  91. 91. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST PSEUDO LOCALIZATION
  92. 92. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST PSEUDO LOCALIZATION Hard-coded Text
  93. 93. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST PSEUDO LOCALIZATION Hard-coded Text Text Expansion/Truncation
  94. 94. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST BRING PSEUDO LOCALIZATION TO ...
  95. 95. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST BRING PSEUDO LOCALIZATION TO ... https://github.com/arieare/Sketch-Pseudol10n
  96. 96. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CULTURE PLAYS A PART IN BOTH I18N AND L10N
  97. 97. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  98. 98. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LOOK INTO MY EYES Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
  99. 99. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LOOK INTO MY EYES Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
  100. 100. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST LOOK INTO MY EYES Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
  101. 101. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  102. 102. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  103. 103. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  104. 104. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  105. 105. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  106. 106. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  107. 107. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  108. 108. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  109. 109. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  110. 110. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  111. 111. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  112. 112. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  113. 113. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THIS IS KNOWN AS CONTEXTUAL DESIGN
  114. 114. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST ARE YOU HIGH CONTEXT OR LOW CONTEXT?
  115. 115. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  116. 116. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST CONSIDER THE LOWLY BUTTON (AGAIN) CHECKOUTCHECKOUT
  117. 117. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  118. 118. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST HOW DO YOU INDICATE THE AVAILABILITY OF MULTIPLE LANGUAGES?
  119. 119. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST https://en.wikipedia.org/wiki/List_of_countries_where_Spanish_is_an_official_language
  120. 120. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLAGS ≠ LANGUAGES Flags are symbols that represent countries or na2ons. Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
  121. 121. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST FLAGS ≠ LANGUAGES Flags are symbols that represent countries or na2ons. Languages represent a shared method of communica2on between people. Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
  122. 122. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST THE LANGUAGE ICON http://languageicon.org/
  123. 123. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USE GENERIC IMAGES AND ICONS THAT ARE CULTURALLY NEUTRAL.
  124. 124. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  125. 125. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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
  126. 126. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST IMAGES REFLECT CULTURE
  127. 127. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST IMAGES REFLECT CULTURE
  128. 128. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST IMAGES REFLECT CULTURE
  129. 129. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST IMAGES REFLECT CULTURE
  130. 130. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  131. 131. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  132. 132. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
  133. 133. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST USE MULTICULTURAL PERSONAS
  134. 134. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GET INVOLVED EARLY
  135. 135. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GET INVOLVED EARLY I18N
  136. 136. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST GET INVOLVED EARLY L10N L10N I18N
  137. 137. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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.
  138. 138. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST http://l10nchecklist.com/
  139. 139. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST https://www.flickr.com/photos/wwworks/4759535950
  140. 140. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST 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

×