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

HFWEB June 3, 1999

Presentation Summary

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

3

HFWEB June 3, 1999

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

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

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

7

HFWEB June 3, 1999

2. Definition of Globalization

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

Geographic, political, linguistic Example: ISO CRT-color, icon, and UI

standards Example: Canadian bilingual

requirements Example: Currency, time, physical

measurements

9

HFWEB June 3, 1999

Intercultural

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

10

HFWEB June 3, 1999

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

11

HFWEB June 3, 1999

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

12

HFWEB June 3, 1999

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

13

HFWEB June 3, 1999

4. General Guidelines for Globalization

User demographics Technology Metaphors Mental models Navigation Interaction Appearance

14

HFWEB June 3, 1999

User demographics

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

attributes

15

HFWEB June 3, 1999

Technology

Determine appropriate equipment for target markets

Issues: platforms, browsers, speed, scripts, fonts, file formats, et.

16

HFWEB June 3, 1999

Metaphors

Determine optimum number for markets Debug miscommunication,

misunderstandings Revise for national, cultural differences Example (Chavan, India): books,

chapters, pages vs. desktops, folders, files

17

HFWEB June 3, 1999

Mental models

Determine optimum organizations for markets

Example: baseball vs. soccer in sports category

18

HFWEB June 3, 1999

Navigation

Determine optimum processes for markets

Example: USA Latin-American, African-American preferences for assistance with telephone services

19

HFWEB June 3, 1999

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

20

HFWEB June 3, 1999

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

21

HFWEB June 3, 1999

5. Specific Guidelines for Appearance

Layout Icons and symbols Typography Color Aesthetics Language and verbal style

22

HFWEB June 3, 1999

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

23

HFWEB June 3, 1999

Example: Arabia.On.Line

24

HFWEB June 3, 1999

Icons and Symbols Avoid text: language, alphabet changes Vary for clarity within nations, cultures

Example: Planet Sabre’s mailbox icons Consider appeal of “exotic” forms Consider using international signs 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: E-Mail Emoticons

US/European Japanese

:-) Regular smile (´`_´`) Reg smile:-( Sad (´`´`;) Cold sweat:-)) Very Happy (´`o´`) Happy

Source: New York Times, 12 August 1996

28

HFWEB June 3, 1999

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)

29

HFWEB June 3, 1999

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

30

HFWEB June 3, 1999

Example: Color Sets

Sacred Colors

High- vs Low-Chroma Colors

31

HFWEB June 3, 1999

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

32

HFWEB June 3, 1999

Ex: Finnish Backgrounds

33

HFWEB June 3, 1999

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

34

HFWEB June 3, 1999

6. Conclusion

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

35

HFWEB June 3, 1999

A Challenge: Bone vs. Bottle

QuickTime™ and aPhoto - JPEG decompressor

are needed to see this picture.

36

HFWEB June 3, 1999

Acknowledgements

Stephanidis, User Interfaces for All chapter

Del Galdo, Nielsen, Fernandes references

Prabhu, Kurosu research

37

HFWEB June 3, 1999

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

38

HFWEB June 3, 1999

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

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