1 / 40

Globalization and User-Interface Design for the Web

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. Presentation Summary. 1. Introduction 2. Definition of Globalization

tivona
Télécharger la présentation

Globalization and User-Interface Design for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. 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. 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. Example: A Present from India

  5. Example: Inside the Box

  6. 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. 2. Definition of Globalization • Globalization issues and UI+IV Design: • International: standardized, “universal” • Intercultural: differences between two • Localization: customized, part or whole

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

  9. Intercultural • Religious, historical, aesthetic • Example: calendars • Example: color/type/signs/terms

  10. 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. 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. 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. 4. General Guidelines for Globalization • User demographics • Technology • Metaphors • Mental models • Navigation • Interaction • Appearance

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

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

  16. 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. Mental models • Determine optimum organizations for markets • Example: baseball vs. soccer in sports category

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

  19. 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. 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. 5. Specific Guidelines for Appearance • Layout • Icons and symbols • Typography • Color • Aesthetics • Language and verbal style

  22. 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. Example: Arabia.On.Line

  24. 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 ™

  25. Example: Sabre’s Planet Sabre Mailbox Icons

  26. Example: International Signs

  27. Example: E-Mail Emoticons • US/European Japanese:-) Regular smile (´`_´`) Reg smile:-( Sad (´`´`;) Cold sweat:-)) Very Happy (´`o´`) HappySource: New York Times, 12 August 1996

  28. 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. 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. Example: Color Sets • Sacred Colors • High- vs Low-Chroma Colors

  31. 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. Ex: Finnish Backgrounds

  33. 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. 6. Conclusion • Web UI+IV design is immediately global • Develop specs per target markets • Resources exist • Design, evaluate, document variations

  35. A Challenge: Bone vs. Bottle

  36. Acknowledgements • Stephanidis, User Interfaces for All chapter • Del Galdo, Nielsen, Fernandes references • Prabhu, Kurosu research

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

More Related