Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Global UI Design for the Web Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy Aaron Marcus, President Aaron Marcus and."— Presentation transcript:

1 Global UI Design for the Web Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy Aaron Marcus, President Aaron Marcus and Associates, Inc. Emeryville, CA, Tel: 510-601-0994, Ext 19 Email: Aaron Marcus New York City, NY, Tel: 212-220-8735 Email: Edward Guttman Web: http://www.AMandA.com

2 Global UI Design for the Web AM+A and UI Design u15 Years old, 200 GUIs, four books  Clients in Canada, England, Finland, Israel, Japan, Jordan, Singapore  Experienced with productivity tools, multimedia, and online services on most platforms and GUIs for corporate, government, education, and consumer products and services

3 Global UI Design for the Web UI Design in Online Services and the Web uRapid international growth: 1995-98 uRapidly developing technology and key players uNon-standard user interfaces

4 Global UI Design for the Web The Challenge: User Interface Design for International Users uAnalyzing users, thinking globally, acting locally uDesigning user-interface design components appropriately to users, technology, and content uEvaluating usability uSeeking universality, respecting diversity

5 Global UI Design for the Web Typical Localization Concerns: 1/2 uLanguage, spelling, grammar, style: House vs. Haus vs. maison Center vs. centre January 14, 1976 vs. 14 January 1976 1:00 pm vs. 13:00 uPunctuation, measuring units: " " vs ' ', >, $ vs. £, ¥, DM Feet vs meters

6 Global UI Design for the Web Typical Localization Concerns: 2/2 uCharacter sets; directions: Left to right, right to left, top to bottom uSigns and colors Few universals: Pictograms, traffic lights uTime and space: Calendar and holidays Weekend Density of information

7 Global UI Design for the Web Additional Issues: An Example from the Internet E-mail Culture uUS/EuropeanJapanese :-) Reg. smile(´`_´`)Reg. smile :-( Sad(´`´`;)Cold sweat :-)) Very Happy(´`o´`)Happy Source: New York Times, 12 August 1996

8 Global UI Design for the Web Examples of Past Challenges of Globalization uLatin American Chevy Nova uFrench Disneyland uJapanese tonic: Pure Sweat

9 Global UI Design for the Web Components of Globalization for User Interfaces: 1/2 uMetaphors: Fundamental images, terms, and concepts uMental Model: Organization of data, functions, tasks, roles, people, and groups uNavigation: Movement in mental model via menus, dialogue, controls

10 Global UI Design for the Web Components of Globalization for User Interfaces: 2/2 uLook: Appearance characteristics (sight, sound) uFeel: Interaction techniques uKnowledge Visualization: Specialized charts, maps, diagrams

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

12 Global UI Design for the Web Old World Example: Visualizing Global Energy Interdependence uAM, with international team, designed audio-visual content and form for international audience at East-West Center, Honololu uInternational issues: little/no text, icons, layout language-independent, use of charts/maps/diagrams, usability u6 months to develop 100 "screens"

13 Global UI Design for the Web VGI Example 1

14 Global UI Design for the Web VGI Example 2

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

16 Global UI Design for the Web Introduction, 1/2: Initial Screen

17 Global UI Design for the Web Introduction, 2/2: California Map

18 Global UI Design for the Web Switch for User Difference: Route Guidance, Selector

19 Global UI Design for the Web View for Icon-Lovers: Route Guidance, Arrow

20 Global UI Design for the Web View for Map-Lovers: Route Guidance, Map

21 Global UI Design for the Web Old World Example: Prodigy uAM+A designed variations of metaphors and prototypes for revised layout, color, typography, and graphics, then recommended conventions for Prodigy's new Windows user interface uInternational issues: imagery may fit/not fit local culture

22 Global UI Design for the Web Prodigy Image 1: Leggo metaphor (International)

23 Global UI Design for the Web Prodigy Image 2: Child's room metaphor

24 Global UI Design for the Web Old World Example: Cultural Diversity in GUIs uApple took 1-2 years to design Indian Newton UIs in 1995-96 (Grisedale, SIGCHI-97 Proceedings) uUntested AM+A prototype of 1993: African-American's GUI uUntested AM+A prototype of 1993: Women's GUI

