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, NYAaron@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

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

5

HFWEB June 3, 1999

2. Definition of Globalization

Globalization issues and UI+IV Design:

International Intercultural Localization

6

HFWEB June 3, 1999

International Issues

Geographic, political, linguistic Example: ISO CRT-color and sign

standards Example: Canadian bilingual

requirements Example: Currency, time, physical

measurements

7

HFWEB June 3, 1999

Intercultural

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

8

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

9

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

10

HFWEB June 3, 1999

3. Globalization Design Process

Plan: include G 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 G guideline, specs

11

HFWEB June 3, 1999

4. General Guidelines for Globalization

User demographics Technology Metaphors Mental models Navigation Interaction Appearance

12

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

13

HFWEB June 3, 1999

Technology

Determine appropriate equipment for target markets

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

14

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

15

HFWEB June 3, 1999

Mental models

Determine optimum organizations for markets

Example: baseball vs. soccer in sports category

16

HFWEB June 3, 1999

Navigation

Determine optimum processes for markets

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

17

HFWEB June 3, 1999

Interaction

Determine optimum variations for markets

Example: text-only vs. graphics-rich access speeds

Example: Japan/Europe vs. USA styles Classical Errors: Euro-Disneyland

18

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

19

HFWEB June 3, 1999

5. Specific Guidelines for Appearance

Layout Icons and symbols Typography Color Aesthetics Language and verbal style

20

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

21

HFWEB June 3, 1999

Example: Arabia.On.Line

22

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 ™

23

HFWEB June 3, 1999

Example: Sabre’s Planet Sabre Mailbox Icons

24

HFWEB June 3, 1999

Example: International Signs

25

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

26

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)

27

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

28

HFWEB June 3, 1999

Example: Color Sets

Sacred Colors

High- vs Low-Chroma Colors

29

HFWEB June 3, 1999

Aesthetics

Cultural preferences for layout, textures, patterns, colors:

N. vs. S. Europe/USA Chinese vs. Jap. architecture, painting Traditional Japanese example:

highest = B+W, asymmetric balance Specific attitudes: body parts, Prabhu

research in China, Japan

30

HFWEB June 3, 1999

Ex: Finnish Backgrounds

31

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

32

HFWEB June 3, 1999

6. Conclusion

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

33

HFWEB June 3, 1999

Acknowledgements

Stephanidis, User Interfaces for All chapter

Del Galdo, Nielsen, Fernandes references

Prabhu, Kurosu research

34

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

for International Use, 1990 Waters, Universal Web Design, 1997