Featuring Aditya Gujaran, Senior Product Designer at Unbabel
In the process of internationalizing the user experience, design shouldn’t be a barrier, but a stepping stone to supporting product appeal across vastly different audiences globally.
As a Senior Product Designer at Unbabel, with more than ten years of experience crafting human-centered UX solutions, Aditya Gujaran knows just how crucial it is to incorporate design into a company’s internationalization strategy, and attribute usability, UI, and accessibility to the wider business goals.
We called on his expertise to share insight into how to successfully fold UX design into the internationalization of a product, and understand how to address some of the issues that emerge when attempting to localize user interfaces — such as handling right-to-left content, text expansion, cultural differences in user preferences, and delivering intuitive functionality to multiple target audiences.
So, how does an app or a website’s layout adapt to multiple languages, cultural frameworks, devices, and user needs? Is responsive design the answer?
Here’s what we learned.
From a design perspective, it’s important to consider what digital medium — mobile, computer, tablet — the layout will be displayed on. This will be the first impression users will have of your product, so you want to get it right the first time. Key considerations include:
Who is your end user?
What are they trying to achieve?
What device are they using to view your product?
Usage and users may vary across your markets, so you’ll want to have an answer for each language and locale your product will be serving. These are the key elements that design should reflect. There are various types of layouts available, including:
Fixed layout:A static layout that has a fixed width measured in pixels. The outline is set so the components within it will remain unchanged, regardless of the size of the screen they’re being displayed on.
Liquid layout: A layout that is more flexible and allows elements within the outline to ‘flow’ and adapt to different screen sizes. Their width is determined by percentages, not pixels, ensuring proportions are maintained in any screen resolution.
Responsive layout:A layout that works similarly to liquid layouts, by leveraging CSS code to adapt the outline to each user’s device and render it differently depending on the screen size.
It could be tempting to embrace a responsive layout straight out of the gate, but layout choice should be reconciled with your overarching product strategy and localization readiness. Today, with so many different devices and screen sizes available, having a design that adapts to all your users’ needs is often a must. That said, the drive for adopting responsive design also depends on the needs of the business in the short and long term. Whether your business is scaling across one market, or new languages and audiences, layout choice shouldn’t just be part of your design process, but of your overall strategy.
Designing and developing a responsive layout can take longer than other options. However, instead of designing different layouts for different devices, you’d only need to design one. And with it comes an engineering trade-off: While it takes more time to build, a responsive layout will be easier to maintain.
From a purely design-based standpoint, I feel that using responsive design is a step towards showing your international audience that you prioritize their experience, regardless of what device they’re using, their native language, or their persona. It’s a way to subliminally communicate with your users that you do care about their needs, and that your product was tailored around them.
“Using responsive design is a step towards showing your international audience that you prioritize their experience, regardless of what device they’re using, their native language, or their persona.”
Imagine purchasing concert tickets on a mobile device while battling endless pop-ups and cookie banners, or having to fill out your personal details on a form that is so small you can barely select the right field — you’d probably give up and try elsewhere. You might feel like the company doesn’t value your UX and customer experience, and is asking you to jump through too many hoops to engage with their product.
As we start to measure user behaviors and experiment with different solutions, we understand the value of new channels and of adaptable, user-centered design. Usage changes as new digital trends and products appear on the market. For your business, this might mean revisiting old solutions to improve your user experience and, in turn, keep your users happy.
When you think about localization and what responsive design can achieve for your business, you could say the two go hand in hand: It’s all about meeting international users’ expectations and enabling them to interact seamlessly with your product. By collecting user preferences and behavioral patterns, your business learns about different cultures and different languages, helping you further refine your UX localization strategy.
When we talk about text expansion and contraction, I believe the main issue is recognizing which languages you want to support and researching how they will behave on the page. For example, most Latin languages expand or contract in width, so the translated text is going to be longer or shorter.
But when it comes to right-to-left languages, the difference is dramatic. If you’ve ever seen a UI in Arabic, you’ll notice that it’s not just a matter of text expansion: The use of visual information and hierarchy for Arabic digital products is vastly different, and it needs to be thought out considerably. Asian languages tend to be more condensed in width, and in terms of vertical spacing, the lines need to be adjusted to accommodate for ‘chunkier’ text.
Planning for these differences upstream rather than later in the UX design process helps make sure the designs are robust. As a designer, I can design an entire flow in German without speaking a word of it; I can check where the layout might break by using machine translation, or even out-of-the-box tools that allow me to see how different languages will change aspects like text length. This makes their implementation more efficient.
“Planning for different languages upstream rather than later in the UX design process helps make sure the designs are robust.”
Nowadays, most product design teams use design systems that have many of these behaviors ‘built’ into them. These systems represent a source of truth and have rules to define what should happen in scenarios like text length changing, with the goal of driving consistent designs across interfaces. It’s a great feature, because, on an atomic level, you’re able to see how each element is going to behave and you can build the interface accordingly. So, if you were to change the text to a different language, the layout wouldn’t break irreparably. It’s one potential solution.
There are three localization best practices that come to mind when you’re prepping your UX, and by incorporating them early on, you can avoid any need for awkward redesigns and boost your overall localization efforts.
Getting inside your user’s mind
The core concept of positive UX is that you should try to predict and reduce any friction your customers could encounter when using your product, be it a mobile app, a website, or software. Think of Uber: Their entire model is based on the premise that you can book and pay for transport at the press of a button. When they launched in India, however, they allowed cash payments. Why? Because they recognized it was a cash-based economy, and they were adapting to the market and the culture, meeting the users where they were.
Implementing language should be a cross-functional initiative between product designers, UX writers, and localization experts to improve and streamline the localization process. Making changes in the design stage is relatively cheap and helps reveal any issues that otherwise would appear during development — or worse, in production. If the business strategy demonstrates there’s a need to target a new market, designers should be at the forefront of making it happen.
Iterate, iterate, iterate
The more you can plan ahead, the better for your business — especially when you’re able to iterate. Iteration, or constant design refinement through testing, is a natural part of the product design process. Where once it was hard to iterate across multiple languages and markets, now, through automation and agile delivery, teams can work together to deliver continuous localization. Indeed, localization strategies can even drive iteration: UX writing, for example, is becoming its own discipline, and the intersection between what UX writers try to achieve through product interface and new features, and what each feature looks like to native speakers, isn’t always seamless. The feedback loop between UX designers and language experts is invaluable.
“The feedback loop between UX designers and language experts is invaluable.”
Once you’ve met users on their terms, you can experiment, developing designs that will drive them to new spaces or nudge them towards new behaviors. But first, you have to start with user research and view each design choice from their point of view.
By mapping out from the get-go how the product is going to be used and where it’s going to be launched, and ensuring collaboration between departments, we’re reducing costs and avoiding so much back and forth.