Tips for Creating International
Multilingual Websites
Jane Robbins
NOVA UX Meetup
Jan. 8, 2014
‘s Background
Managed a redesign for an international nonprofit
for a bilingual website, jankarski.net (Polish-English)

W...
The Impacts of Language
English is the most used language on the web, but …
Most (75%) internet usage
is not in English
Bo...
The International Site Process
Multilingual websites can be created in two
phases - international and localization
Interna...
Domain Considerations
Decide on one site / URL or multiple sites per
language
For SEO reasons, it’s often better to have o...
Design Considerations
Length of a label may differ by language
For example, Polish and German words are longer
than equiva...
More Design Considerations
Bi-directional languages (such as Arabic and
Hebrew) need to display characters right to left f...
More Design Considerations
Pay attention that special characters (Polish ł
and ę, German ä and ß, Chinese 德新, etc.)
for ea...
More Design Considerations
Don’t include graphics with
embedded text

Make sure payments are shown in
applicable currencie...
UX Considerations
Personas and UX testing need to include
natives of the languages for the site

Help users by defaulting ...
Cultural Considerations
The customer experience needs to fit the culture
For example, in Poland, nonprofit sites rarely ha...
Cultural Considerations
If practical, customize content to ensure that
the text, graphics, and even the colors work
for th...
Practical Considerations
Tag in all languages with the terms that local
users search for content
Is this a trunk

or a boo...
CMS Considerations
Choose a CMS suitable for a client’s business
needs including:
Handling and maintaining multilingual co...
Technical Considerations
Access outside of the US is more likely on a
mobile device

Take typical technology speeds for ta...
More Technical Considerations
Make sure that required software or plugins
are commonly used

Allow for language toggling b...
Language Considerations
Content vs. language – there’s a big difference
1)

2)

3)

The great majority of multilingual sit...
Content Considerations
In writing and tagging content, clarify
locations so that users in Cambridge, Mass.
aren’t sent to ...
More Content Considerations
Translate measurements, depictions of time
(1400 vs 2pm), and time zones, as needed
or

Be car...
Translation Considerations
Translations
Use an automated translator?
Google Translate, et al – provide the basics only
For...
Top Tips:
Get a professional translator if possible
Research cultural considerations
Localize content
Jane Robbins
@UX_Jan...
Some Resources
General information on doing global-based research:
Whitney Quesenbery and Daniel Szuc ’s book “Global UX: ...
More Resources
Writing for a global audience:
http://webdesign.about.com/od/writing/a/aa080800a.htm
http://www.webdesign.o...
More Resources
Automated translations:
Translation tools are described in http://sixrevisions.com/tools/reach-alarger-audi...
More Resources
A few firms specialize in bilingual sites:
Japanese/English http://www.designtym.net/services/
Spanish/Engl...
Upcoming SlideShare
Loading in...5
×

30 Tips for Creating International Multilingual Websites - for Nova UX Meetup

1,357

Published on

When designing a bilingual website, Jane realized that there are many more factors to consider than for a website in a single language. She'd like to 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.

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,357
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 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
  • Transcript of "30 Tips for Creating International Multilingual Websites - for Nova UX Meetup"

    1. 1. Tips for Creating International Multilingual Websites Jane Robbins NOVA UX Meetup Jan. 8, 2014
    2. 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. 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. 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. 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. 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. 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. 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. 9. More Design Considerations Don’t include graphics with embedded text Make sure payments are shown in applicable currencies Jane Robbins 9
    10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Top Tips: Get a professional translator if possible Research cultural considerations Localize content Jane Robbins @UX_JaneRobbins jmurobbins@gmail.com
    22. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×