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

5 HFWEB June 3, Definition of Globalization u Globalization issues and UI+IV Design: International Intercultural Localization

6 HFWEB June 3, 1999 International Issues u Geographic, political, linguistic u Example: ISO CRT-color and sign standards u Example: Canadian bilingual requirements u Example: Currency, time, physical measurements

7 HFWEB June 3, 1999 Intercultural u Religious, historical, aesthetic u Example: calendars u Example: color/type/signs/terms

8 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

9 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

10 HFWEB June 3, Globalization Design Process u Plan: include G 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 G guideline, specs

11 HFWEB June 3, General Guidelines for Globalization u User demographics u Technology u Metaphors u Mental models u Navigation u Interaction u Appearance

12 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

13 HFWEB June 3, 1999 Technology u Determine appropriate equipment for target markets u Issues: platforms, browsers, speed, scripts, fonts, file formats, et.

14 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

15 HFWEB June 3, 1999 Mental models u Determine optimum organizations for markets u Example: baseball vs. soccer in sports category

16 HFWEB June 3, 1999 Navigation u Determine optimum processes for markets u Example: USA Latin-American, African- American preferences for assistance with telephone services

17 HFWEB June 3, 1999 Interaction u Determine optimum variations for markets u Example: text-only vs. graphics-rich access speeds u Example: Japan/Europe vs. USA styles u Classical Errors: Euro-Disneyland

18 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

19 HFWEB June 3, Specific Guidelines for Appearance u Layout u Icons and symbols u Typography u Color u Aesthetics u Language and verbal style

20 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

21 HFWEB June 3, 1999 Example: Arabia.On.Line

22 HFWEB June 3, 1999 Icons and Symbols u Avoid text: language, alphabet changes u Vary for clarity within nations, cultures u Example: Planet Sabre’s mailbox icons u Consider appeal of “exotic” forms u Consider using international signs u Use appropriate, legal signs u 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: Emoticons u US/EuropeanJapanese :-)Regular smile(´`_´`) Reg smile :-( Sad(´`´`;) Cold sweat :-))Very Happy(´`o´`) Happy Source: New York Times, 12 August 1996

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

27 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

28 HFWEB June 3, 1999 Example: Color Sets u Sacred Colors u High- vs Low-Chroma Colors

29 HFWEB June 3, 1999 Aesthetics u Cultural preferences for layout, textures, patterns, colors: u N. vs. S. Europe/USA u Chinese vs. Jap. architecture, painting u Traditional Japanese example: highest = B+W, asymmetric balance u 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 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

32 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

33 HFWEB June 3, 1999 Acknowledgements u Stephanidis, User Interfaces for All chapter u Del Galdo, Nielsen, Fernandes references u 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