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

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 HFWEB June 3, 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 HFWEB June 3, 1999 Example: A Present from India

5 HFWEB June 3, 1999 Example: Inside the Box

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 HFWEB June 3, Definition of Globalization u Globalization issues and UI+IV Design: International: standardized, “universal” Intercultural: differences between two Localization: customized, part or whole

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 HFWEB June 3, 1999 Intercultural u Religious, historical, aesthetic u Example: calendars u Example: color/type/signs/terms

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 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 HFWEB June 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 HFWEB June 3, General Guidelines for Globalization u User demographics u Technology u Metaphors u Mental models u Navigation u Interaction u Appearance

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 HFWEB June 3, 1999 Technology u Determine appropriate equipment for target markets u Issues: platforms, browsers, speed, scripts, fonts, file formats, et.

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 HFWEB June 3, 1999 Mental models u Determine optimum organizations for markets u Example: baseball vs. soccer in sports category

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 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 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 HFWEB June 3, Specific Guidelines for Appearance u Layout u Icons and symbols u Typography u Color u Aesthetics u Language and verbal style

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 HFWEB June 3, 1999 Example: Arabia.On.Line

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 HFWEB June 3, 1999 Example: Sabre’s Planet Sabre Mailbox Icons

26 HFWEB June 3, 1999 Example: International Signs

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

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

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 HFWEB June 3, 1999 Example: Color Sets u Sacred Colors u High- vs Low-Chroma Colors

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 HFWEB June 3, 1999 Ex: Finnish Backgrounds

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 HFWEB June 3, Conclusion u Web UI+IV design is immediately global u Develop specs per target markets u Resources exist u Design, evaluate, document variations

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

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

37 HFWEB June 3, 1999 List Servers u ACM/SIGCHI Intercultural listserve: Moderator: Donald u Non-sponsored intercultural research: Cross-L, University of Denver Owner: Roberto Evaristo For info: Donald Day,

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, July 2000 u CHI99 SIG; HCII99: Cultural Diversity Panel August 1999, Munich  Simple Eng:

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 HFWEB June 3, 1999