# Presentation: 303025

## 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, NYAaron@AMandA.com, www.AMandA.com

## Presentation Summary

- 1. Introduction
- 2. Definition of Globalization
- 3. Globalization Design Process
- 4. General Guidelines for Globalization
- 5. Specific Guidelines for Appearance
- 6. Conclusion

## 1. Introduction

- Web is global distribution of products and services
- User-interface design improves performance and appeal
- User diversity: demographics and individual needs/wants
- User-interface design issues are complex and challenging

## Example: A Present from India

## Example: Inside the Box

## User Interfaces

- Content and tools = data and functions
- Information visualization = significant aspect
- UI+IV = user interface, including information visualization
- Primary components: Metaphors, mental models, navigation, interaction, appearance

## 2. Definition of Globalization

- Globalization issues and UI+IV Design:
- International: standardized, “universal”
- Intercultural: differences between two
- Localization: customized, part or whole

## International Issues

- Geographic, political, linguistic
- Example: ISO CRT-color,  icon, and UI standards
- Example: Canadian bilingual requirements
- Example: Currency, time, physical measurements

## Intercultural

- Religious, historical, aesthetic
- Example: calendars
- Example: color/type/signs/terms

## Localization

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

## Business Challenges

- Determine optimum characteristics: relies on market and user data
- Assist and appeal to target markets: achieves short-term and long-term success
- Avoid too many variations: wastes time and money

## 3. Globalization Design Process

- Plan: include GD issues in all steps
- Research: investigate sets of users
- Analyze: determine key criteria, targets
- Design: visualize alternatives
- Implement: use tools that facilitate variations
- Evaluate: test prototypes with user sets
- Document: include GD guideline, specs

## 4. General Guidelines for Globalization

- User demographics
- Technology
- Metaphors
- Mental models
- Navigation
- Interaction
- Appearance

## User demographics

- Identify markets and segments
- Identify significant differences
- Identify increased sales with variations
- Identify savings by re-use of UI+IV attributes

## Technology

- Determine appropriate equipment for target markets
- Issues: platforms, browsers, speed, scripts, fonts, file formats, et.

## Metaphors

- Determine optimum number for markets
- Debug miscommunication, misunderstandings
- Revise for national, cultural differences
- Example (Chavan, India): books, chapters, pages vs. desktops, folders, files

## Mental models

- Determine optimum organizations for markets
- Example: baseball vs. soccer in sports category

## Navigation

- Determine optimum processes for markets
- Example: USA Latin-American, African-American preferences for assistance with telephone services

## Interaction

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

## Appearance

- Determine optimum variations for markets
- Example: High-density text/imagery acceptance for Asian-script users
- Classical errors: Chevy Nova, Microsoft India/Pakistan time-zone map flap

## 5. Specific Guidelines for Appearance

- Layout
- Icons and symbols
- Typography
- Color
- Aesthetics
- Language and verbal style

## Layout

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

## Example: Arabia.On.Line

## Icons and Symbols

- Avoid text: language, alphabet changes
- Vary for clarity within nations, culturesExample: Planet Sabre’s mailbox icons
- Consider appeal of “exotic” forms
- Consider using international signs
- Use appropriate, legal signsExamples: equipment, Smiley face, Mickey Mouse TM

## Example: Sabre’s Planet Sabre Mailbox Icons

## Example: International Signs

## Example: E-Mail Emoticons

- US/European		Japanese:-) 	 Regular smile		( ́`_ ́`)  Reg smile:-( 	 Sad				( ́` ́`;)   Cold sweat:-))	 Very Happy		( ́`o ́`)  HappySource: *New York Times*, 12 August 1996

## Typography

- Use widely available fonts
- 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)

## Color

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

## Example: Color Sets

- Sacred Colors
- High-  vs  Low-Chroma Colors

## Aesthetics: Dionysus/Apollo

- Cultural preferences for layout, textures, patterns, colors
- Europe/USA/Chinese/Japanese/ Indian architecture, painting
- Traditional  vs popular styles: Japan: highest = B+W, asymm. balance
- Specific attitudes: body parts, Harel, Prabhu research in China, Japan

## Ex: Finnish Backgrounds

## Language and Verbal style

- Use appropriate languages, alphabets
- Consider lengths of text, spelling, abbreviations, sorting
- A-Z Sort: AÅ (France), ZÅ (Finland)
- Use of hyphens, emphasis, quotes, double quotes
- Examples: << >>, “ “, ‘ ‘, *Italic*

## 6. Conclusion

- Web UI+IV design is immediately global
- Develop specs per target markets
- Resources exist
- Design, evaluate, document variations

## A Challenge: Bone vs. Bottle

## Acknowledgements

- Stephanidis, *User Interfaces for All* chapter
- Del Galdo, Nielsen, Fernandes references
- Prabhu, Kurosu research

## List Servers

- ACM/SIGCHI Intercultural listserve:chi-intercultural@acm.orgModerator: Donald Day,d.day@acm.orgwww.HCIBib.org//SIGCHI/Intercultural
- Non-sponsored intercultural research:Cross-L, University of DenverOwner: Roberto EvaristoFor info: Donald Day, d.day@acm.org

## Other Info Sources

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

## 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