May 31, 2022 Smashing Newsletter: Issue #355
This newsletter issue was sent out to 175,505 subscribers on Tuesday, May 31, 2022.
Editorial
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.
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.
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.
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?
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.
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.
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.
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.
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?
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)
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”.
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.
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.