TechWiki - User contributions [en]

Design (Internationalization best practices)

2012-03-30T21:57:08Z

Clintchecketts: /* Code/feature isolation */

{{internationalization}}
'''Principle:''' World-ready product and UI '''design''' ensures that the localized product will look and function as expected by global users and simplifies management of the code base.

==When to start==
'''Best Practice:''' ''Address cultural sensitivity and localizability issues as early as possible.''

<Overview to be written - topics to include: covering the need for early application design to be flexible and allow for sizing and text length changing>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:'''

==Code/feature isolation==
'''Best Practice:''' ''Isolate language/culture-sensitive code or features to make code changes more manageable.''

Separate the implementation of the language specific functionality and requirements from the main code base by placing them in other modules. By keeping it separate from application logic, it is easier for developers that must maintain the code and add additional languages.

Isolating code intended for multicultural support simplifies design and maintenance. It also aids in ensuring that when work is performed on the multicultural modules that equivalent changes will occur on other related multicultural modules.

Application functionality where this is likely to occur is in searching, sorting, data entry, data storage, and display layout.

'''Roles, responsibilities, and examples:'''
* BA/IxD: Ensure that layout logic that is locale specific can be flexible enough to allow for changes due to string content.
* Developer: Separate out multilanguage support from main application logic. For example a section that may search based on lowercasing contents would need to separate out the logic of lower casing since differing locales require different techniques. If this logic is intermixed with the search logic it creates unneeded complexity.
* Tester: Test the multilanguage module separate from the main application to ensure that additions take in account the required supported languages.

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/d1.html IBM]

==Presentation controls==
'''Best Practice:''' ''Consider style sheets or other presentation controls as part of the UI.''

<Overview to be written - topics to include: allow swapping the stylesheet by locale, possibly split the stylesheet between colors, font and layout stylesheets>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a2.html IBM]

==Text in graphics==
'''Best Practice:''' ''Avoid text in graphics.''

<Overview to be written - topics to cover: techniques to overlay text with images, prefer client side overlays using, allow serverside image processing as a possible (but not preffered technique)>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==String buffers==
'''Best Practice:''' ''Watch the size of string buffers.''

<Overview to be written - this refers to code that allocates its own memory for storing strings, for example if a 4 character single-byte string is expected, and the user types in 3 single-byte characters and a double-byte character, the application has to allow for the differences. >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688118 Microsoft]

==Text expansion==
'''Best Practice:''' ''Design the UI to accommodate the text expansion that results from translation.''

<Overview to be written - cover examples like German that may be >20% longer than English equivalents, and Japanese that may require taller fontsizes>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a3.html IBM]

==Position dependency==
'''Best Practice:''' ''Enable functions that depend on UI element location to accommodate changes due to text expansion or mirroring.''

<Overview to be written - topics to cover: if elements are located differently due to right-to-left or if buttons are positioned due to priority then they may need to be inverted in alternate locales>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a4.html IBM]

==Colors==
'''Best Practice:''' ''Consider the cultural impacts of color.''

Color has culture-specific meaning. In a Western culture, we can give a '''word''' a 'Christmasy' feel simply by coloring it red and green. But that color combination may have other meanings or no meaning at all in other cultures. As we select the color pallet of our sites and products, we should be aware of how those choices will impact users of other cultures. Colors are so varied in their meanings from culture to culture that we may not be able to please everyone, but we should do our best not to make our message difficult to receive by choosing colors that could literally shade or distort our intent.

'''Roles, responsibilities, and examples:'''
* ''BA/IxD'': Understand not only the languages but the cultures of those who will use the product. Then consider cultural meanings of color as you establish your site or product color palette. Refer to the chart at the link below or any other appropriate resource. Examples include:
** Red -- excitement, danger, love, stop (Western); good luck, celebration (China); bad luck, death (Korea); purity (India);
** White -- brides, angels, good guys, doctors, peace (Western); white carnation symbolizes death (Japan); funerals (Eastern)
** Blue -- conservative, corporate (Western); defeat, trouble (Cherokees); color of heaven and spirituality (Iran)
** Yellow -- hope, caution, cowardice (Western); courage (Japan); nourishment (China); mourning (Egypt)
* ''Developer'': Implement colors as indicated by designers.
* ''Tester'': Check site or product colors for cultural mismatches.

'''Links:''' [http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ Colours in Cultures]

==Mobile/web resizing==
'''Best Practice:''' ''Accommodate mobile/web resizing issues.''

<Overview to be written - topics to cover: importance of reaching mobile audience and how developing a mobile version later if the application is not architected correctly that developing a mobile version would be a duplicate version an app. Possibly cover the need for touch integration (hover state not working) >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==Translation v. localization==
'''Best Practice:''' ''Architect solutions to appropriately use translated or localized content.''

<Overview to be written -topics to cover: what does this topic mean? What does 'use translated' mean?>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:'''

