{"id":28132,"date":"2021-04-22T13:45:11","date_gmt":"2021-04-22T13:45:11","guid":{"rendered":"https:\/\/thedesigninspiration.com\/news\/?p=28132"},"modified":"2024-06-26T01:51:19","modified_gmt":"2024-06-26T01:51:19","slug":"what-you-can-learn-about-the-role-of-language-in-creating-websites-through-ui-mistakes","status":"publish","type":"post","link":"https:\/\/thedesigninspiration.com\/news\/blog\/what-you-can-learn-about-the-role-of-language-in-creating-websites-through-ui-mistakes\/","title":{"rendered":"What You Can Learn About The Role of Language In Creating Websites Through UI Mistakes"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>At first, when you\u2019re designing multilingual websites, there\u2019s no right or wrong answer. Everything is experimentation&#8211;everything open to critique. You\u2019re trying new things with creative license, and at the same time, you\u2019re learning. Yet, after some time, you\u2019ll learn that there may be great UI mistakes that make the UX experience a bit off for your consumers.<\/p>\n<p>In this article, we\u2019ll see how to design websites with language considerations for UI and UX. When it comes to multilingual websites, everything from icons to language use and language context matters. A great multilingual UI takes into account the language and region of the target market&#8211;the specifications of the intended audience themselves. This way, you\u2019ve put the UX first, because you\u2019re putting your user first.<\/p>\n<div id=\"thede-1915291509\" class=\"thede-proper-below-img-2-2 thede-entity-placement\"><div data-ad=\"thedesigninspiration.com_fluid_sq_2\" data-devices=\"m:1,t:1,d:1\"  class=\"demand-supply\"><\/div><\/div><div id=\"thede-3070080277\" class=\"thede-proper-below-img-2 thede-entity-placement\"><div data-ad=\"thedesigninspiration.com_fluid_sq_2\" data-devices=\"m:1,t:1,d:1\"  class=\"demand-supply\"><\/div><\/div><h2><strong>How Translation Services Can Fix UI and UX Mistakes With A Linguistic Approach<\/strong><\/h2>\n<p>As you can probably tell, translation is going to serve you well, when it comes to <a href=\"https:\/\/thedesigninspiration.com\/news\/tech\/responsive-web-design-creating-websites-that-adapt-to-any-screen-size\/\">creating multilingual websites<\/a> and fixing UI mistakes. Translation services, which<strong> efficiently adapt online content to new languages and localities<\/strong>, might come in handy. A great translator can work with UI and UX designers to come up with the best options for your website so that it can successfully turn multilingual. Translation services can fix mistakes such as inappropriate color schemes, mixed-up hierarchies, and muddled icons&#8211;all from a linguistic perspective. If you need documents translated, you can always use an <a href=\"https:\/\/www.translationshop.co\" target=\"_blank\" rel=\"noopener\">Online Certified Document Translation<\/a> service.<\/p>\n<h2><strong>The Most Common UI and UX Mistakes Translators, and UI and UX Designers Face<\/strong><\/h2>\n<p>Here are the most common UI mistakes translators, and UI and UX designers face:<\/p>\n<p><strong>Problem: Too Much or Too Little White Space<\/strong><\/p>\n<p><strong>Solution: Accommodating Text Expansion and Contraction<\/strong><\/p>\n<p>When your UI breaks because the language you\u2019re translating in is long, or you need more white space, it affects the layout, page elements, and copy in the design. You\u2019re going to need to accommodate for white space in Asian characters, for example. In Japanese, \u201ccomputer\u201d is \u201c\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30fc\u201d, which has fewer letters but more white space.<\/p>\n<p>Text Expansion\/Contraction is real (and really important). It means leaving room for translations to contract or expand the size of the text, depending on the language.<\/p>\n<p>Let\u2019s take the CTA button. In English, you\u2019d have something short like \u201cSign Up\u201d or \u201cRegister.\u201d In Chinese, you\u2019d explain politely, saying something like: \u201cTry it now for 30 days free of charge.\u201d In German, you\u2019d have a more cordial approach, according to their etiquette rules, such as \u201cSign up now to enjoy full access to all our features.\u201d You don\u2019t typically use the word \u201cfree,\u201d for German users as it\u2019s considered aggressive or impolite. So, the text here would definitely expand to accommodate variations in language.<\/p>\n<p><strong>Problem: Inconsiderate Language Context<\/strong><\/p>\n<p><strong>Solution: Accommodating Cultural Variations in Language Use<\/strong><\/p>\n<p>This brings us to the next problem and a major one: inconsiderate language context. This goes without saying but the cultural context of the target language you\u2019re translating matters. You can offend through UI translation if you\u2019re not careful.<\/p>\n<p>All languages are not made the same. That means you\u2019ll have languages that are made to be read left-to-right, and some languages to be read right-to-left. Arabic, Hebrew, and Urdu will be read right-to-left, and you\u2019ll need to accommodate serious changes to the layout. This is because the layout for right-to-left languages must mirror the layout in left-to-right languages. Say, you have English as the source language and Arabic as the target language&#8211;you\u2019ll need to mirror elements for bidirectionality. Here are Google\u2019s guidelines for <strong>bidirectionality.<\/strong><\/p>\n<p>All regions are not the same either&#8211;they have their own sociohistorical and cultural backgrounds that flow into their languages. In English or European languages, honorifics are what you\u2019d call the terms \u201cSir\u201d or \u201cMa\u2019am.\u201d But they\u2019re more common in Asian languages, which are filled with honorifics. For example, in Japanese, honorifics appear as -suffixes. In UI, this affects the way it\u2019s perceived by different users, while in UX this affects the overall <a href=\"https:\/\/thedesigninspiration.com\/news\/life\/3-industries-where-design-and-user-experience-matter-most\/\">experience of that user<\/a>.<\/p>\n<p><strong>Problem: Mixed-Up Hierarchies<\/strong><\/p>\n<p><strong>Solution: Correcting Subdomains and Using Appropriate Colors, &amp; Icons<\/strong><\/p>\n<p>When it comes to hierarchies, UI must prioritize different elements on the screen for the overall UX experience. It\u2019s a technical process, as UI is, but still involves language. Each multilingual website must have landing pages or subdomains with considerations for the target language. You\u2019ll have your source language as your homepage, then subdomains in a drop-down box.<\/p>\n<p>If you don\u2019t have the correct landings pages and subdomains you might break your website\u2019s UI.<\/p>\n<p>The worst thing you can do to a user is to make it difficult to select their language in the drop-down box. Sometimes, some websites use flags, which is not recommended. That\u2019s because flags represent <a href=\"https:\/\/thedesigninspiration.com\/news\/trending\/40-meanwhile-in-photos-that-summarize-different-countries\/\">countries<\/a>, but languages can be used by multiple countries&#8211;so, if possible use the text to indicate languages, translated, of course, in the user languages.<\/p>\n<p>Another thing is colors. Did you know that there are <strong>culturally appropriate colors <\/strong>for each region? For example, yellow represents wealth and status in Africa, but in Latin America, it indicates mourning. Purple is often called the color of royalty in some regions, but in Brazil, it\u2019s worn at funerals.<\/p>\n<p>And last, icons. The icons you use for your multilingual website can be perceived differently by different users. And you\u2019ll need to take into account your text expansion and contractions as well. For example, you\u2019ll have maybe a text option for your German page as opposed to an icon on your English page, since the text in your German page is already expanded. You\u2019ll break the UI if you add another icon to your German page.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; At first, when you\u2019re designing multilingual websites, there\u2019s no right or wrong answer. Everything is experimentation&#8211;everything open to critique. You\u2019re trying new things with creative license, and at the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":28133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[278],"tags":[],"class_list":["post-28132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/posts\/28132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/comments?post=28132"}],"version-history":[{"count":5,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/posts\/28132\/revisions"}],"predecessor-version":[{"id":36093,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/posts\/28132\/revisions\/36093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/media\/28133"}],"wp:attachment":[{"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/media?parent=28132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/categories?post=28132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedesigninspiration.com\/news\/wp-json\/wp\/v2\/tags?post=28132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}