1. 1 HFWEB June 3, 1999 Globalization and User- Interface Design for the Web Aaron Marcus, John Armitage, Volker Frank, Edward Guttman Aaron Marcus and Associates, Inc. Emeryville, CA, and New York City, NY Aaron@AMandA.com, www.AMandA.com

2. 2 HFWEB June 3, 1999 Presentation Summary u 1. Introduction u 2. Definition of Globalization u 3. Globalization Design Process u 4. General Guidelines for Globalization u 5. Specific Guidelines for Appearance u 6. Conclusion

3. 3 HFWEB June 3, 1999 1. Introduction u Web is global distribution of products and services u User-interface design improves performance and appeal u User diversity: demographics and individual needs/wants u User-interface design issues are complex and challenging

4. 4 HFWEB June 3, 1999 Example: A Present from India

5. 5 HFWEB June 3, 1999 Example: Inside the Box

6. 6 HFWEB June 3, 1999 User Interfaces u Content and tools = data and functions u Information visualization = significant aspect u UI+IV = user interface, including information visualization u Primary components: Metaphors, mental models, navigation, interaction, appearance

7. 7 HFWEB June 3, 1999 2. Definition of Globalization u Globalization issues and UI+IV Design: International: standardized, “universal” Intercultural: differences between two Localization: customized, part or whole

8. 8 HFWEB June 3, 1999 International Issues u Geographic, political, linguistic u Example: ISO CRT-color, icon, and UI standards u Example: Canadian bilingual requirements u Example: Currency, time, physical measurements

9. 9 HFWEB June 3, 1999 Intercultural u Religious, historical, aesthetic u Example: calendars u Example: color/type/signs/terms

10. 10 HFWEB June 3, 1999 Localization u Small-scale communities with preferred jargon, signs, rituals u Affinity group example: USA Saturn owners u Social group example: Japanese housewives u Web group example (geographically dispersed): MP3.com

11. 11 HFWEB June 3, 1999 Business Challenges u Determine optimum characteristics: relies on market and user data u Assist and appeal to target markets: achieves short-term and long-term success u Avoid too many variations: wastes time and money

12. 12 HFWEB June 3, 1999 3. Globalization Design Process u Plan: include GD issues in all steps u Research: investigate sets of users u Analyze: determine key criteria, targets u Design: visualize alternatives u Implement: use tools that facilitate variations u Evaluate: test prototypes with user sets u Document: include GD guideline, specs

13. 13 HFWEB June 3, 1999 4. General Guidelines for Globalization u User demographics u Technology u Metaphors u Mental models u Navigation u Interaction u Appearance

14. 14 HFWEB June 3, 1999 User demographics u Identify markets and segments u Identify significant differences u Identify increased sales with variations u Identify savings by re-use of UI+IV attributes

15. 15 HFWEB June 3, 1999 Technology u Determine appropriate equipment for target markets u Issues: platforms, browsers, speed, scripts, fonts, file formats, et.

16. 16 HFWEB June 3, 1999 Metaphors u Determine optimum number for markets u Debug miscommunication, misunderstandings u Revise for national, cultural differences u Example (Chavan, India): books, chapters, pages vs. desktops, folders, files

17. 17 HFWEB June 3, 1999 Mental models u Determine optimum organizations for markets u Example: baseball vs. soccer in sports category

18. 18 HFWEB June 3, 1999 Navigation u Determine optimum processes for markets u Example: USA Latin-American, African- American preferences for assistance with telephone services

19. 19 HFWEB June 3, 1999 Interaction u Determine optimum variations for markets, inc. multi-modal u Example: text-only vs. graphics-rich access speeds u Example: Japan/Europe vs. USA styles u Classical Errors: Euro-Disneyland

20. 20 HFWEB June 3, 1999 Appearance u Determine optimum variations for markets u Example: High-density text/imagery acceptance for Asian-script users u Classical errors: Chevy Nova, Microsoft India/Pakistan time-zone map flap

21. 21 HFWEB June 3, 1999 5. Specific Guidelines for Appearance u Layout u Icons and symbols u Typography u Color u Aesthetics u Language and verbal style

22. 22 HFWEB June 3, 1999 Layout u Arrange and orient text, menus, tables, graphics, panes, windows for language direction u Westerners example: Arabia.On.Line u Revise controls, sentence-layouts of forms for language syntax u Example: English/French imbedded verbs vs. German verbs often at end