==UI controls==
'''Best Practice:''' ''Design the layout of UI controls for localizability.''

<Overview to be written - topics to cover- example: form elements whose labels wrap or overflow layout due to sizing differences >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==Icons and clip art==
'''Best Practice:''' ''Design icons and clip art for international users or facilitate their localization if necessary.''

<Overview to be written - be aware that some icons might mean something in one locale, but not convey the same meaning in another locale>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a8.html IBM]

Design (Internationalization best practices)

2012-03-30T21:38:21Z

Clintchecketts: /* Code/feature isolation */

{{internationalization}}
'''Principle:''' World-ready product and UI '''design''' ensures that the localized product will look and function as expected by global users and simplifies management of the code base.

==When to start==
'''Best Practice:''' ''Address cultural sensitivity and localizability issues as early as possible.''

<Overview to be written - topics to include: covering the need for early application design to be flexible and allow for sizing and text length changing>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:'''

==Code/feature isolation==
'''Best Practice:''' ''Isolate language/culture-sensitive code or features to make code changes more manageable.''

Separate the implementation of the language specific functionality and requirements from the main code base by placing them in other modules. By keeping it separate from application logic, it is easier for developers that must maintain the code and add additional languages.

Isolating code intended for multicultural support simplifies design and maintenance. It also aids in ensuring that when work is performed on the multicultural modules that equivalent changes will occur on other related multicultural modules.

Application functionality where this is likely to occur is in searching, sorting, data entry, data storage, display layout.

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/d1.html IBM]

==Presentation controls==
'''Best Practice:''' ''Consider style sheets or other presentation controls as part of the UI.''

<Overview to be written - topics to include: allow swapping the stylesheet by locale, possibly split the stylesheet between colors, font and layout stylesheets>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a2.html IBM]

==Text in graphics==
'''Best Practice:''' ''Avoid text in graphics.''

<Overview to be written - topics to cover: techniques to overlay text with images, prefer client side overlays using, allow serverside image processing as a possible (but not preffered technique)>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==String buffers==
'''Best Practice:''' ''Watch the size of string buffers.''

<Overview to be written - this refers to code that allocates its own memory for storing strings, for example if a 4 character single-byte string is expected, and the user types in 3 single-byte characters and a double-byte character, the application has to allow for the differences. >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688118 Microsoft]

==Text expansion==
'''Best Practice:''' ''Design the UI to accommodate the text expansion that results from translation.''

<Overview to be written - cover examples like German that may be >20% longer than English equivalents, and Japanese that may require taller fontsizes>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a3.html IBM]

==Position dependency==
'''Best Practice:''' ''Enable functions that depend on UI element location to accommodate changes due to text expansion or mirroring.''

<Overview to be written - topics to cover: if elements are located differently due to right-to-left or if buttons are positioned due to priority then they may need to be inverted in alternate locales>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a4.html IBM]

==Colors==
'''Best Practice:''' ''Consider the cultural impacts of color.''

Color has culture-specific meaning. In a Western culture, we can give a '''word''' a 'Christmasy' feel simply by coloring it red and green. But that color combination may have other meanings or no meaning at all in other cultures. As we select the color pallet of our sites and products, we should be aware of how those choices will impact users of other cultures. Colors are so varied in their meanings from culture to culture that we may not be able to please everyone, but we should do our best not to make our message difficult to receive by choosing colors that could literally shade or distort our intent.

'''Roles, responsibilities, and examples:'''
* ''BA/IxD'': Understand not only the languages but the cultures of those who will use the product. Then consider cultural meanings of color as you establish your site or product color palette. Refer to the chart at the link below or any other appropriate resource. Examples include:
** Red -- excitement, danger, love, stop (Western); good luck, celebration (China); bad luck, death (Korea); purity (India);
** White -- brides, angels, good guys, doctors, peace (Western); white carnation symbolizes death (Japan); funerals (Eastern)
** Blue -- conservative, corporate (Western); defeat, trouble (Cherokees); color of heaven and spirituality (Iran)
** Yellow -- hope, caution, cowardice (Western); courage (Japan); nourishment (China); mourning (Egypt)
* ''Developer'': Implement colors as indicated by designers.
* ''Tester'': Check site or product colors for cultural mismatches.

'''Links:''' [http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ Colours in Cultures]

==Mobile/web resizing==
'''Best Practice:''' ''Accommodate mobile/web resizing issues.''

<Overview to be written - topics to cover: importance of reaching mobile audience and how developing a mobile version later if the application is not architected correctly that developing a mobile version would be a duplicate version an app. Possibly cover the need for touch integration (hover state not working) >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==Translation v. localization==
'''Best Practice:''' ''Architect solutions to appropriately use translated or localized content.''

<Overview to be written -topics to cover: what does this topic mean? What does 'use translated' mean?>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:'''

