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

Slide 1

Slide 1 text

Product Design Best Practices & Tools for Localization UX Y’all | November 9, 2018 Michelle Chin Manager, Product Designer, Citrix @soysaucechin #UXL10N

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

IKEA: Understanding consumers from 50+ countries! Intro IKEA UK: Promoting Summer patio furniture IKEA Japan: Mentioning “cooler” as “-3˚C” (26.6˚F) #UXL10N

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Localization Basics

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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: [ﬁrst_name] #UXL10N

Slide 15

Slide 15 text

Product Design Best Practices

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Best Practices: UI Design

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 ﬁrst job located? What was the name of your ﬁrst 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

Slide 20

Slide 20 text

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 ﬁrst job located? What was the name of your ﬁrst 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Match mental models for languages that read right to left IKEA Egypt: in English (left to right) Best Practices: UI Design - Planning for diﬀerent reading directions IKEA Egypt: in Arabic (right to left)

Slide 24

Slide 24 text

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 ﬁrst job located? What was the name of your ﬁrst pet? Security Questions 1 1. Example of wrapping to multiple lines Thanks! I see how the UI should expand.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Avoid language-speciﬁc 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 workﬂow. Enter your password to proceed. Good example: Bad example: #UXL10N

Slide 30

Slide 30 text

Avoid language-speciﬁc 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

Slide 31

Slide 31 text

Best Practices: UI Writing

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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 ﬁle? Cancel Delete Modal message variations: Bad example: UI: Conﬁrmation Modal Do you want to delete this file? ¿Quieres borrar este archivo?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

A single word might have to be translated into a multiple-word phrase Best Practices: UI Writing - Background “Please conﬁrm 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

Slide 37

Slide 37 text

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 ﬁle? Cancel Delete Modal message variations: Good example: Bad example: UI: Conﬁrmation 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?

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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!

Slide 40

Slide 40 text

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: #UXL10N

Slide 41

Slide 41 text

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: Conﬁrm Enable modal typos UI Fix: Typos are in the “Conﬁrm Enable” modal #UXL10N

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Best Practices: Visual Components

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Approaches for implementing localization

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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 Beneﬁts: • 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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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