1. Design for the Flat World Think Globally, Act Locally Jim Foley, adapted from multiple sources Comments directed to foley@cc.gatech.edu are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Jan 2012.foley@cc.gatech.edu

2. UI Design - Georgia Tech Globalization Outline What are the issues Bad Examples Why Important Principles How to Do It – Tools, Lifecycle WWW Resources 2

3. What are Some of the Issues?? 1.? 2.? 3.? UI Design - Georgia Tech 3

4. Some of the Issues Special characters – e.g. ä, ñ, ø Left-to-right versus right-to-left Date and time formats Numeric and currency formats Weights and measures Telephone numbers and addresses Names and titles (Mr., Ms., Mme.) ID numbers Capitalization and punctuation Sorting sequences Icons, buttons, colors Pluralization, grammar, spelling Culture, Etiquette, policies, tone, formality, metaphors UI Design - Georgia Tech 4

5. Types of Globalization Issues Comprehensibility Usability Desirability These move from easier to harder 5

6. UI Design - Georgia Tech Bad Examples – Pardon My French Look at the menus Look at the dialog box Incomplete translation ! 6

7. UI Design - Georgia Tech Bad Examples – We Are the World? What do you mean you don’t have a state? What do you mean you don’t have a zip code?  Some other countries use “postal code” Very US-centric – especially if fields are required! 7

8. UI Design - Georgia Tech Bad Examples – The Sun Never Sets on the British Empire? The user swears that this is really how you spell customize Even within a given language – such as English – there are variations British/Australians spell a lot of words differently than we do More US-centricism Good Example – Microsoft Word recognizes lots of languages, even Catalan 8

9. UI Design - Georgia Tech Bad Example – If the Shoe Fits? Number of letters in word with same meaning varies a lot Some languages might not have exactly the right word and need a phrase 9 “Preview” fits in button, but “Vista Preliminar” does not! BTW – is “Scan” a Spanish word?

10. UI Design - Georgia Tech Why Worry About It? Public Relations Legal Requirements Product success => profit, not loss  Population –US – 300,000,000 –World – 6,000,000,000  Growing World-Wide Market  Competition 10

11. UI Design - Georgia Tech Format Give users chance to express preferences for format for  dates,  time,  currency,  Numbers  Address  Phone numbers 11

12. Phone, Date, Time Formats UI Design - Georgia Tech http://publib- b.boulder.ibm.com/Redbooks.nsf/9445fa5b416f6e32852569ae006bb65f/0e82655a11b205f085256bbd00788b 6c?OpenDocument 12

13. Forms Design Observe local conventions UI Design - Georgia Tech 13

14. UI Design - Georgia Tech Color Be sensitive to  Sacred colors  Political movement colors http://www.ricklineback.com/culture2.htm 14

15. Sacred Colors Judeo-Christian: White, blue, gold, scarlet Islamic: green, light blue Buddhist: saffron yellow UI Design - Georgia Tech From http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html 15

16. Red and White – Meanings? UI Design - Georgia Tech 16 White in US: wedding, happiness White in China: funeral, sadness Red in China: good luck Red in US: anger http://courses.csail.mit.edu/6.831/archive/2008/lectures/L25-internationalization/L25-internationalization.html

17. UI Design - Georgia Tech Metaphor GUI / Direct Manipulation approach based on analogy to real world objects Danger for globalization – if objects not same  Mailbox icon, telephone  File folders don’t look the same in China or India or Europe –Think bookshelf, books, chapters … 17

18. UI Design - Georgia Tech Symbols Avoid sports equipment, national monuments, holiday symbols etc unfamiliar in other cultures Careful with animals, religious symbols, national flags, colors, hand gestures, gender or racial stereotypes Use ToolTips to explain symbols/icons that could be ambiguous Emoticons (such as ) vary – e.g. Japanese (^_^) 18

19. Emoticons Study: East Asians more likely than Westerners to read the expression for ‘fear’ as ‘surprise’, and ‘disgust’ as ‘anger.’ People from different cultural groups observe different parts of the face when interpreting expression. East Asian participants tend to focus on eyes, while Western subjects took in the whole face, including the eyes and the mouth.” http://news.bbc.co.uk/2/hi/science/nature/8199951.stm UI Design - Georgia Tech 19 Representation of eyes more prominent

20. Hand Gestures – Thumbs Up Thumbs up sign in most American and European cultures going according to plans Approval Rude &offensive in Islamic and Asian countries In Australia Means OK, but if move up and down => grave insult UI Design - Georgia Tech 20 More at http://www.buzzle.com/articles/hand-gestures-in-different-cultures.html

21. UI Design - Georgia Tech Use Universal Symbols 21

22. Some “Icons” are Local UI Design - Georgia Tech From http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html 22

23. Local Icons UI Design - Georgia Tech 23 http://courses.csail.mit.edu/6.831/archive/2008/lectures/L25-internationalization/L25-internationalization.html

24. Graphic Design UI Design - Georgia Tech http://www.onextrapixel.com/2010/06/22/bui lding-a-cross-cultural-web-design-for-a- wider-audience/ 24

25. Web Page Backgrounds What works in Finland may not be right for other areas UI Design - Georgia Tech Backgrounds for software developed in Finland, from http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html 25

26. Localization Within Template - IBM UI Design - Georgia Tech 26

27. Siemens UI Design - Georgia Tech 27

28. Coca Cola UI Design - Georgia Tech 28

29. UI Design - Georgia Tech WWW Globalization Log files can show country of visitors Remote usability testing possible Language  IP addresses -> correct starting language  Language-specific start pages - have unique URLs  Allow user to specify language - typically with flags  User preferences or cookies Times - what city/country,GMT E-commerce conventions vary  Payment and delivery options, return policies 29

