Michele Carlson & Patrick McLoughlin October 2010 Localization Strategy & Best Practices Why Design Really Matters

Agenda Introduction Localization process Design best practices for localization Commonly seen localizability problems and how to avoid them

“Localize Yahoo! Mail and Messenger products, ensuring high quality and global sim-ship releases.”

About Yahoo! Mail & Messenger Localized for 40 markets and growing 300M users worldwide

Who’s involved

Localization in Agile Development Planning Design DevelopmentTesting Release Retrospective

Localizability Design Review Pseudo Localization Testing Report I18N defects Translation Preparation Product trainings Define schedules with core team Establish glossary Intl PMs meet with vendor linguists Translation HighTech Passport In-house – SEA languages Webdunia – Indic Review Edit translations Fix Localization Bugs Update glossary QA Certification Linguistic and Functionality Manual and Automation Our Process

Product Design Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local user experience and user research teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

Product Design Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local user experience and user research teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

User Study Example: Taiwan Mail

UED Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local UED/UER teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

Translating a prototype Yahoo! Calendar beta prototype translated into Hindi.

Pseudo Localization

UED Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local UED/UER teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

UED Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local UED/UER teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

UED Best Practices for Localization Gather international market design requirements early (engage with PMs and localization team) Conduct global user studies with local UED/UER teams Prototype with translations and do pseudo localization Review the beta product with global PMs before development finalizes Separate text from the graphic images and make sure they’re resizable Stick to the agreed string freeze date

Some questions to think about?

Is the UI culturally relevant?

Is the UI orientation correct? Left-to-Right (e.g. English) Right-to-Left (e.g. Arabic)

Will the color schemes work globally? US: Green=Up Red=Down TW/HK/KR: Green=Down Red=Up

Are the icons understood by other cultures? “Fish hook” symbolizes fishing, which sounds like “Phishing” in English but doesn’t in other languages. Mail box icon used is very US-centric. In Thai version, the icon is replaced by a more universally understood icon.

Can the UI accommodate different date/time formats? US: MM/DD/YY HH:MM AM/PM TW: DD/MM/(YY) AM/PM HH:MM Note: Calendar year is based on founding year.

Can the UI accommodate longer text? Longer text got cut-off because button background not being expandable. The word “To:” translates into “Kepada:” in Bahasa-Indonesian

Do we need to adjust the font type and size? Font too small Font size adjusted

Also ask these questions… Are there any local content or feature differences? (e.g. Calendar, Notepad, News Module, SMS, Mobile) Will the terminology translate well globally? (e.g. Opps, drink the kool-aid, on my plate, ping, buzz, poke, whoa!, shhhh, darn) Will you be releasing in developing markets with slow bandwidth?

String Concatenation

✖ ✖

Inbox has no unread messages

“Translation Hacking”

Final Thoughts…

1. Involve localization team early in the design phase (Review mocks, localizability questions) 2. Treat “English” as just another language 3. Conduct in-market user research and process user feedback 4. Ask the in-country Product Managers for market-specific requirements 5. Plug-in non-English translations into your design (e.g. German, Chinese) to see differences in languages such as font-size, line-height and string expansions 6. Leverage language expertise in-house (Intl PMs, local design teams) 7. Provide developers localizability guidelines (e.g. How text or buttons should wrap if it’s longer. Text should be on separate layer than the graphic) 8. Create flexible designs – anticipate for changes in content and product features 9. Use culturally neutral or sensitive images (e.g. Phishing “fish and hook” icon doesn’t translate in most languages) Tips For Making A Truly Global Product