Product Design Best Practices & Tools for Localization

Product Design Best Practices & Tools for Localization

This is a talk I gave at UXPA 2018 in Puerto Rico on June 28, 2018.

To stay competitive in a global marketplace, it's important to provide your app in different languages. This talk covers the importance of localization, how implementing localization works, design best practices to consider, and tools/techniques to help in the design process.

76b46d4f7b9501e85fccc24a7910927f?s=128

Michelle Chin

June 28, 2018
Tweet

Transcript

  1. 1.

    Product Design Best Practices & Tools for Localization UXPA 2018

    | June 28, 2018 Michelle Chin Principal Product Designer, Citrix @soysaucechin #UXL10N
  2. 2.

    About Me Intro • Michelle Chin - @soysaucechin • Principal

    Product Designer at Citrix • I ❤ UX! Director of Mentorship for Triangle UXPA, founder of exploreUX #UXL10N
  3. 3.

    About Citrix & Citrix ShareFile Intro • Citrix is focused

    on making the world’s apps and data secure and easy to access from anywhere • Citrix ShareFile - Cloud-based file sharing and collaboration tool • Currently supports 10 different languages • Didn't always have a localization process, but it's something we’ve figured out over the years #UXL10N
  4. 4.

    About this Presentation Intro What this talk isn’t It’s not

    a replacement for understanding your users… especially when recognizing cultural nuances and emotions are important to your product! #UXL10N
  5. 5.

    IKEA: Understanding consumers from 50+ countries! Intro IKEA UK: Promoting

    Summer patio furniture IKEA Japan: Mentioning “cooler” as “-3˚C” (26.6˚F) #UXL10N
  6. 6.

    About this Presentation Intro • A talk that focuses more

    on localizing the practical/transactional aspects of the user experience. • A guide for ensuring your design is flexible to accommodate localization. What this talk is #UXL10N
  7. 7.

    About this Presentation Intro • Localization basics • Product design

    best practices • Tools, techniques, and resources • Approaches to implementing localization at your work What we’ll cover #UXL10N
  8. 9.

    Globalization: The strategy of bringing your product into a global

    market (G11N) Internationalization: A globalization task. The planning and design of making your product globalization ready. (I18N) Localization: The implementation of internationalization - adapting the content to a specific language or culture. (L10N) Translation: A component of localization, it’s the process of converting one language into another (T9N) What is localization? Localization Basics #UXL10N References: Arancho Doc, Wikipedia
  9. 10.

    What is localization? Localization Basics For a given location (or

    locale), it includes: • Translation of text • Adaptation of non-text components Bonsoir
 
 18:30 28/6/18 " # Good evening
 6:30pm 6/28/18
  10. 11.

    What is localization? Localization Basics • Currency • Date/time format

    • Units of measurement • Phone/address format • Icons • Reading direction • Color • Keyboard usage Adaptation of non-text components #UXL10N
  11. 12.

    Why is important? Localization Basics •Provides a better user experience

    for speakers of another native language •Leads to a larger customer base and increased engagement Photo by rawpixel on Unsplash
  12. 13.

    How is it implemented? Localization Basics Requires working collaboratively between

    engineers, product managers, translators, and designers Designer Engineer Translator Product Manager #UXL10N
  13. 14.

    How is localization implemented? Localization Basics 2. Code [first_name] First

    Name: 1. Design 3. Prepare the strings ݷਁғ First Name: 5. Test 4. Translate the strings English: First Name Nombre primero Spanish: Vorname German: [first_name] #UXL10N
  14. 16.

    Best Practices • Best practices that we’ve collected as we

    implemented a localization process • Designed to provide great user experiences • Designed to make things easier on design, engineering, and translation • Three sections: • UI design • UI writing • Visual components Product Design Best Practices #UXL10N
  15. 18.

    The “Golden” Rule Best Practices: UI Design Regardless of text

    length, the UI shouldn't be affected. #UXL10N
  16. 19.

    Plan for longer lengths of text: Consider wrapping text Best

    Practices: UI Design - Longer text lengths Save Cancel What was the name of your childhood best friend? What city was your first job located? What was the name of your first pet? Security Questions Qual era o nome da sua melhor amiga da infância? Qual cidade foi o primeiro emprego? Qual foi o seu primeiro nome de animal de estimação? Questões de segurança Salve Cancelar ψЄϣ κϰЀψϸ ͘΀͵΄ৼ׀䦒դ΄憭݋΄ݷڹ΅֜ͽ ͭ͵͡Ҙ ͘΀͵΄๋ڡ΄՛Ԫ΅Ϳ΄᮷૱ͽͭ͵ ͡Ҙ ͘΀͵๋͢ڡ΁汹͹͵ϧϐϕ΄ݷڹ΅Ҙ ᑃੂ΄搡㺔 English Portuguese Japanese Good examples: #UXL10N
  17. 20.

    Avoid truncating text - the context can become lost English

    Portuguese Japanese Bad examples: Save Cancel What was the name of your childhoo… What city was your first job located? What was the name of your first pet? Security Questions Qual era o nome da sua melhor amig… Qual cidade foi o primeiro emprego? Qual foi o seu primeiro nome de… Questões de segurança Salve Cancelar ψЄϣ κϰЀψϸ ͘΀͵΄ৼ׀䦒դ΄憭݋΄ݷڹ΅֜ŏ ͘΀͵΄๋ڡ΄՛Ԫ΅Ϳ΄᮷૱ͽͭŏ ͘΀͵๋͢ڡ΁汹͹͵ϧϐϕ΄ݷڹ΅Ҙ ᑃੂ΄搡㺔 Best Practices: UI Design - Longer text lengths #UXL10N
  18. 21.

    Design elements so they expand to accommodate labels English and

    Russian Good example: Best Practices: UI Design - Longer text lengths Bad example: Save Cancel 50px 64px Сохр анит ь аннул ирова ть 50px 64px Сохр анит ь аннул ирова ть 50px 64px Save Cancel 10px 10px Сохранить аннулировать 10px 10px English and Russian #UXL10N
  19. 22.

    Consider increasing font sizes for some languages English Best Practices:

    UI Design - Text Height OK Your order has been placed! We will email you when the package is sent. font-size: 24px font-size: 14px অ ఍ጱᦈܔ૪ᤩනᗝѺ ౯ժտࣁݎᭆ۱᥄෸᭗ᬦኪৼᮒկ᭗Ꭳ఍̶ font-size: 24px font-size: 14px Chinese (Simplified) Heading: 24px Message: 14px Heading: 24px Message: 14px অ ఍ጱᦈܔ૪ᤩනᗝѺ ౯ժտࣁݎᭆ۱᥄෸᭗ᬦኪৼᮒկ᭗Ꭳ఍̶ font-size: 26px font-size: 18px Chinese (Simplified) Heading: 26px Message: 18px #UXL10N
  20. 23.

    Match mental models for languages that read right to left

    IKEA Egypt: in English (left to right) Best Practices: UI Design - Planning for different reading directions IKEA Egypt: in Arabic (right to left)
  21. 24.

    Provide localization design details in your deliverables Best Practices: UI

    Design - Tools for Design Deliverables Save Cancel What was the name of your childhood best friend? What city was your first job located? What was the name of your first pet? Security Questions 1 1. Example of wrapping to multiple lines Thanks! I see how the UI should expand.
  22. 25.

    Google Translate • translate.google.com • NOT a replacement for a

    translation service! • Provides a good idea of text lengths • Can copy and paste into Sketch for a visual reference Best Practices: UI Design - Tools for Design Deliverables
  23. 26.

    Translate.me (Sketch Plugin) • https://github.com/eddiesigner/sketch- translate-me • Quick way of

    translating whole artboards and files for a visual reference • Leverages the Google Translation API Best Practices: UI Design - Tools for Design Deliverables
  24. 27.

    Consider the context of how users need to view or

    enter dates and times Best Practices: UI Design - Date and Time When the specific date and time matter When time doesn’t have to be too specific
  25. 28.

    Consider the context of how users need to view or

    enter dates and times Best Practices: UI Design - Date and Time When the user base is global or providing localized information can be confusing, UTC might be helpful
  26. 29.

    Avoid language-specific interactions User has to type “delete” Best Practices:

    UI Design - Interactions User has to type in their password Cancel Delete Warning! You're about to permanently delete this workflow. Enter your password to proceed. Good example: Bad example: #UXL10N
  27. 30.

    Avoid language-specific sorting and organizing Not all languages are letter

    based Best Practices: UI Design - Interactions A more universal option Good example: Bad example: Highest Lowest Z to A A to Z Sort Order: Highest Lowest Descending Ascending Sort Order: #UXL10N
  28. 32.

    Best Practices: UI Writing • Basics of preparing strings for

    translation • Basic language semantics • Specifics around how UI can affect translations Overview #UXL10N
  29. 33.

    Preparing strings for translation Best Practices: UI Writing - Background

    Prepping the string for translation Do you want to delete this file? Do you want to save this file? Do you want to copy this file? [do_you_want_to] [this_file] [action] Do you want to delete this file? Cancel Delete Modal message variations: Bad example: UI: Confirmation Modal Do you want to delete this file? ¿Quieres borrar este archivo?
  30. 34.

    Languages have different sentence structures, which affects translation Best Practices:

    UI Writing - Background • Adjectives can come after nouns red shirt camisa roja Watashi wa gakkō ni aruite iku. I walk to school. • Verbs can appear at the end of sentences #UXL10N
  31. 35.

    Languages have different rules around word agreement Best Practices: UI

    Writing - Background • Words in phrases can change based their associated word’s gender or singular/plural form the cat il gatto the cats i gatti the apple la mela the apples le mele #UXL10N
  32. 36.

    A single word might have to be translated into a

    multiple-word phrase Best Practices: UI Writing - Background “Please confirm that you want to unpublish this connector” UI statement: Unpublish English undo the publishing Closest meaning die Veröffentlichung aufheben German translation “Bestätigen Sie, dass Sie die Veröffentlichung des Connectors aufheben.” Translated statement: #UXL10N
  33. 37.

    Provide complete strings when possible Best Practices: UI Writing -

    Keep sentences complete Prepping the string for translation [do_you_want_to] [this_file] [action] [do_you_want_to_save_this_file] [do_you_want_to_delete_this_file] [do_you_want_to_copy_this_file] Do you want to delete this file? Cancel Delete Modal message variations: Good example: Bad example: UI: Confirmation Modal Translating full strings makes my job easier. Do you want to delete this file? Do you want to save this file? Do you want to copy this file?
  34. 38.

    Best Practices: UI Writing - Keep sentences complete Complete strings

    provide • Flexibility for translation • Full context of what’s being displayed Provide complete strings when possible Translator With full strings, I can translate accurately! #UXL10N
  35. 39.

    Provide complete strings when possible Best Practices: UI Writing -

    Keep sentences complete Contact customer support here. Contact customer support here. <link> </link> [here] [contact_support] UI: Sentence with a link <link> </link> [contact_support_here] Good example: Bad example: I love when coding isn’t complicated. It’s great when the UI doesn’t break translations!
  36. 40.

    Isolate UI interactions for easier translation and better grammar Best

    Practices: UI Writing - Isolate UI interactions Number English Russian 1 cat кот 2 cats кота 3 cats кошки 5 cats кошек 5 Allow cats per human 5 Cats per human: [allow] <dropdown=n> [cats_1] [cats_2] [cats_3] [cats_5] [cats_per_human]: <dropdown=n> Good example: Bad example: [cats_2+] #UXL10N
  37. 41.

    Write in plain language when possible; have good labels. Best

    Practices: UI Writing - Write in plain language Good example: Bad example: Initial guess: confirm the typos in the enable modal With some better grammar, it’s clearer that there are typos in a modal named “Confirm Enable” Avoid noun-only strings UI Fix: Confirm Enable modal typos UI Fix: Typos are in the “Confirm Enable” modal #UXL10N
  38. 42.

    Write in plain language when possible; have good labels. Best

    Practices: UI Writing - Write in plain language Avoid single-letter usage Good example: Bad example: v2.0 Single letters might appear out of context to translators version 2.0 ߣ৉ 2.0 toleo 2.0 English Korean Swahili The full word removes the guess work in translating #UXL10N
  39. 43.

    Hemingway App • Web app (hemingwayapp.com), free • Desktop app

    (Mac, Windows) for $20 Best Practices: UI Writing - Tools #UXL10N
  40. 44.

    plainlanguage.gov Supports the Plain Writing Act of 2010, which requires

    federal agencies to use clear, understandable language for public communication Best Practices: UI Writing - Tools
  41. 45.

    Provide definitions for things that aren’t clear. • Sometimes technical

    terms can’t be avoided • Sometimes there’s no 1:1 easy translation Best Practices: UI Writing - Tools Save Add a Viewer Add an Approver Select a deadline Approval Set Up Approver - an individual who needs to review the file and provide approval (or rejection). Viewer - an individual who can only view the file, but cannot approve/reject. #UXL10N
  42. 48.

    Best Practices: Visual Components - Colors • Colors can have

    different connotations for different cultures • When colors can be considered, think of your product’s audience • Some color connotations are not as obvious. Consider the connotation of colors #UXL10N
  43. 49.

    Avoid words in your icons or images Best Practices: Visual

    Components - Icon/Image Usage Good example: Bad example: Because words are in the image, they can’t be translated ON OFF Save my user name Save my password Symbols replace the need for words Save my user name Save my password #UXL10N
  44. 50.

    Consider the cultural context of icons Best Practices: Visual Components

    - Icon/Image Usage Bad example:
 Countries have different types of mailboxes Representing “mail” Good example:
 Find a more universally understood icon ✉ #UXL10N
  45. 52.

    Different results are a good indication of multiple interpretations Results

    are literal Best Practices: Visual Components - Tools The Noun Project: Search the concept, not the object Search: Shopping Search: Shopping cart #UXL10N
  46. 53.

    Test icons for comprehension • Test with your users •

    Do the icons resonate? • Get recommendations on what might resonate better Best Practices: Visual Components - Tools #UXL10N
  47. 55.

    Approaching Localization • Strategic approach - long-term thinking of localizing

    your product • Tactical approach - determining tasks to implement localization Strategic & Tactical approaches #UXL10N
  48. 56.

    Strategic Approaching Localization • Do you have an international audience?

    • Where are they? • Where does your business want to expand? • Understanding this can help prioritize localization efforts Understand your audience and business goals #UXL10N
  49. 57.

    Strategic Approaching Localization • Have conversations with cross-functional teams and

    come up with a plan. It’s especially important if you're incorporating localization into existing products. • If your product is new or getting redesigned and localization is a high possibility, begin this process now! How will implementation become part of your organization’s process? Designer Engineer Product Manager #UXL10N
  50. 58.

    How are you determining a user’s locale? Approaching Localization: Tactical

    Designer Engineer Ok, I think that gives us a few options. Our users travel a lot and the context of their current location matters. • Locale can be determined by: • Browser settings • Device preferences • Provide a picker • Location detection • Use cases or technical limitations can affect the method • Locale means location! #UXL10N
  51. 59.

    Tactical Approaching Localization If retrofitting, designers and engineers can do

    an audit to see where changes might need to be made. Prioritize by the most used product flows/ features and start with the top user locations. • Customer data and analytics can help determine this Benefits: • Sets a paced approach • Distributes resources over time How do you get started? #UXL10N
  52. 60.

    Tactical Approaching Localization Tiered approach • For a new product

    or feature, maybe only make it available in English first. • Tier I languages - your most popular user bases • Tier II - your second most popular user bases Benefits: • Allows you to work out any product issues before expanding it to multiple markets • Buys the translation team some time to get the feature localized in multiple languages How do you get started? #UXL10N
  53. 61.

    Tactical Approaching Localization • Do you hire an in-house localization

    team? • Do you contract out the work? • What tool will they use? • Google “Localization management platform” How will the localization work get done? #UXL10N
  54. 62.

    Tactical Make it a habit • Start using some of

    the tools best practices from today • Review concepts early on with other designers, engineers, and translators • Hold peers accountable and ask about it in design reviews • Share lessons learned • Leverage your UI kits, style guides, and design systems Approaching Localization #UXL10N
  55. 63.

    Outro • Localization basics • Product design best practices •

    UI design • UI writing • Visual components • Tools, techniques, and resources • Approaches to implementing localization at your work We did it! #UXL10N
  56. 64.

    Special Thanks! Outro • Slide deck:
 http://bit.ly/uxpa18_l10n
 • @soysaucechin •

    LinkedIn: michelletchin These friends, family, and colleagues helped along the way: • Tej Kalianda • Kyle Nicholls • Andrew Wirtanen • Claudia Scholz • Mariana Ortiz-Reyes • Shawn Hoerner • and my mom! #UXL10N