{"id":7822,"date":"2019-09-16T16:26:08","date_gmt":"2019-09-16T14:26:08","guid":{"rendered":"https:\/\/phrase.com\/blog\/?p=7822"},"modified":"2023-08-01T10:43:49","modified_gmt":"2023-08-01T08:43:49","slug":"how-to-create-good-ux-design-for-multiple-languages","status":"publish","type":"post","link":"https:\/\/phrase.com\/blog\/posts\/how-to-create-good-ux-design-for-multiple-languages\/","title":{"rendered":"How to Make the Most of Multilingual UX Design"},"content":{"rendered":"\n<div id=\"acf\/text-block_1c8c88715901bb8164f0817b81fb1357\" class=\"pxblock pxblock--text spacing--default bg--white\">\n\n\t\n\t<div class=\"container\">\n\t\t<div class=\"wysiwyg animate-in\">\n\t\t\t<p>User experience (UX) matters. In fact, it&#8217;s a key differentiator for companies that want to thrive in today\u2019s competitive <a href=\"https:\/\/www.globenewswire.com\/en\/news-release\/2022\/11\/01\/2545543\/0\/en\/Software-Market-to-Generate-Revenue-of-872-72-Billion-by-2028-Enterprise-Software-to-Remain-Responsible-for-40-of-all-Software-Spending-by-2028.html\">global software market<\/a>. Improving the user experience for your web or mobile app through UX design that meets customer expectations across markets can increase engagement, conversion, and customer satisfaction\u2014eventually leading to higher revenue and reduced costs.<\/p>\n<p>The best UX designers obsess over the flawless UX of their products. They&#8217;re painfully aware that every design choice they make\u2014whether it\u2019s about color, illustrations, or the phrasing of error messages\u2014directly affects how users perceive the product and, in turn, the brand. That\u2019s why they experiment, test, and measure to continuously improve engagement, customer satisfaction, and retention.<\/p>\n<p>Then the day arrives when the company decides to step into a new market that speaks a different language. Suddenly, <a href=\"https:\/\/phrase.com\/blog\/posts\/software-localization\/\">software localization<\/a> is on the agenda, introducing a whole new set of <a href=\"https:\/\/phrase.com\/roles\/designers\/\">challenges for designers<\/a>. Changing more than the language of the product impacts the user experience in ways that many teams may not have anticipated. Here&#8217;s how to make the most of<span style=\"color: #505050; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif; font-size: revert; font-weight: 400;\"><a href=\"https:\/\/phrase.com\/solutions\/multilingual-ux\/\"> multilingual UX design<\/a> for global apps.<\/span><\/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\/how-to-create-good-ux-design-for-multiple-languages\/#how-localization-impacts-ux-design\" title=\"How localization impacts UX design\">How localization impacts UX design<\/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\/how-to-create-good-ux-design-for-multiple-languages\/#challenges-with-traditional-multilingual-ux-design\" title=\"Challenges with traditional multilingual UX design\">Challenges with traditional multilingual UX design<\/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\/how-to-create-good-ux-design-for-multiple-languages\/#how-localization-technology-can-support-ux-localization\" title=\"How localization technology can support UX localization\">How localization technology can support UX localization<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/blog\/posts\/how-to-create-good-ux-design-for-multiple-languages\/#working-on-your-ui-design-for-multiple-languages\" title=\"Working on your UI design for multiple languages\">Working on your UI design for multiple languages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/blog\/posts\/how-to-create-good-ux-design-for-multiple-languages\/#multilingual-ux-design-is-ready-for-development\" title=\"Multilingual UX design is ready for development\">Multilingual UX design is ready for development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/blog\/posts\/how-to-create-good-ux-design-for-multiple-languages\/#iterate-on-your-web-and-mobile-app-design\" title=\"Iterate on your web and mobile app design\">Iterate on your web and mobile app design<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"how-localization-impacts-ux-design\"><\/span>How localization impacts UX design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When companies believe that <a href=\"https:\/\/phrase.com\/blog\/posts\/localization-isnt-just-about-translation\/\">localization may be as simple as mere translation<\/a>, then they might see all of their hard-won gains in user experience suddenly dissipate. Other cultures not only speak another language but also assign different meanings to colors, symbols, and visuals. They even use different formats for date, time, and measurements.<\/p>\n<p>The goal of localization is to create a user experience that feels like it has been specifically designed for a language and culture. Ideally, no user should detect that the original product may stem from a completely different cultural background. That is easier said than done, though. Traditional UX design processes can hardly support this undertaking.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"challenges-with-traditional-multilingual-ux-design\"><\/span>Challenges with traditional multilingual UX design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the traditional waterfall product development process for mobile or web apps, UX design and localization are on opposite ends. Typically, the product teams start with a mockup and create the user interface taking only one language into consideration. The developers will subsequently build the product, and it goes live. Only now do most teams think about localization and try to introduce other languages. This can lead to several problems:<\/p>\n<ul>\n<li>By not internationalizing the product straight away and not keeping the UX design flexible, the design often breaks when more languages are added.<\/li>\n<li>Translators don\u2019t always have enough context to be aware of where exactly a string will live within the product, often leading to poor translation quality.<\/li>\n<li>Translations don&#8217;t always fit in the rigid UX design, resulting in, for example, an overflow of text on buttons.<\/li>\n<li>The broken design and out-of-context translations can have a negative impact on the user experience, with website visitors or app users bouncing more often than not.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"how-localization-technology-can-support-ux-localization\"><\/span>How localization technology can support UX localization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A translation management system (TMS), like Phrase, sits at the heart of modern <a href=\"https:\/\/phrase.com\/blog\/posts\/app-localization-developers-guide-to-user-experience\/\">UX localization<\/a>. It serves as a single point of truth for your product copy in all languages. It&#8217;s where copywriters and translators do their work and developers automatically sync the content files with their repository. Thanks to dedicated plugins for Sketch and Figma, UX\/UI designers can also benefit from an equally simple syncing mechanism.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"working-on-your-ui-design-for-multiple-languages\"><\/span>Working on your UI design for multiple languages<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Designers can connect Sketch and Figma with Phrase to sync their design content. With this workflow, designers can be sure to create a good design that is suitable for all languages:<\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Designers create a mockup of the UI in the source language and push the keys and screenshots to a centralized localization platform.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Developers write new code or update the existing one.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Translators begin working on the UI strings in all other languages, aided by screenshots, contextual information, and comments provided by the designers and copywriters.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Once the translations are finished, they are pushed back to the design team who integrate all languages into the UI and optimize the layout if necessary.<\/span><\/li>\n<\/ol>\n<p>This workflow allows for translated product copy to be ready when working on the UI design of a new product. The sync also automatically reduces the risk of accidental copy changes. <a href=\"https:\/\/phrase.com\/blog\/posts\/translation-quality\/\">High translation quality<\/a> is assured as the content and translation teams can see screenshots of your artboard in Sketch or Figma. Linguists have all the context they need to create high-quality copy and translations. Seeing the current state of design, even if it is not 100% final yet, enables them to pick the best wording for each content key. This can be a great help in avoiding overly long verbiage and subpar translations.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-37883\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-1024x520.png\" alt=\"Design localization graph | Phrase\" width=\"900\" height=\"457\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-1024x520.png 1024w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-300x152.png 300w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-768x390.png 768w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-1536x779.png 1536w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization.png 1610w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>Having translated product copy for all your markets in Sketch or Figma allows UX\/UI designers to:<\/p>\n<ul>\n<li>Catch design breaks and optimize your design for multiple languages\u2014check out our article on <a href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/\">designing apps for internationalization<\/a><\/li>\n<li>Export files easily to design collaboration tools<\/li>\n<li>Conduct multilingual user tests<\/li>\n<li>Export images instantly for the App Store or Google Play Store in all languages<\/li>\n<\/ul>\n<p>You can read more about this recommended workflow and how it differs from the classic product development workflow in our <a href=\"https:\/\/phrase.com\/resources\/design-localization\/\">complete guide to design localization<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"multilingual-ux-design-is-ready-for-development\"><\/span>Multilingual UX design is ready for development<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the UI design and copy are done, <span style=\"font-weight: 400;\">the localized UI goes to the development team who downloads the copy in all languages and builds it into the product. <\/span>We recommend UX designers agree on a key naming convention with their engineers before pushing the content from their design tool to Phrase. Later on, this will allow the development team to use the existing translated content from Phrase in the final product. In the end, <span style=\"font-weight: 400;\">the feature goes live in all markets simultaneously, with a UI that has been designed for a global audience from the start.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"iterate-on-your-web-and-mobile-app-design\"><\/span>Iterate on your web and mobile app design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Today, product development is a continuous process. Agile teams often iterate multiple times on existing features. Copywriters and translators might want to edit product copy to make it more compelling\u2014and designers might decide on a redesign of the user interface to increase conversion. Thanks to the sync between your design tool and translation management system, it&#8217;s easier<span style=\"font-weight: 400;\"> to close the gap between design and localization than you might think. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers can work in their native environment and have full control over the design process while still being able to quickly and easily consult with localization experts to ensure that their designs are relevant and accurate. Translators can see the design in its proper context, making it easier to produce accurate translations\u2014and developers can focus on building the product, confident that the localized designs will be spot-on.<\/span><\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n<div id=\"acf\/blog-cta-block_4b810bee92468d08a1ce7a5e1aef1190\" class=\"pxblock pxblock--blog-cta bg--yellow image--orientation-portrait\">\n\t<div class=\"block-container\">\n\t\t\t\t\t<div class=\"image image--align-middle\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1700\" height=\"2200\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover.png\" class=\"attachment-original size-original\" alt=\"Design localization ebook cover | Phrase\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover.png 1700w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover-232x300.png 232w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover-791x1024.png 791w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover-768x994.png 768w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover-1187x1536.png 1187w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/09\/design-localization-ebook-cover-1583x2048.png 1583w\" sizes=\"(max-width: 1700px) 100vw, 1700px\" \/>\t\t\t<\/div>\n\t\t\t\t<div class=\"content\">\n\t\t\t<p class=\"subhead\">DOWNLOAD FOR FREE<\/p>\n<p class=\"h6\">Your guide to bridging the gap between translation and design<\/p>\n<p class=\"small\"><span style=\"font-weight: 400;\">Discover how to bring design and translation together to streamline global product development and ensure that your product meets all cultural requirements of each target market.<\/span><\/p>\n<p><a class=\"btn btn--outline\" href=\"https:\/\/phrase.com\/resources\/design-localization\/\">Download ebook<\/a><\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Get to know all the secrets of using localization technology to create good multilingual UX design for your global web or mobile app.<\/p>\n","protected":false},"author":6,"featured_media":2597,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_searchwp_excluded":"","footnotes":""},"categories":[37],"class_list":["post-7822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-global-business"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/7822"}],"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=7822"}],"version-history":[{"count":20,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/7822\/revisions"}],"predecessor-version":[{"id":60018,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/7822\/revisions\/60018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media\/2597"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media?parent=7822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/categories?post=7822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}