Welcome to the blog.
International flags

Breaking Down the Online Language Barrier

Coming from a developed country, I take the internet for granted. For good or bad my life basically depends upon it. The lifestyle and profession I have chosen rely heavily on the internet and the connectivity it provides. I do my banking online, I chat with friends, I watch videos, listen to music, shop… and the list goes on.

It amazes me that it’s estimated over half of the world either do not have or do not use the internet.

Despite this, global internet connectivity is slowly rising. Developing countries are putting more resources into the infrastructure required for internet connectivity. Each day more of the world’s population is getting the opportunity to access similar content to what I do.

However, there is one looming issue that comes with the spread of internet connectivity: the language barrier.

It is estimated that over half of the web’s content is in English. When you compare this to the estimated 5% of English-speaking people in the world this is quite an alarming statistic. It means that there is a significant amount of internet users that cannot read the web content they are connected to.

Imagine the difficulties you would face if your online banking or music services were only available in a language you couldn’t read or understand. This is true for a large proportion of web users, and their experience is highly impacted.

Thankfully we have the ability to develop multilingual websites. Of course, developing a multilingual website is dependent on a number of factors (time, budget and other considerations) but for any website with diverse audience groups it would be highly encouraged.

In recent years Humaan have worked with some amazing international clients. Their multilingual projects have given us the opportunity to be exposed to diverse language and culture. They have also exposed a number of items to consider when building a multilingual website which include the technical, cultural and content-related aspects.

These projects weren’t without their challenges, and given our experience we thought we’d share a few things we’ve learnt a long the way.

Qualified Translators

As an English-only speaker, it’s impossible to understand content in another language. Thankfully there are a host of tools available to help with this issue, such as Google Translate.

The accessibility, ease-of-use and efficiency of this tool mean that I can immediately convert large volumes of text to another language. However, being computer generated, it quickly becomes obvious that the translations aren’t quite accurate. Some words in English simply do not have an equivalent word in other languages. Similarly, other words may differ in meaning depending on the context.

For now, these intricacies of language can only be identified by an actual person who is fluent in these languages.

Take away: Don’t always trust automated tools. While they may alleviate a large chunk of the work it is always recommended to test with your target audience. If you do not understand or are simply making an assumption, ask the experts!

Cultural Considerations

While culture isn’t always related to the language a person speaks, the target audience’s cultural differences should always be considered. A lot of design and UX decisions are based on our experience with Western culture and may not translate well in other contexts.

Elements such as choice of colour, subject of images and page layout have different meaning among different cultural groups.

For example, the colour red in various cultures can mean excitement, celebration, anger or rage. Highlighting content in such a colour can drastically change the context depending on the person viewing it, and as such can evoke different feelings towards the content.

The same considerations should also apply to images. Ensure the images are culturaly appropriate. Having context sensitive images can effectively improve ‘click rates’.

Take away: Validate your choices with the target audience.

Language Declaration

Defining the language of the web page is perhaps an obvious technical requirement but it can often be overlooked. To set the language is as simple as declaring the ‘lang’ attribute within the HTML document.

For accessibility the ‘lang’ attribute helps assistive technology, such as text-to-speech software, correctly interpret the specific requirements that are required of the HTML document’s current language. It also helps with other assistive tools such as Google Chrome’s language detection. While Chrome’s tool can supposedly figure out what language is being used automatically we’ve found it useful to define the language for best results. The ‘lang’ attribute can also be set per HTML element. For example:

While this is technically possible, it is preferable to not place alternative language content within the same page that has a different primary language set. Having multiple languages per page could alienate those who do not speak one of these languages. It also has the potential to negatively affect things such as search engine optimisation.

Take away: Declare the language of the page within your HTML document.

Language Direction

Many languages are read right-to-left, a notable example is Arabic.

The direction of the language should be specified within the HTML document. Similar to the ‘lang’ attribute, the ‘dir’ attribute is specified in the HTML tag, whereby ‘rtl’ stands for right-to-left:

Similar to the ‘lang’ attribute, it can also be set per HTML DOM element.

Take away: Declare the language direction in the HTML document.

Note: The default setting is ‘ltr’ (left-to-right) and as such, if the language is left-to-right, it does not need to be explicitly set in the HTML document.

Positioning

A different language direction can have a huge impact on the formatting of web elements and must be considered during the design process.

