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, [email protected], 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