{"id":12850,"date":"2020-11-24T19:03:56","date_gmt":"2020-11-24T19:03:56","guid":{"rendered":"https:\/\/phrase.com\/blog\/?p=12850"},"modified":"2023-08-18T12:54:40","modified_gmt":"2023-08-18T10:54:40","slug":"ui-design-principles","status":"publish","type":"post","link":"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/","title":{"rendered":"7 Key UI Design Principles for Multilingual Apps"},"content":{"rendered":"<p>Multilingual UX design can feel like a mountain of a task. Certain basics should definitely be considered: keeping your users in control, catering to a simple and fluid user flow, providing visual clues, etc. Nevertheless, designing a mobile app that should transcend national and cultural borders is an endeavor that takes far more effort. Here are some core UI design principles to guide you in <a href=\"https:\/\/phrase.com\/blog\/posts\/mobile-app-localization-why-and-how\/\">making your app a global success<\/a>.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#let-your-users-choose-languages\" title=\"Let your users choose languages\">Let your users choose languages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#internationalize-your-product\" title=\"Internationalize your product\">Internationalize your product<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#learn-your-target-markets-cultural-patterns\" title=\"Learn your target market\u2019s cultural patterns\">Learn your target market\u2019s cultural patterns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#maintain-a-consistent-brand-image\" title=\"Maintain a consistent brand image\">Maintain a consistent brand image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#avoid-using-embedded-texts\" title=\"Avoid using embedded texts\">Avoid using embedded texts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#plan-on-enough-space-for-longer-texts\" title=\"Plan on enough space for longer texts\">Plan on enough space for longer texts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/phrase.com\/blog\/posts\/ui-design-principles\/#bring-design-and-translation-together-with-robust-localization-technology\" title=\"Bring design and translation together with robust localization technology\">Bring design and translation together with robust localization technology<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"let-your-users-choose-languages\"><\/span>Let your users choose languages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here comes the first question: Should your mobile app\/website have a default language setting? There are tons of apps out there that determine languages based on the user\u2019s IP address or system setting (often represented by national flags). While this practice may be common and the flags beautiful, it is often not the best solution.<br \/>\nThe downside is that it overlooks countries with more languages in use. For example, there are 22 official languages in India. In a quickly diversifying world, it is important that your app reflects the needs of as many people as possible.<br \/>\nTherefore, it is recommended that you always have a \u201cgateway\u201d to your app or website\u2019s main page that allows your users to pick the language. In other words, the first time a user logs in or opens the app, he\/she should be the one who determines in what language the content is shown. Also, the user should be free to change languages at any time.<br \/>\nMoreover, to represent languages, use locale names instead of national flags. For example, if your website is for Spanish speakers in the United States, you can mark it as Espa\u00f1ol (Estados Unidos).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"internationalize-your-product\"><\/span>Internationalize your product<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u201cInternationalization\u201d is a term that refers to the process by which you prepare your product for localization. In a mobile app or a <a href=\"https:\/\/phrase.com\/blog\/posts\/global-website\/\">global website<\/a>, it means spending time and resources to restructure your codebase so that your product is ready.<br \/>\nOne challenge of internationalization is to get the encoding correct. Languages such as English and Spanish are single-byte and generally wouldn\u2019t have any problem appearing in a browser. However, for languages like Chinese, Korean and Arabic, you need to make sure your coding structure is well configured to maintain these language characters (e.g., encode with UTF-8); otherwise, these \u201cdouble-byte\u201d languages won\u2019t show correctly in your app.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"learn-your-target-markets-cultural-patterns\"><\/span>Learn your target market\u2019s cultural patterns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you see &#8220;01\/11\/20,&#8221; you probably know it is a date, but what date is it specifically? Is it November 1 or January 11, 2020? While you may be familiar with the DD\/MM\/YY date format, it may differ across regions and countries\u2014and sometimes, if you just put &#8220;DD\/MM\/YY,&#8221; your potential users may not understand what it means.<br \/>\nCultural patterns are what make each market distinct. Do some research on your target market\u2019s cultural patterns before actually diving into it. For example, is the symbol you use culturally relevant? Are there any cultural taboos you want to avoid? Answering these questions will eventually boost trust in your product or service.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"maintain-a-consistent-brand-image\"><\/span>Maintain a consistent brand image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>While you need to beware of the cultural differences across regions where you sell your products or service, also be sure to keep a consistent global brand image.<br \/>\nTo do this, you may either choose to use a layout template (there are already tons of them), or create your own customized version that is specifically configured to meet your internationalization needs. Overall, each language variant of your website or mobile app should have the same flavor when it comes to your brand image and delivers similar user experiences. Once you have a consistent template for UI design, expenses on things like adding new features (like buttons) and new languages would drop significantly.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"avoid-using-embedded-texts\"><\/span>Avoid using embedded texts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Has your team already designed a few fancy fliers or images? If they are so good-looking and are probably on your ads for a few days, it may be natural to reuse them in your newly launched multilingual website or mobile app. However, before you tell your team to \u201cjust upload them to our website,\u201d maybe you&#8217;d like to make sure that any texts are not directly integrated into the images. You probably need to have someone internationalize the images and fliers first by extracting the text into a separate layer. This way, you will be able to upload these texts into a translation management solution. In other words, apart from the regular content, your favorite images and fliers will be multilingual as well.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"plan-on-enough-space-for-longer-texts\"><\/span>Plan on enough space for longer texts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before you import your HTML data for translation, you should know that <a href=\"https:\/\/phrase.com\/blog\/posts\/best-practices-for-text-components-in-mobile-design\/\">translated text components rarely have exactly the same length as their original counterparts<\/a>. If you translate from English into languages like Russian or Ukrainian, it is likely that your translated copy would expand by at least 30%. Conversely, if your target language is Chinese or Japanese, the content may shrink by about 10% to 15%, which may make your UI aesthetically undesirable.<br \/>\nTherefore, should you have a \u201cfixed\u201d UI structure that does not change with the size of your content, your text boxes, buttons, and other fields would just not be able to fit. Fixing them manually one by one would then cost you a significant amount of money that would otherwise be saved.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"bring-design-and-translation-together-with-robust-localization-technology\"><\/span>Bring design and translation together with robust localization technology<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Just like you can&#8217;t expect your team to \u201cdraw\u201d UI content strings or keys in a simple raster graphics editor, you shouldn\u2019t just assume that once the website is ready in its original language\u2014mostly English\u2014your translators can now jump in and finish the work within days. Creating and maintaining a multilingual mobile app is a long-term process that involves the use of different tools, ideally combined on a translation management platform that integrates seamlessly with your UI design workflow.<br \/>\nThe Phrase Localization Platform offers an effective way to orchestrate the entire process with its integrations for design tools such as Sketch and Figma. First, your designers can push translation keys from the artboard in their preferred design tool directly to Phrase. Then, your translation team can take over and deliver high-quality translations thanks to screenshots attached to the strings for better visual context. In the end, designers are able to pull the translated content back to Sketch or Figma only with one click via the toolbar and prevent design breaks early on.<br \/>\nThis simple but highly effective workflow provides a seamless connection between your team of designers and translators. Even more importantly, it makes it clear that for a multilingual app to function properly, you need to be both on top of the core UI design principles and familiar with how things are done in a multilingual design environment. Made with the whole team in mind, Phrase is designed to adapt to your translation needs and scale with your global app from day one. Sign up for a <a href=\"https:\/\/phrase.com\/demo\/\">free trial<\/a>,\u00a0and see for yourself how it can support your globalization efforts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Designing an app for international audiences can be a bold endeavor. Following these UI design principles will help you make the most of it.<\/p>\n","protected":false},"author":6,"featured_media":1238,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_searchwp_excluded":"","footnotes":""},"categories":[38],"class_list":["post-12850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-localization-strategy"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/12850"}],"collection":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/comments?post=12850"}],"version-history":[{"count":6,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/12850\/revisions"}],"predecessor-version":[{"id":60731,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/12850\/revisions\/60731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media\/1238"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media?parent=12850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/categories?post=12850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}