Product Design Best Practices & Tools for Localization (UX Y'all)

This is a talk I gave at UX Y'all in Raleigh, North Carolina on November 9, 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.

I reference a video from Last Week with John Oliver, which you can watch here (explicit content): https://youtu.be/OjPYmEZxACM

Transcript

1. Product Design Best Practices & Tools for Localization UX Y’all | November 9, 2018 Michelle Chin Manager, Product Designer, Citrix @soysaucechin #UXL10N
2. About Me Intro • Michelle Chin - @soysaucechin • Manager, Product Designer at Citrix • I ❤ UX! Director of Mentorship for Triangle UXPA, founder of exploreUX #UXL10N
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. 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. 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. 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. 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. Localization Basics
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
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/10/18 " # Good evening
 6:30pm 10/28/18
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
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
13. How is it implemented? Localization Basics Requires working collaboratively between engineers, product managers, translators, and designers Designer Engineer Translator Product Manager #UXL10N
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
15. Product Design Best Practices
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
17. Best Practices: UI Design
18. The “Golden” Rule Best Practices: UI Design Regardless of text length, the UI shouldn't be affected. #UXL10N
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
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
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
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
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)
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.
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
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
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
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
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
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
31. Best Practices: UI Writing
32. Best Practices: UI Writing • Basics of preparing strings for translation • Basic language semantics • Specifics around how UI can affect translations Overview #UXL10N
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?
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
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
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
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?
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
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!
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: #UXL10N
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
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
43. Hemingway App • Web app (hemingwayapp.com), free • Desktop app (Mac, Windows) for $20 Best Practices: UI Writing - Tools #UXL10N
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
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
46. Best Practices: Visual Components
47. Best Practices: Visual Components • Colors • Icons/Images • Tools you can use Overview #UXL10N
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
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
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
51. The Noun Project • TheNounProject.com • Great icon reference Best Practices: Visual Components - Tools
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
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
54. Approaches for implementing localization
55. Approaching Localization • Strategic approach - long-term thinking of localizing your product • Tactical approach - determining tasks to implement localization Strategic & Tactical approaches #UXL10N
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
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
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
59. 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
60. 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
61. Tactical Approaching Localization Look out for your users; help them truly have a good experience throughout the product. Example: Facebook: Last Week Tonight w/ John Oliver (9/23/18) Prioritize UI that users might need in critical situations #UXL10N
62. 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
63. 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
64. 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
65. Special Thanks! Outro • Slide deck:
 http://bit.ly/uxyall18_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