23. 23 HFWEB June 3, 1999 Example: Arabia.On.Line

24. 24 HFWEB June 3, 1999 Icons and Symbols u Avoid text: language, alphabet changes u Vary for clarity within nations, cultures Example: Planet Sabre’s mailbox icons u Consider appeal of “exotic” forms u Consider using international signs u Use appropriate, legal signs Examples: equipment, Smiley face, Mickey Mouse ™

25. 25 HFWEB June 3, 1999 Example: Sabre’s Planet Sabre Mailbox Icons

26. 26 HFWEB June 3, 1999 Example: International Signs

27. 27 HFWEB June 3, 1999 Example: E-Mail Emoticons u US/EuropeanJapanese :-) Regular smile(´`_´`) Reg smile :-( Sad(´`´`;) Cold sweat :-)) Very Happy(´`o´`) Happy Source: New York Times, 12 August 1996

28. 28 HFWEB June 3, 1999 Typography u Use widely available fonts u Use appropriate formats for numbers, currency, time, physical measurements: – 1,234, 567.89 vs 1.234.567,89 vs. 1 234 – 8 pm vs. 20:00 – May 22, 2002; 22 May 2002; 2002.05.22 vs. Imperial Heisei, or H13 (Japan)

29. 29 HFWEB June 3, 1999 Color u Follow perceptual guides for legibility, warm/cool, 5±2 variations u National, cultural, religious usage u Sacred Examples: white/blue/gold (Western) vs. green/blue (Arab) vs. yellow (Buddhist) u Consider attitudes toward high- vs low- chroma (pastel) colors

30. 30 HFWEB June 3, 1999 Example: Color Sets u Sacred Colors u High- vs Low-Chroma Colors

31. 31 HFWEB June 3, 1999 Aesthetics: Dionysus/Apollo u Cultural preferences for layout, textures, patterns, colors u Europe/USA/Chinese/Japanese/ Indian architecture, painting u Traditional vs popular styles: Japan: highest = B+W, asymm. balance u Specific attitudes: body parts, Harel, Prabhu research in China, Japan

32. 32 HFWEB June 3, 1999 Ex: Finnish Backgrounds

33. 33 HFWEB June 3, 1999 Language and Verbal style u Use appropriate languages, alphabets u Consider lengths of text, spelling, abbreviations, sorting u A-Z Sort: AÅ (France), ZÅ (Finland) u Use of hyphens, emphasis, quotes, double quotes u Examples: >, “ “, ‘ ‘, Italic

34. 34 HFWEB June 3, 1999 6. Conclusion u Web UI+IV design is immediately global u Develop specs per target markets u Resources exist u Design, evaluate, document variations

35. 35 HFWEB June 3, 1999 A Challenge: Bone vs. Bottle

36. 36 HFWEB June 3, 1999 Acknowledgements u Stephanidis, User Interfaces for All chapter u Del Galdo, Nielsen, Fernandes references u Prabhu, Kurosu research

37. 37 HFWEB June 3, 1999 List Servers u ACM/SIGCHI Intercultural listserve: chi-intercultural@acm.org Moderator: Donald Day,d.day@acm.org www.HCIBib.org//SIGCHI/Intercultural u Non-sponsored intercultural research: Cross-L, University of Denver Owner: Roberto Evaristo For info: Donald Day, d.day@acm.org

38. 38 HFWEB June 3, 1999 Other Info Sources u Cross-cultural color: wwwColorTool.com u Stephanidis, ed. User Interfaces for All, Lawrenc Erlbaum Associates, 1999 u IWIPS99; IWIPS00, 13-15 July 2000 u CHI99 SIG; HCII99: Cultural Diversity Panel August 1999, Munich  Simple Eng:www.userlab.com/SE.html

39. 39 HFWEB June 3, 1999 Selected References  DelGaldo and Nielsen, ed., International User Interfaces, 1996  Fernandes, Global Interf. Design, 1995  Marcus, "Internat. and Intercult. UIs," in UIs. for All, Stephanidis, ed., 1999  Nielsen, ed., Designing User Interfaces or International Use, 1990  Waters, Universal Web Design, 1997

40. 40 HFWEB June 3, 1999