1 / 53

Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy

Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy. Aaron Marcus, President Aaron Marcus and Associates, Inc.

mili
Download Presentation

Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy

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. Global UI Design for the Web: War (and Peace) Stories ofDomination and Democracy Aaron Marcus, PresidentAaron Marcus and Associates, Inc. Emeryville, CA, Tel: 510-601-0994, Ext 19Email: Aaron Marcus <Aaron@AMandA.com>New York City, NY, Tel: 212-220-8735 Email: Edward Guttman <Ed@AMandA.com>Web: http://www.AMandA.com

  2. AM+A and UI Design • 15 Years old, 200 GUIs, four books • Clients in Canada, England, Finland, Israel, Japan, Jordan, Singapore • Experienced with productivity tools,multimedia, and online serviceson most platforms and GUIs forcorporate, government, education,and consumer products and services

  3. UI Design in Online Servicesand the Web • Rapid international growth: 1995-98 • Rapidly developing technology and key players • Non-standard user interfaces

  4. The Challenge: User Interface Design for International Users • Analyzing users, thinking globally,acting locally • Designing user-interface designcomponents appropriately to users, technology, and content • Evaluating usability • Seeking universality, respecting diversity

  5. Typical Localization Concerns: 1/2 • Language, spelling, grammar, style:House vs. Haus vs. maisonCenter vs. centreJanuary 14, 1976 vs. 14 January 19761:00 pm vs. 13:00 • Punctuation, measuring units:" " vs ' ', << >>, < >$ vs. £, ¥ , DMFeet vs meters

  6. Typical Localization Concerns: 2/2 • Character sets; directions:Left to right, right to left, top to bottom • Signs and colorsFew universals: Pictograms, traffic lights • Time and space:Calendar and holidaysWeekendDensity of information

  7. Additional Issues: An Examplefrom the Internet E-mail Culture • US/EuropeanJapanese:-) Reg. smile (´`_´`) Reg. smile:-( Sad (´`´`;) Cold sweat:-)) Very Happy (´`o´`) HappySource: New York Times, 12 August 1996

  8. Examples of Past Challengesof Globalization • Latin American Chevy Nova • French Disneyland • Japanese tonic: Pure Sweat

  9. Components of Globalizationfor User Interfaces: 1/2 • Metaphors: Fundamental images, terms, and concepts • Mental Model: Organization of data, functions, tasks, roles, people, and groups • Navigation: Movement in mental model via menus, dialogue, controls

  10. Components of Globalizationfor User Interfaces: 2/2 • Look: Appearance characteristics (sight, sound) • Feel: Interaction techniques • Knowledge Visualization: Specializedcharts, maps, diagrams

  11. Some Examples from the Battlefield • Culture bias is pandemic for all UI design components • Culture biases may be helpful, harmful, or neutral • Globalization vs. localization not a new issue, but now more dramatic

  12. Old World Example: VisualizingGlobal Energy Interdependence • AM, with international team, designed audio-visual content and form for international audience at East-West Center, Honololu • International issues: little/no text, icons,layout language-independent, use ofcharts/maps/diagrams, usability • 6 months to develop 100 "screens"

  13. VGI Example 1

  14. VGI Example 2

  15. Old World Example: Motorola's ADVANCE In-Car Navigation System • AM+A designed look/feel and consulted on mental model/navigation of a consumer product for trip planning, vehicle navigation, and map viewing • Route guidance appears as maps, arrows, or text for different cognitive preferences • International issues: differences cross-culturally were unexamined

  16. Introduction, 1/2: Initial Screen

  17. Introduction, 2/2:California Map

  18. Switch for User Difference:Route Guidance, Selector

  19. View for Icon-Lovers:Route Guidance, Arrow

  20. View for Map-Lovers:Route Guidance, Map

  21. Old World Example: Prodigy • AM+A designed variations of metaphorsand prototypes for revised layout,color, typography, and graphics, then recommended conventions for Prodigy's new Windows user interface • International issues: imagerymay fit/not fit local culture

  22. Prodigy Image 1: Leggo metaphor (International)

  23. Prodigy Image 2: Child's room metaphor

  24. Old World Example:Cultural Diversity in GUIs • Apple took 1-2 years to designIndian Newton UIs in 1995-96(Grisedale, SIGCHI-97 Proceedings) • Untested AM+A prototype of 1993:African-American's GUI • Untested AM+A prototype of 1993:Women's GUI

  25. African-American's GUI

  26. Women's GUI

  27. Women's GUI, Revised

  28. Early New World Example: Nynex Yellow Pages • Confusion of mental model • Implications for international users

  29. Online Services Example 1: Nynex Yellow Pages: Database

  30. Early New World Example:HotWired • Obscure icons and terminology • International issues: metaphors, mental models, navigation, as well as look and feel

  31. Online Services Example 2: HotWired: Publication

  32. Online Services Example 3:HotWired: Recent Design

  33. Oracle World-Wide Education • AM+A prepared prototype UI designguidelines for Web-based training • International issues: differentlearning strategies not examined

  34. Oracle Example

  35. New World Paradigm: Planet SABRE Online Service • AM+A designed variable UI components of metaphors, data visualization for travel agents' reservation system • International issues: variable text, icons, navigation, but not metaphors, mentalmodels? • Transference to Web: Travelocity

  36. Planet SABRE: Version 4

  37. Planet SABRE: Customizer 6

  38. Planet SABRE: Customizer 7

  39. Example of Web screen

  40. New World Example:Arabia.On.Line Website • International users • Arabic culture • International issues: direction, color

  41. Arabia.On.Line: Ex 1

  42. Arabia.On.Line: Ex 2

  43. New World Example:Yahoo! Mental Model Variants • Organization of primary concepts variesamong nation/cultures • Variations mandatory, not nice-to-have for economic viability

  44. Yahoo!: American Version

  45. Yahoo!: German Version

  46. New World Example:California Virtual University • What constitutes brand identity? Value? • What representation for Hispanic, Asian,and other minority cultures? • Solving anti-technology social contextin user community may impactappearance, navigation, e.g., use of representational icons, constant global navigation

  47. Example: CVU Currently

  48. The Future: Megadoses of Data for World-Wide, Wired Tribes • Micro-audiences of differentiated, individualized users world-wide • Information merged with transactions, advertising, and entertainment • Megadoses of functions and data, tools and symbols • Changing metaphor marketplace

  49. Challenges for Globalizationof Web User-Interface Design, 1/2 • Many UIs need international variations for any or all components of metaphors, mental models, navigation, appearance, interaction: which components? at what scale? under whatconditions? • Developing a second alternative may takealmost as much time as the first: what is the ratio for the second? the third?

  50. Challenges for Globalizationof Web User-Interface Design, 2/2 • Tools do not facilitate development: what is needed? clip-content? templates? guidelines? • Projects often have no budgets for usability analysis, alternative designs, or evaluations because of lack of business case proof to drive priority higher: how can business be convinced?

More Related