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

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

Documents

domination december 2012

republicanism domination

chapter 3 domination and independent domination in...

building aspects of democracy before democracy ·...

hordes domination

domination oct 2013

automation domination

domination - february 2013

rise of liberal democracy in britain: 1780-1918 ·...

panter - domination ( solo )

democracy vs domination of money power

pivorak.javascript.global domination

domination - september 2013

domination, contention,

animation domination

(1) world domination

revolution or domination

page one domination

world domination

blues domination