In English websites it is common practice for an image to be displayed to the left of text when listing articles. In a right-to-left language, such as Arabic, the image may lose it’s context as it would be displayed after the text.

It is therefore important to test right-to-left variations with the target audience. Do not assume that the textual content is the only change that will need to be made.

Take away: Ensure the positioning and context of page elements are considered.

Character Encoding and Character Sets

Character encoding and character sets are an often confusing aspect of language and text in web. For the simple take-away point, just be sure to use the Unicode character set by utilising the UTF-8 character encoding (it is also the default of HTML5 documents).

The Unicode character set contains a definition for most characters in the vast majority of languages. This makes it perfect for multilingual websites.

Assign this character encoding by adding the following within the <head>:

Take away: Utilise the UTF-8 character encoding in your HTML documents.

Language Declaration Links

Providing an ‘easy to find’ and also ‘easy to use’ method of switching between different versions of a language is important for both accessibility and usability. It should be recognisable to the user that a link will be taking them to a page using a different language. The ‘hreflang’ attribute allows us to specify to the user what language the target document is using. For example, a link redirecting the user to an Arabic web page:

There is one flaw with the above example. If a user only reads Arabic and they are currently viewing the English version of a webpage, how will they know what link will take them to the Arabic version?

For example, for those readers who do not understand Arabic, how would you know which of the following links would take you to the ‘car’ page?

A more appropriate link to the Arabic version of an English webpage could be as follows:

Be aware of the context in which your visitors will be viewing your website.

Take away: Provide an easy way to switch between languages in the language that is most appropriate.

Font Size and Length

The size, shape and space of characters can vary between languages. It is often the case whereby a single CSS font size is not appropriate for multiple languages.

The following example translates the same sentence using the same font size. Please ignore the omission of the right alignment of the Arabic translation for the purpose of this example:

English: This is a test sentence
Arabic: هذه الجملة للإختبار فقط

The readability of the English sentence is far better than that of the Arabic translation. For accessibility it is a necessity to enlarge the languages that do not translate into an easily readable format.

Another important consideration relates to the length – Character length and width between languages can vary dramatically. In the example above the Arabic version takes up less horizontal space than the English equivalent.

Be sure to keep this in mind when designing and building areas for content that could potentially look quite different with different languages.

Take away: Ensure your design takes different languages and their appearance into account.

Scrollbars

From our experience, the decision to align the scrollbars to the left or right is entirely dependant on the target audience.

An accepted standard is that if the content is readable from left-to-right then the scrollbar should be on the right. You would thus assume that if the text is readable from right-to-left then the scrollbar should be on the left.

This is not necessarily the case.

There are many reports suggesting that scrollbars for right-to-left languages should remain on the right side of the page. The main reason for this is because the majority of websites, apps and software have a right-aligned scrollbar.

Despite having a language that is right-to-left, aligning the scrollbar to the left can be disorienting and disruptive to the user. In most circumstances a user will prefer familiarity.

This consideration should apply to all UI elements.

Take away: Depending on the audience and situation, scrollbars may be located on different sides of the page. Once again, validate your decision with the target audience.

It’s all about context

The take aways we’ve mentioned are largely based on an understanding of who the target audience is. Clear communication and feedback between our team, the client and the end-users is paramount to ensuring a successful multilingual website.

Making an effort to research and validate with a website’s users will go a long way to ensuring the language barrier does not become an issue. It will ensure that your website is both accessible and usable regardless of language differences.

If there are any tips you think may be worth discussing please leave your comments at the bottom of the post.

We greatly appreciate the assistance provided by our incredible client Esra’a Al Shafei who helped review this article.

Share

Like this post? Keep up with us on Twitter and Instagram.

Recommended

person hit in the face by a flying newspaper (aka. the popups experience)

Are popups still a good idea?

7 November 2016 Author: Sandy Lim

Go on. Ask any internet user how they feel about popups. You may learn some new swear words. And yet, when the business case for UX is stronger than ever, many brands still default to popups...

Read Article
Dear Developer

Dear Developer. Love, Designer.

20 August 2015 Author: Kylie Timpani

Last month, a tweet by Yesenia Perez-Cruz, Senior Designer at Vox Media, caught my eye. Her tweet asked what seemed like a simple question:   I see an abundance of articles about how designers can make developers lives...

Read Article