25 Global UI Design for the Web African-American's GUI

26 Global UI Design for the Web Women's GUI

27 Global UI Design for the Web Women's GUI, Revised

28 Global UI Design for the Web Early New World Example: Nynex Yellow Pages uConfusion of mental model uImplications for international users

29 Global UI Design for the Web Online Services Example 1: Nynex Yellow Pages: Database

30 Global UI Design for the Web Early New World Example: HotWired uObscure icons and terminology uInternational issues: metaphors, mental models, navigation, as well as look and feel

31 Global UI Design for the Web Online Services Example 2: HotWired: Publication

32 Global UI Design for the Web Online Services Example 3: HotWired: Recent Design

33 Global UI Design for the Web Oracle World-Wide Education uAM+A prepared prototype UI design guidelines for Web-based training uInternational issues: different learning strategies not examined

34 Global UI Design for the Web Oracle Example

35 Global UI Design for the Web New World Paradigm: Planet SABRE Online Service uAM+A designed variable UI components of metaphors, data visualization for travel agents' reservation system uInternational issues: variable text, icons, navigation, but not metaphors, mental models? uTransference to Web: Travelocity

36 Global UI Design for the Web Planet SABRE: Version 4

37 Global UI Design for the Web Planet SABRE: Customizer 6

38 Global UI Design for the Web Planet SABRE: Customizer 7

39 Global UI Design for the Web Example of Web screen

40 Global UI Design for the Web New World Example: Arabia.On.Line Website uInternational users uArabic culture uInternational issues: direction, color

41 Global UI Design for the Web Arabia.On.Line: Ex 1

42 Global UI Design for the Web Arabia.On.Line: Ex 2

43 Global UI Design for the Web New World Example: Yahoo! Mental Model Variants uOrganization of primary concepts varies among nation/cultures uVariations mandatory, not nice-to-have for economic viability

44 Global UI Design for the Web Yahoo!: American Version

45 Global UI Design for the Web Yahoo!: German Version

46 Global UI Design for the Web New World Example: California Virtual University uWhat constitutes brand identity? Value? uWhat representation for Hispanic, Asian, and other minority cultures? uSolving anti-technology social context in user community may impact appearance, navigation, e.g., use of representational icons, constant global navigation

47 Global UI Design for the Web Example: CVU Currently

48 Global UI Design for the Web The Future: Megadoses of Data for World-Wide, Wired Tribes  Micro-audiences of differentiated, individualized users world-wide uInformation merged with transactions, advertising, and entertainment  Megadoses of functions and data, tools and symbols  Changing metaphor marketplace

49 Global UI Design for the Web Challenges for Globalization of Web User-Interface Design, 1/2 uMany UIs need international variations for any or all components of metaphors, mental models, navigation, appearance, interaction: which components? at what scale? under what conditions? uDeveloping a second alternative may take almost as much time as the first: what is the ratio for the second? the third?

50 Global UI Design for the Web Challenges for Globalization of Web User-Interface Design, 2/2 uTools do not facilitate development: what is needed? clip-content? templates? guidelines? uProjects 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?

51 Global UI Design for the Web Web UI Designer's Fundamental Task uProvide the right user interfaces and information visualizaton uFor the right content to the right customers at the right time uBy managing expectation and surprise uHow can this be done cost-effectively for small, medium, and large businesses?

52 Global UI Design for the Web Sources for Global UI Web Design uDel Galdo and Nielsen, ed., International User Interfaces, 1996 uFernandes, Global Interface Design, 1995 uNielsen, ed., Designing User Interfaces for International Use, 1990 uPierce, The International Pictograms Standard, ST Publications, 1996 uHCII-97 uSIGCHI- and Web-97, 98

53 Global UI Design for the Web Global UI Design for the Web: War (and Peace) Stories of Domination and Democracy Aaron Marcus, President Aaron Marcus and Associates, Inc. Emeryville, CA, Tel: 510-601-0994, Ext 19 Email: Aaron Marcus New York City, NY, Tel: 212-220-8735 Email: Edward Guttman Web: http://www.AMandA.com


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

Similar presentations


Ads by Google