Smashing Magazine - #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 Events
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:


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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Older messages

#354: Front-End Accessibility

Tuesday, May 24, 2022

Accessible autocomplete, hidden content, custom radio and checkboxes, and accessibility linter. Issue #354 • May 24, 2022 • View in the browser 💨 Smashing Newsletter Merhaba Smashing Friends, We often

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

#352: Front-End Tooling

Tuesday, May 10, 2022

Terminal tools, VS Code extensions, DOM events, bundle analyzer and accessible Vue.js. Issue #352 • May 10, 2022 • View in the browser 💨 Smashing Newsletter Dobryy vechir Smashing Friends, There will

#351: Interface Design Tools

Tuesday, May 3, 2022

With image clean-up tools, free icons, font utilities, accessible color palettes and image upscaling. Issue #351 • May 3, 2022 • View in the browser 💨 Smashing Newsletter Hei Smashing Friends, We all

#350: Front-End Debugging

Tuesday, April 26, 2022

With memory debugging, terminal tips, debugging strategies, DevTools and debugging tooling. Issue #350 • Apr 26, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A few years back

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

2022 Logo Trend Report

Tuesday, June 28, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Get the most of built-in interactivity of coded UI components - Design with fully interactive elements that make

Browser Choice, Defensive CSS, Keksdose, Email Workflow, Career Advice

Tuesday, June 28, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 28 2022 Apple Is Not Defending Browser Engine Choice

A Marcel Breuer–Designed Home Hits the Market + More Real Estate News

Monday, June 27, 2022

Plus, armchair-travel to the Netherlands with these TEFAF Maastricht standouts View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture, Chair, Wood,

✨ Nifty NFT Landing Page Designs + 🏆 Challenge Updates

Monday, June 27, 2022

Find Out What's New In The UpLabs Design Realm This Week 🧐 Firstly, we're congratulating Itai Bracha, the winner of our latest 🖥 Design Agency Website Challenge! Lastly, here's a friendly

Accessibility Weekly #298: Using Accessibility Literacy to Counter Accessibility Ignorance

Monday, June 27, 2022

Sponsored by Automattic. They're hiring. June 27, 2022 • Issue #298 View this issue online or browse the full issue archive. Featured: Using accessibility literacy to counter accessibility

Not a Robot, UI Interactions, Single Element Loaders, Linaria, Component Library

Monday, June 27, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 27 2022 I'm not a robot (but, are you?) uxdesign.cc

✏ How to Create a Simple CSS Grid System, and more…

Sunday, June 26, 2022

How to Create Simple CSS Grid System WDRFREE.COM COMMENTS SVG Loading Animations 1STWEBDESIGNER.COM COMMENTS 7 UX Laws You're Probably Getting Wrong WEBDESIGNERDEPOT.COM COMMENTS Bunny Fonts –

Becoming the Duncan Idaho of design

Sunday, June 26, 2022

Issue 098: The need to foster purpose in the individual contributor's path ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

ICYMI: Emerging Design Trends From Spring Markets Across the Globe

Friday, June 24, 2022

Plus, catch up on all the new debuts you may have missed at spring markets View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture NYCXDESIGN 2022: