global ui design for the web: war (and peace) stories of domination and democracy

Global UI Design for the Web

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 <[email protected]>New York City, NY, Tel: 212-220-8735 Email: Edward Guttman <[email protected]>Web: http://www.AMandA.com


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


UI Design in Online Servicesand the Web

Rapid international growth: 1995-98

Rapidly developing technology and key players

Non-standard user interfaces


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


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


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


Additional Issues: An Examplefrom the Internet E-mail Culture

US/European Japanese

:-) Reg. smile (´`_´`) Reg. smile

:-( Sad (´`´`;) Cold sweat

:-)) Very Happy (´`o´`) Happy

Source: New York Times, 12 August 1996


Examples of Past Challengesof Globalization

Latin American Chevy Nova

French Disneyland

Japanese tonic: Pure Sweat


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


Components of Globalizationfor User Interfaces: 2/2

Look: Appearance characteristics (sight, sound)

Feel: Interaction techniques

Knowledge Visualization: Specializedcharts, maps, diagrams


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


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"


VGI Example 1


VGI Example 2


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


Introduction, 1/2: Initial Screen


Introduction, 2/2:California Map


Switch for User Difference:Route Guidance, Selector


View for Icon-Lovers:Route Guidance, Arrow


View for Map-Lovers:Route Guidance, Map


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


Prodigy Image 1: Leggo metaphor (International)


Prodigy Image 2: Child's room metaphor


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


African-American's GUI


Women's GUI


Women's GUI, Revised


Early New World Example: Nynex Yellow Pages

Confusion of mental model

Implications for international users


Online Services Example 1: Nynex Yellow Pages: Database


Early New World Example:HotWired

Obscure icons and terminology

International issues: metaphors, mental models, navigation, as well as look and feel


Online Services Example 2: HotWired: Publication


Online Services Example 3:HotWired: Recent Design


Oracle World-Wide Education

AM+A prepared prototype UI designguidelines for Web-based training

International issues: differentlearning strategies not examined


Oracle Example


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


Planet SABRE: Version 4


Planet SABRE: Customizer 6


Planet SABRE: Customizer 7


Example of Web screen


New World Example:Arabia.On.Line Website

International users

Arabic culture

International issues: direction, color


Arabia.On.Line: Ex 1


Arabia.On.Line: Ex 2


New World Example:Yahoo! Mental Model Variants

Organization of primary concepts variesamong nation/cultures

Variations mandatory, not nice-to-have for economic viability


Yahoo!: American Version


Yahoo!: German Version


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


Example: CVU Currently


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


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?


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?


Web UI Designer'sFundamental Task

Provide the right user interfaces and information visualizaton

For the right content to the right customers at the right time

By managing expectation and surprise

How can this be done cost-effectively forsmall, medium, and large businesses?


Sources for Global UI Web Design

Del Galdo and Nielsen, ed., International User Interfaces, 1996

Fernandes, Global Interface Design, 1995 Nielsen, ed., Designing User Interfaces

for International Use, 1990 Pierce, The International Pictograms

Standard, ST Publications, 1996

HCII-97 SIGCHI- and Web-97, 98


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 <[email protected]>New York City, NY, Tel: 212-220-8735 Email: Edward Guttman <[email protected]>Web: http://www.AMandA.com

global ui design for the web: war (and peace) stories of domination and democracy

Documents