#355: Multi-Language UX

How to design a better language selector, localization case studies, internationalization in React and UX across cultures. Issue #355• May 31, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Góðan daginn Smashing Friends, If you have ever had to build or design a multi-language website or application, you probably know all the usual challenges that the task brings. One might assume that it’s just a matter of translation. But eventually, labels get too lengthy to work everywhere, and translation strings aren’t enough when it comes to currencies, dates, time zones, colors, and gender pronouns. A proper localization strategy is needed as various versions of sites are ready at various times. [Designing A Better Language Selector]( Designing a language selector isn’t as straightforward as one might think. We’ve just published [a comprehensive UX guide on just that](. (Mock-up based on Booking.com). Internationalization is hard, and in this newsletter, we explore how to design and build better multi-lingual experiences. From language selector and localization case studies to personal names, internationalization in React, and UX design across cultures. [Smashing Podcast Episode 47 With Sara Soueidan: Why Does Accessibility Matter?]( Ah, and don’t forget to subscribe to our [Smashing Podcast]( — a friendly podcast on everything web. In fact, [a shiny new episode with Sara Soueidan]( was just released earlier today! Finally, we are very excited for the upcoming [SmashingConf San Francisco 2022]( in-person again — in just a few weeks. With topics ranging from design systems, CSS and UI animation to HTTP3 and web performance. [Get your ticket]( — we’d be thrilled to see you there! — Vitaly (@smashingmag) --------------------------------------------------------------- 1. Adapting UX For International Users Giving users the feeling of comfort, familiarity, and ease of use wherever in the world they may be located is what helps apps like Facebook or AirBnB stay popular and profitable. The good news: You can do it, too. Frederik Vollert shares some valuable [tips for adapting the user experience for international users](. [UX Localization: How to Adapt User Experience for International Users]( The key takeaway: When an app or product is available in multiple language versions, it’s important to plan how to cater to international users from the very beginning, long before localization begins. Frederik looks into how to lay the groundwork with cross-cultural UX design and then use internationalization best practices to ensure a truly cross-cultural experience. A useful guide that helps you take the right steps at the right time. (cm) --------------------------------------------------------------- 2. Case Study: Localizing Slack When the team at Slack decided to launch French, German, and Spanish localization for their product, the goals were ambitious: Slack should have a consistent voice in each language with high-quality translations, localizations should be built into the workflow of every team, and all new features should be translated at release. The project took almost a year to complete, but the result was in line with the goals. So how did they master the challenge? [Localizing Slack]( Principal Engineer Scott Sandler wrote a [case study]( summarizing some of the lessons learned, tooling, and processes they put in place to build localization in their ongoing workflow. The first step in localizing Slack was to prepare the text strings in their existing code base for localization — 20,000 strings across 2,000 files. A full-time translation team wrote a glossary and style guide for each language and worked alongside contractors to translate all of the words while a set of custom-built tools and processes ensured that localization was built into the workflow of every team. Interesting insights into a large-scale localization project. (cm) --------------------------------------------------------------- 3. Designing A Better Language Selector Imagine that you’ve just arrived in Tokyo. Full of impatience and excitement, you are just about to hit the road, yet there it comes: an urgent warning from your mobile provider, nudging you to top up your dwindling balance. With some justified concern, you go to the website just to be redirected to the Japanese version of the site. You can’t read Japanese, yet there is no obvious option to change the location or the language. [Designing A Better Language Selector]( Of course, as designers, we can make language selectors more obvious and noticeable, yet most of the time, the appearance of a component is only part of the problem. Too often, we embed our personal assumptions, bias, and expectations into the interfaces we design. Can we fix it? Absolutely! We just need to decouple presets, allow for overrides, and allow users to specify their intent. Vitaly explores [what options we have to do so](. --------------------------------------------------------------- From our sponsor Best-In-Class Membership Software Used By The Biggest Creators On The Web [Best-In-Class Membership Software Used By The Biggest Creators On The Web]( Memberful is an easily customizable membership software made by developers, for developers. Give your client ownership over all things related to their brand and audience. Memberful provides everything necessary to run a membership program: custom branding, free & paid trials, podcasts, newsletters and more. [Check us out for free today]( --------------------------------------------------------------- 4. Practical Internationalization Tips Imagine you’re using an app for the first time that gets brilliant reviews. However, what you get isn’t the experience you expected. There’s a video with captions you don’t understand, the wording is weird, and the button text doesn’t even fit in the button. So why do so many people praise the app? Well, as it turns out, the app wasn’t designed in your language but only translated later on. [Design for internationalization]( This is what non-English users have to deal with often. Many apps are only designed with English in mind, and some design details can get lost in translation if you’re not careful. To prevent this from happening, John Saito shares [seven practical tips]( to keep in mind when designing for internationalization — from leaving room for longer translations to watching out for metaphors that could be perceived differently across the globe. Small details that make a huge difference. (cm) --------------------------------------------------------------- 5. Upcoming Online Workshops You might have heard it: we run [online workshops around frontend and design]( be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s an overview of our [upcoming workshops]( - [Designing Better UX With Top Tasks]( UX with Gerry McGovern. June 1–15 - [DevOps Masterclass]( Dev with Denys Mishunov. June 21 – July 5 - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 7–22 - [Effective Usability Testing]( UX with Steph Troeth. July 11–25 - [Level-Up With Modern CSS]( Dev with Stephanie Eckles. July 11–25 - [Smart Interface Design Patterns]( UX with Vitaly Friedman (7h video + UX training) - [Jump to all online workshops →]( --------------------------------------------------------------- 6. Personal Names Around The World When creating web forms or databases, we are often unaware how different names can be in other countries. In some countries, names have a different order than given name followed by family name; in others, people might have multiple family names (or none at all), a name could consist of only one letter or of characters that aren’t part of the Latin alphabet. And these are just a few examples. But what are the implications of those differences on the design of forms and databases? [Personal names around the world]( To sensitize you to the key issues that the differences can bring along, the W3C published a comprehensive overview of [how to deal with personal names on the web](. Do you really need to have separate form fields for given name and family name, for example? And if you don’t, what do you do to prevent misunderstandings if you want to identify parts of the name to use it on a welcome page or in an email? These are just some of the questions that will be answered along the way. The best answer does, of course, always depend on the need of your application. An in-depth look into a detail that seems obvious but usually is subject to assumptions and personal bias. (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 7. Internationalization In React Internationalization (I18N), localization (L10N), globalization (G11N) — Naomi Meyer helps us make sense of them all. At the Reactathon Worldwide 2020, the Software Development Engineer at the Globalization team at Adobe gave an overview of internationalization, localization, and globalization best practices — specifically within a React context. Her mission: to put the “world” in “world wide web”. [Internationalization In React]( In her talk ([available on YouTube]( Naomi goes over why I18N, L10N, and G11N are important and how best to implement them in design, UX, and in the toolbase. To start off, Naomi shares examples to get our minds thinking internationally and defines the most important keywords to make sure we’re all on the same page. She then looks closer at different open-source tools and the JavaScript Intl API and goes into some design and UX considerations. 25 minutes well spent. (cm) --------------------------------------------------------------- 8. UX Design Across Different Cultures Culture affects how we use and trust the web, how we adopt information and technology, and much more. Having lived in four countries on three continents and having had the opportunity to design for users in Europe, North and South America, Asia, and Southeast Asia, Jenny Shen knows first-hand how important it is to address cultural characteristics in UX. [UX Design Across Different Cultures]( In her two-part article series “UX Design Across Different Cultures”, Jenny summarized tips and tricks she learned from designing for various cultures and how to apply cultural differences in user experience design. In [part 1]( of the article, Jenny shares insights into addressing cultural characteristics, conducting usability tests, measuring data, and localizing copy. [Part 2]( looks into researching mobile device usage in emerging markets, researching local UI patterns, creating personas of local users, hiring a diverse team, and more. Lightbulb moments are guaranteed. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [WordPress Developer]( at Codeable (Minneapolis, USA) - [Product Designer]( at Carnegie Mellon University (Pittsburgh, PA) - [Front-End Developer]( at Studio 24 (Cambridge, UK, hybrid or remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [Smashing Podcast Episode 47 With Sara Soueidan: Why Does Accessibility Matter?]( - [Expand Your Horizons (June 2022 Desktop Wallpapers Edition)]( - [What’s That (Dev) Tool?]( - [Open-Source 3dicons Library: Case Study And Free Downloadss]( - [Manage Accessible Design System Themes With CSS Color-Contrast()]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](