==UI controls==
'''Best Practice:''' ''Design the layout of UI controls for localizability.''

<Overview to be written - topics to cover- example: form elements whose labels wrap or overflow layout due to sizing differences >

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://msdn.microsoft.com/en-us/goglobal/bb688120 Microsoft]

==Icons and clip art==
'''Best Practice:''' ''Design icons and clip art for international users or facilitate their localization if necessary.''

<Overview to be written - be aware that some icons might mean something in one locale, but not convey the same meaning in another locale>

'''Roles, responsibilities, and examples:'''
* BA/IxD: <to be written>
* Developer: <to be written>
* Tester: <to be written>

'''Links:''' [http://www-01.ibm.com/software/globalization/guidelines/a8.html IBM]

Design (Internationalization best practices)

2012-03-29T20:55:34Z

Clintchecketts: /* UI controls */

Design (Internationalization best practices)

2012-03-29T20:52:21Z

Clintchecketts: /* Icons and clip art */

Design (Internationalization best practices)

2012-03-29T20:51:00Z

Clintchecketts: /* String buffers */

Design (Internationalization best practices)

2012-03-29T20:44:11Z

Clintchecketts: /* Code/feature isolation */

Design (Internationalization best practices)

2012-03-29T20:36:29Z

Clintchecketts: /* Translation v. localization */

Design (Internationalization best practices)

2012-03-29T20:35:14Z

Clintchecketts: /* Mobile/web resizing */

Design (Internationalization best practices)

2012-03-29T20:31:39Z

Clintchecketts: /* Colors */

Design (Internationalization best practices)

2012-03-29T20:30:01Z

Clintchecketts: /* Position dependency */

Design (Internationalization best practices)

2012-03-29T20:27:55Z

Clintchecketts: /* When to start */

Design (Internationalization best practices)

2012-03-29T20:26:37Z

Clintchecketts: /* Text expansion */

Design (Internationalization best practices)

2012-03-29T20:24:55Z

Clintchecketts: /* String buffers */

Design (Internationalization best practices)

2012-03-29T20:24:02Z

Clintchecketts: /* Text in graphics */

Design (Internationalization best practices)

2012-03-29T20:21:59Z

Clintchecketts: /* Presentation controls */

Design (Internationalization best practices)

2012-03-29T20:19:34Z

Clintchecketts: /* Code/feature isolation */

Design (Internationalization best practices)

2012-03-29T20:18:36Z

Clintchecketts: /* When to start */