Tips for creating international multilingual websites
•Télécharger en tant que PPTX, PDF•
1 j'aime•3,051 vues
Presentation by Jane Robbins at the January NoVA UX meetup: http://www.meetup.com/nova-ux/events/143633812/ Details When designing a bilingual website, there are many more factors to consider than for a website in a single language. Jane will share her lessons learned with others, since the world's internet users are becoming more diverse every day and employing a user-centered approach is her professional passion. More about Jane Jane is the webmaster for an international nonprofit, the Jan Karski Educational Foundation. She defined their website and currently does project management for them as well. She has also held UX, Sales, Marketing and IT roles at Volkswagen of America, Freddie Mac and Apple.
Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Tips for creating international multilingual websites
- 1. 30 Tips for Creating International Multilingual Websites Jane Robbins NOVA UX Meetup Jan. 8, 2014
- 2. ‘s Background Managed a redesign for an international nonprofit for a bilingual website, jankarski.net (Polish-English) Was a UX consultant at Volkswagen of America on a web portal that will be used in many countries Jane Robbins 2
- 3. The Impacts of Language English is the most used language on the web, but … Most (75%) internet usage is not in English Bottom line ~ we need to reach users in their own languages Jane Robbins 3
- 4. The International Site Process Multilingual websites can be created in two phases - international and localization International planning includes: domain definition, design and layout, technical factors, UX considerations, CMS and content decisions, and cultural research Localization includes content translation and implementation If your planning is handled correctly, your localization process will be smoother and there should be less rework Jane Robbins 4
- 5. Domain Considerations Decide on one site / URL or multiple sites per language For SEO reasons, it’s often better to have one website with multiple language links Example: jankarski.net with a /pl or /en suffix Google recommends getting a country-specific domain if you can afford it Examples: ebay.de = ebay.fr = Ensure that the URL is short and neutral Jane Robbins 5
- 6. Design Considerations Length of a label may differ by language For example, Polish and German words are longer than equivalent English words “Benutzername” = “User name” in German Right-justified labels work for all languages (this approach worked well at VW) User name Benutzername Jane Robbins 6
- 7. More Design Considerations Bi-directional languages (such as Arabic and Hebrew) need to display characters right to left for text and left to right for numbers Use horizontal menus if any of your languages are bi-directional Make sure your layouts and templates work for all languages Jane Robbins 7
- 8. More Design Considerations Pay attention that special characters (Polish ł and ę, German ä and ß, Chinese 德新, etc.) for each language: Are findable in the site’s Search Read correctly on the screen and printed out Jane Robbins 8
- 9. More Design Considerations Don’t include graphics with embedded text Make sure payments are shown in applicable currencies Jane Robbins 9
- 10. UX Considerations Personas and UX testing need to include natives of the languages for the site Help users by defaulting a language, but allow users to change it (for expats and visitors) Jane Robbins 10
- 11. Cultural Considerations The customer experience needs to fit the culture For example, in Poland, nonprofit sites rarely have a Donate button, considering it tacky Also, European users tend to use bank transfers for payments (not PayPal) Jane Robbins 11
- 12. Cultural Considerations If practical, customize content to ensure that the text, graphics, and even the colors work for the different audiences Examples from IRS.gov: Jane Robbins 12
- 13. Practical Considerations Tag in all languages with the terms that local users search for content Is this a trunk or a boot? Build links to same-language content – avoid mixing links Jane Robbins 13
- 14. CMS Considerations Choose a CMS suitable for a client’s business needs including: Handling and maintaining multilingual content Checking in and out and exporting / importing translation workflows Determine whether the local or centralized entity will have final say on content Decide the site’s formality of tone plus regional terms that may differ by country Jane Robbins 14
- 15. Technical Considerations Access outside of the US is more likely on a mobile device Take typical technology speeds for target audiences/countries into consideration Jane Robbins 15
- 16. More Technical Considerations Make sure that required software or plugins are commonly used Allow for language toggling back and forth on the same page Jane Robbins 16
- 17. Language Considerations Content vs. language – there’s a big difference 1) 2) 3) The great majority of multilingual sites have the same content for all languages Some sites (IRS.gov) have translations for frequent items, but most content is in English My Polish-English sites both have the same branding and navigational structure, but differing content Jane Robbins 17
- 18. Content Considerations In writing and tagging content, clarify locations so that users in Cambridge, Mass. aren’t sent to content for Cambridge, England Ensure that graphics aren’t insensitive to other cultures Jane Robbins 18
- 19. More Content Considerations Translate measurements, depictions of time (1400 vs 2pm), and time zones, as needed or Be careful about idiomatic or slang terms that might not be understandable to all “my bad” “phat” “groovy” Figure out how to handle VOI (voice on the internet) and accessibility features Jane Robbins 19
- 20. Translation Considerations Translations Use an automated translator? Google Translate, et al – provide the basics only For a professional, credible website, you really need a human translator to polish the content Have native speakers proofread all text Employ a translator or use a service? Assuming you’ll be adding content over time, you’ll need to determine a long-term solution for content maintenance Jane Robbins 20
- 21. Top Tips: Get a professional translator if possible Research cultural considerations Localize content Jane Robbins @UX_JaneRobbins jmurobbins@gmail.com
- 22. Some Resources General information on doing global-based research: Whitney Quesenbery and Daniel Szuc ’s book “Global UX: Design and Research in a Connected World” “The Handbook of Global User Research” by Robert Schumacher “A Pocket Guide to International User Research” by Chui Chui Tan and Owen Gregory “Beyond Borders: Web Globalization Strategies” by John Yunker (2002-3) Mashable article by Christina Warren http://mashable.com/2010/10/11/global-web-design/ Two summaries of technical and non-technical considerations by Christian Arno http://sixrevisions.com/web_design/how-web-designers-can-adopt-a-globalmindset/ and http://www.webresourcesdepot.com/8-tips-for-designing-betterglobal-websites/ http://ezinearticles.com/?Web-Designing-Tips-For-Bilingual-WebsiteDesigns&id=4021163 Government best practices Howto.gov Best Practices http://www.howto.gov/web-content/multilingual/best-practices Jane Robbins 22
- 23. More Resources Writing for a global audience: http://webdesign.about.com/od/writing/a/aa080800a.htm http://www.webdesign.org/web-design-tips-for-an-internationalaudience.22281.html “A Practical Guide to Localization (Language International World Directory)” by Bert Esselink and Arjen-Sjoerd de Vries Accessibility and CSS: http://blog.globalizationpartners.com/internationalization-andaccessibility.aspx Bilingual sites & SEO Google video about bilingual sites http://www.youtube.com/watch?v=GyWx31GeQWY&feature=player_e mbedded http://alexwebmaster.com/developer-bilingual-websites-searchengine-optimization-spanish-english-houston-texas/ Jane Robbins 23
- 24. More Resources Automated translations: Translation tools are described in http://sixrevisions.com/tools/reach-alarger-audience-with-content-translation-tools/ Translators for WordPress sites http://codex.wordpress.org/Multilingual_WordPress Build a multilingual site with WordPress by Shannon Smith http://www.creativebloq.com/wordpress/build-multilingual-sitewordpress-9112795 Lingual plugins for Joomla http://www.joomfish.net/ A translator incorporated into an HTML forms builder called Wufoo Crowd source translations with a tool like http://www.worldlingo.com/ Managing international projects: http://blog.globalizationpartners.com/website-translation-localizationand-internationalization.aspx Some firms that specialize in multilingual site translations: http://www.lingo24.com/ http://www.translations.com/ http://www.globalizationpartners.com/ Jane Robbins 24
- 25. More Resources A few firms specialize in bilingual sites: Japanese/English http://www.designtym.net/services/ Spanish/English http://www.gogonzalez.com/webdesign/bilingual-multilingual-web-design French/English – both in Canada http://www.beginwithb.com/bilingual-calgary-web-design and http://www.joceydesigns.com/ Welch-English http://www.drupology.co.uk/bilingual-websitedesign-wales Jane Robbins 25
Notes de l'éditeur
- Front page illustration from Grants4hawks.wordpress.comInternet usage stats from http://www.internetworldstats.com/stats7.htm
- My BackgroundManaged a redesign for an international nonprofit for a bilingual website, jankarski.net (Polish-English)Was a UX consultant at Volkswagen of America on a web portal that will be used in many countries around the world Examples will draw from those experiences plus further research
- Language Impacts English is the most used language on the web, but as the internet reaches a broader diversity of people - including non-elites - we need to build websites in languages that reach everyone. Most (3/4th) internet usage is not in in EnglishEven in the US, some people are more comfortable in another languageAs more nations add technology expertise, we’ll need to reach them in their own languages
- Practical ConsiderationsDecide on one site/URL or multiple sites per languageIt’s often better to have one website with multiple flags or language links for SEO reasons (example: jankarski.net with a /pl or /en to indicate the language)But Google recommends getting the country-specific domain (example: domain.de or domain.pl) if yours is a large organization and you can afford the cost and maintenance Ensure that the URL is short and isn’t offensive in the other language(s)Tag in all languages with the terms that local users are using to search for contentBuild links to same-language content – don’t mix links
- Practical ConsiderationsDecide on one site/URL or multiple sites per languageIt’s often better to have one website with multiple flags or language links for SEO reasons (example: jankarski.net with a /pl or /en to indicate the language)But Google recommends getting the country-specific domain (example: domain.de or domain.pl) if yours is a large organization and you can afford the cost and maintenance Ensure that the URL is short and isn’t offensive in the other language(s)Tag in all languages with the terms that local users are using to search for contentBuild links to same-language content – don’t mix links
- More Design ConsiderationsPay attention that special characters (Polish ł and ę, German ä and ß, Chinese 德新, etc.) for each language: Are findable in the site’s Search Read correctly on the screen and printed out Length of labels on forms will differ by languageFor example, both Polish and German words tend to be longer than equivalent English wordsFor VW, in some cases we had to right-justify labels to make sure we were leaving enough room for all languages User Name Benutzername
- More Design ConsiderationsMake sure your layouts will work with the differential length of text in all languagesDon’t include graphics with overlay or embedded text unless you translate the text for each languageUse horizontal menus if any of the languages are not read from left-to-rightMake sure any payment amounts can be easily shown in all applicable currencies
- Design ConsiderationsPay attention that special characters (Polish ł and ę, German ä and ß, Chinese 德新, etc.) for each language: Are findable in the site’s Search Read correctly on the screen and printed out Length of labels on forms will differ by languageFor example, both Polish and German words tend to be longer than equivalent English wordsFor VW, in some cases we had to right-justify labels to make sure we were leaving enough room for all languages User Name Benutzername
- More Design ConsiderationsMake sure your layouts will work with the differential length of text in all languagesDon’t include graphics with overlay or embedded text unless you translate the text for each languageUse horizontal menus if any of the languages are not read from left-to-rightCurrency graphic from http://freegraphicdownload.com/countrys-currency-symbols-set/Make sure any payment amounts can be easily shown in all applicable currencies
- UX and Cultural ConsiderationsAll versions of your website need to provide a great customer experience, regardless of the languageUX testing needs to include natives of the languages that the site coversThe customer experience needs to fit within the appropriate cultural contextFor example, we found out that in Poland, nonprofit sites rarely have a Donate button, considering it tackyAlso, bank transfers are used more for donations in Europe than services such as PayPal If practical, customize content to ensure that the content, graphics, and even the colors work for the cultural audiences you are trying to reach Photo from http://www.123rf.com/photo_5558708_group-of-people-with-different-professions-isolated-over-white.htmlGraphics from Dara Pressley and Techsmith.com
- UX and Cultural ConsiderationsAll versions of your website need to provide a great customer experience, regardless of the languageUX testing needs to include natives of the languages that the site coversThe customer experience needs to fit within the appropriate cultural contextFor example, we found out that in Poland, nonprofit sites rarely have a Donate button, considering it tackyAlso, bank transfers are used more for donations in Europe than services such as PayPal If practical, customize content to ensure that the content, graphics, and even the colors work for the cultural audiences you are trying to reach Photo from http://www.123rf.com/photo_5558708_group-of-people-with-different-professions-isolated-over-white.html
- UX and Cultural ConsiderationsAll versions of your website need to provide a great customer experience, regardless of the languageUX testing needs to include natives of the languages that the site coversThe customer experience needs to fit within the appropriate cultural contextFor example, we found out that in Poland, nonprofit sites rarely have a Donate button, considering it tackyAlso, bank transfers are used more for donations in Europe than services such as PayPal If practical, customize content to ensure that the content, graphics, and even the colors work for the cultural audiences you are trying to reach Photo from http://www.123rf.com/photo_5558708_group-of-people-with-different-professions-isolated-over-white.html
- Practical ConsiderationsDecide on one site/URL or multiple sites per languageIt’s often better to have one website with multiple flags or language links for SEO reasons (example: jankarski.net with a /pl or /en to indicate the language)But Google recommends getting the country-specific domain (example: domain.de or domain.pl) if yours is a large organization and you can afford the cost and maintenance Ensure that the URL is short and isn’t offensive in the other language(s)Tag in all languages with the terms that local users are using to search for contentBuild links to same-language content – don’t mix links
- Technical ConsiderationsBuild scalability for the data base load for multilingual contentAccess outside of the US is more likely on a mobile device, so design for an optimal experience on all types of devicesTake typical technology speeds for all target audiences/ countries into consideration Make sure that required software or plugins are commonly used in the other language’s location/countryAllow for language toggling back and forth on the same page to help users with varying abilities in both languages
- Technical ConsiderationsBuild scalability for the data base load for multilingual contentAccess outside of the US is more likely on a mobile device, so design for an optimal experience on all types of devicesTake typical technology speeds for all target audiences/ countries into consideration Make sure that required software or plugins are commonly used in the other language’s location/countryAllow for language toggling back and forth on the same page to help users with varying abilities in both languages
- Technical ConsiderationsBuild scalability for the data base load for multilingual contentAccess outside of the US is more likely on a mobile device, so design for an optimal experience on all types of devicesTake typical technology speeds for all target audiences/ countries into consideration Make sure that required software or plugins are commonly used in the other language’s location/countryAllow for language toggling back and forth on the same page to help users with varying abilities in both languages
- Language ConsiderationsContent vs. language – there’s a big differenceYou need to decide if you want to have exactly the same content for all language versionsThe great majority of multilingual sites have the same content for all languagesSome sites (IRS.gov) have home pages in other languages with translations for frequently used items, but most content is in EnglishFor the Polish-English site, we decided that both sides need the same basic branding and navigational structure, but the content is different since we are reaching different audiences
- Content ConsiderationsIn writing and tagging content, make sure you are clear on the locations so that users in Cambridge, Mass. aren’t sent to content for Cambridge, England Ensure that graphics don’t include images that might be insensitive to other culturesTranslate measurements and other location-specific terms as neededBe careful about idiosyncratic or slang terms that might not be understandable to everyone, even for English speakers Graphic from wpclipart.com
- Content ConsiderationsIn writing and tagging content, make sure you are clear on the locations so that users in Cambridge, Mass. aren’t sent to content for Cambridge, England Ensure that graphics don’t include images that might be insensitive to other culturesTranslate measurements and other location-specific terms as neededBe careful about idiosyncratic or slang terms that might not be understandable to everyone, even for English speakers
- More Language ConsiderationsTranslations Use an automated translator?Google Translate, et al – gives the basics only -> it really needs a human to massage the content to make it polished and professionalHave native speakers proofread the content before going liveEmploy a translator or use a service?Assuming you’ll be adding content over time, you’ll need to determine a long-term solution for content maintenance