30. UI Design - Georgia Tech Sound Be careful with sounds – consider possible meanings  Examples? 30

31. UI Design - Georgia Tech Legal Environments Laws differ from country to country E.g. in some countries it is illegal to directly position your product against the competition  India being one, I am told 31

32. UI Design - Georgia Tech Culture includes … Surface – visible – including simple things like currency, date and time formats, and more complex – dress, family relationships Unspoken & unconscious rules  Examples? 32

33. UI Design - Georgia Tech Unspoken Rules E.g. Japanese find disembodied body parts unappealing (Marcus et al 1999) 33

34. UI Design - Georgia Tech Humor Is very culturally dependent May be dependent on language Doesn’t tend to work well cross culturally 34

35. UI Design - Georgia Tech Language Modify keyboard mnemonics to fit target languages Translation difficult if program concatenates strings on-the-fly Use simple syntax – noun- verb-object Use consistent terminology – simplifies translation Watch out for country-specific terminology: elevator-lift, hood-bonnet, toilet-loo Avoid words with multiple meanings Visual puns may not translate Avoid difficult noun phrases (e.g. 3 nouns in a row) Avoid abbreviations and acronyms Avoid slang Avoid letters in bitmaps and toolbar icons 35

36. UI Design - Georgia Tech Language Avoid overly friendly style  May be interpreted as condescending Watch out for gender, racial, national stereotypes If no translation exists, use original word Layout should follow left-to-right vs. right-to-left vs. vertical pattern of reading  MS Windows 2000/XP localization of Hebrew and Arabic handle right to left – make sure your application is “mirroring aware” so that text is not “flipped” Sorting sequences – where do ñ, ä, å, ë etc fit in? Translations should be done my native-speaker 36

37. Avoid Built-in Language Syntax UI Design - Georgia Tech Embedded grammar makes internationalization hard No embedded grammar http://www.slideshare.net/ sameerhere/culture- usability-iit-guwahati 37

38. Don’t Build-in Language Syntax! UI Design - Georgia Tech From Sun Microsystems Internationalization Taxonomy, 2001 38

39. Right-to-Left Langauges UI Design - Georgia Tech Flip more than just the text 39

40. UI Design - Georgia Tech Functional Requirements May vary from location to location (e.g. need for user control and initiative may vary in different cultures) How determine? Examples? 40

41. UI Design - Georgia Tech Globalizing UI Design Process Start with user analysis – identifying user communities and their characteristics What varies – which ones are most important? Include people internationally in feedback process  Requirements determination  Usability  Beta testing 41

42. UI Design - Georgia Tech Globalizing UI Design Process Ensure developers are familiar with globalization issues  Ideal scenario – “locals” do it Ensure test team can recognize globalization problems  Consortia of world-wide usability labs Planning/budgeting specifically identifies globalization  Avoid surprises and cost-overruns Some effort produces a more globalized product than no effort  Structure software to facilitate localization 42

43. Goal – Software Localization Localize one application to many locales UI Design - Georgia Tech http://publib- b.boulder.ibm.com/Redbooks.nsf/9445fa5b416f6e32852569ae006bb65f/0e82655a11b205f085256bbd00788b 6c?OpenDocument 43

44. Software Tools to Facilitate MS Windows Locales  User preference information –input language, keyboard layout, sorting order, formats for numbers, dates, currencies, time  Can specify user locale, input locale, and system locale  Windows User Interface can be displayed in different languages – 90% localized UI Design - Georgia Tech 44

45. Three Localization Methods UI Design - Georgia Tech Separate programs for each locale Separate programs for each locale, with localization info clearly separated from code Single program - loads appropriate localization information http://publib- b.boulder.ibm.com/Redbooks.nsf/9445fa5b416f6e32852569ae006bb65f/0e82655a11b205f085256bbd00788b 6c?OpenDocument 45

46. Localization for MS Windows UI Design - Georgia Tech 46

47. iPhone SDK Supports "An iPhone application should be internationalized and have a language.lproj directory for each language it supports. In addition to providing localized versions of your application’s custom resources, you can also localize your application icon (Icon.png), default image (Default.png), and Settings icon (Icon-Settings.png) by placing files with the same name in your language-specific project directories. UI Design - Georgia Tech 47

48. UI Design - Georgia Tech Tools VB, Visual C++, Java all provide some support Unicode necessary to store larger character sets 48

49. Software Support http://www.loc-suite.org/ UI Design - Georgia Tech 49

50. UI Design - Georgia Tech Localizing Ensure user interface text is isolated from code – put in files Store multiple versions of same string if used more than one place Avoid text in bitmaps and icons Do not generate text strings on-the-fly Test localized applications on all language variants 50

51. UI Design - Georgia Tech Resources http://msdn.microsoft.com/en- us/goglobal/default.aspxwww.w3.org/Internationalwww.w3.org/International Dmoz.org/Computers/Software/Globalization/ www.acm.org/sigchi/bulletin/1996.3/international.html eies.njit.edu/~turoff/coursenotes/CIS732/samplepro/user_interface_intern ationalizat.htmeies.njit.edu/~turoff/coursenotes/CIS732/samplepro/user_interface_intern ationalizat.htm http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html http://www-01.ibm.com/software/globalization/guidelines/h3.jsp http://publib- b.boulder.ibm.com/Redbooks.nsf/9445fa5b416f6e32852569ae006bb65f/0 e82655a11b205f085256bbd00788b6c?OpenDocument 51

52. UI Design - Georgia Tech End Globalization 52