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.

Transcript

1. Product Design Best Practices
   & Tools for Localization
   UXPA 2018 | June 28, 2018
   Michelle Chin
   Principal Product Designer, Citrix
   @soysaucechin
   #UXL10N
   

   View Slide

2. About Me
   Intro
   • Michelle Chin - @soysaucechin
   • Principal Product Designer at Citrix
   • I ❤ UX! Director of Mentorship for
   Triangle UXPA, founder of
   exploreUX
   #UXL10N
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Localization Basics
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. How is it implemented?
    Localization Basics
    Requires working
    collaboratively between
    engineers, product managers,
    translators, and designers
    Designer
    Engineer Translator
    Product Manager
    #UXL10N
    

    View Slide

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
    

    View Slide

15. Product Design Best Practices
    

    View Slide

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
    

    View Slide

17. Best Practices: UI Design
    

    View Slide

18. The “Golden” Rule
    Best Practices: UI Design
    Regardless of text length, the UI
    shouldn't be affected.
    #UXL10N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Best Practices: UI Writing
    

    View Slide

32. Best Practices: UI Writing
    • Basics of preparing strings for translation
    • Basic language semantics
    • Specifics around how UI can affect
    translations
    Overview
    #UXL10N
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

39. Provide complete strings when possible
    Best Practices: UI Writing - Keep sentences complete
    Contact customer support here.
    Contact customer support here.
    
    [here]
    [contact_support]
    UI: Sentence with a 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!
    

    View Slide

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] [cats_1]
    [cats_2]
    [cats_3]
    [cats_5]
    [cats_per_human]:
    Good example:
    Bad example:
    [cats_2+]
    #UXL10N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. Hemingway App
    • Web app (hemingwayapp.com), free
    • Desktop app (Mac, Windows) for $20
    Best Practices: UI Writing - Tools #UXL10N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Best Practices: Visual Components
    

    View Slide

47. Best Practices: Visual Components
    • Colors
    • Icons/Images
    • Tools you can use
    Overview
    #UXL10N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

51. The Noun Project
    • TheNounProject.com
    • Great icon reference
    Best Practices: Visual Components - Tools
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. Approaches for implementing localization
    

    View Slide

55. Approaching Localization
    • Strategic approach - long-term thinking of
    localizing your product
    • Tactical approach - determining tasks to
    implement localization
    Strategic & Tactical
    approaches
    #UXL10N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide