global ui design for the web: war (and peace) stories of domination and democracy
DESCRIPTION
Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy. Aaron Marcus, President Aaron Marcus and Associates, Inc. - PowerPoint PPT PresentationTRANSCRIPT
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
Global UI Design for the Web
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
Global UI Design for the Web
UI Design in Online Servicesand the Web
Rapid international growth: 1995-98
Rapidly developing technology and key players
Non-standard user interfaces
Global UI Design for the Web
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
Global UI Design for the Web
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
Global UI Design for the Web
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
Global UI Design for the Web
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
Global UI Design for the Web
Examples of Past Challengesof Globalization
Latin American Chevy Nova
French Disneyland
Japanese tonic: Pure Sweat
Global UI Design for the Web
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
Global UI Design for the Web
Components of Globalizationfor User Interfaces: 2/2
Look: Appearance characteristics (sight, sound)
Feel: Interaction techniques
Knowledge Visualization: Specializedcharts, maps, diagrams
Global UI Design for the Web
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
Global UI Design for the Web
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"
Global UI Design for the Web
VGI Example 1
Global UI Design for the Web
VGI Example 2
Global UI Design for the Web
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
Global UI Design for the Web
Introduction, 1/2: Initial Screen
Global UI Design for the Web
Introduction, 2/2:California Map
Global UI Design for the Web
Switch for User Difference:Route Guidance, Selector
Global UI Design for the Web
View for Icon-Lovers:Route Guidance, Arrow
Global UI Design for the Web
View for Map-Lovers:Route Guidance, Map
Global UI Design for the Web
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
Global UI Design for the Web
Prodigy Image 1: Leggo metaphor (International)
Global UI Design for the Web
Prodigy Image 2: Child's room metaphor
Global UI Design for the Web
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
Global UI Design for the Web
African-American's GUI
Global UI Design for the Web
Women's GUI
Global UI Design for the Web
Women's GUI, Revised
Global UI Design for the Web
Early New World Example: Nynex Yellow Pages
Confusion of mental model
Implications for international users
Global UI Design for the Web
Online Services Example 1: Nynex Yellow Pages: Database
Global UI Design for the Web
Early New World Example:HotWired
Obscure icons and terminology
International issues: metaphors, mental models, navigation, as well as look and feel
Global UI Design for the Web
Online Services Example 2: HotWired: Publication
Global UI Design for the Web
Online Services Example 3:HotWired: Recent Design
Global UI Design for the Web
Oracle World-Wide Education
AM+A prepared prototype UI designguidelines for Web-based training
International issues: differentlearning strategies not examined
Global UI Design for the Web
Oracle Example
Global UI Design for the Web
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
Global UI Design for the Web
Planet SABRE: Version 4
Global UI Design for the Web
Planet SABRE: Customizer 6
Global UI Design for the Web
Planet SABRE: Customizer 7
Global UI Design for the Web
Example of Web screen
Global UI Design for the Web
New World Example:Arabia.On.Line Website
International users
Arabic culture
International issues: direction, color
Global UI Design for the Web
Arabia.On.Line: Ex 1
Global UI Design for the Web
Arabia.On.Line: Ex 2
Global UI Design for the Web
New World Example:Yahoo! Mental Model Variants
Organization of primary concepts variesamong nation/cultures
Variations mandatory, not nice-to-have for economic viability
Global UI Design for the Web
Yahoo!: American Version
Global UI Design for the Web
Yahoo!: German Version
Global UI Design for the Web
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
Global UI Design for the Web
Example: CVU Currently
Global UI Design for the Web
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
Global UI Design for the Web
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?
Global UI Design for the Web
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?
Global UI Design for the Web
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?
Global UI Design for the Web
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
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