Six Lessons to Design for the World
What we learned from developing International Design guidelines at Adobe
At the time of writing this article, Photoshop is available in 27 different languages, Illustrator in 19, and Adobe XD, one of our newest software, is already available in 7 languages. Since the Covid-19 outbreak, the world (and our customers) has become pressured to work even more remotely, reduce international travel and make better use of our cloud services to get work done. Digital experiences, online collaboration, and software that works across geos are more important than ever.
Our Adobe International Design team was founded in 2018, as Adobe began intensifying its focus on creating experiences that are relevant in any part of the globe. Our first project as a new team was to collaborate with the group developing the company’s Spectrum Design System. Our team’s goal was to understand how we could empower our larger team of 350+ designers through a better understanding of user needs in different cultures. In 2019, International Design developed both the International Design Guideline and Bi-Directionality Guideline. These were integrated with the Spectrum website to serve as a best practice for doing international design for Adobe as well as the larger design community.
How We Got Started
From our guidelines introduction: “There are roughly 200 countries and 6500 spoken languages in the world. Culture is deeply rooted in our thinking patterns, and it affects how users interact with and benefit from digital experiences. International design is a complex challenge that goes beyond translation. Acknowledging cultural characteristics and differences is the first step to create richer, world-ready digital experiences. Culture can affect how users perceive every aspect of Product Experience.”
That’s.. Easier said than done. 😰
Where to get started with putting together useful guidelines for our designers? How do we do our research? How could we cover the myriad of possible use cases? While we strongly felt the importance of providing an informative and useful guide to our product designers, we soon realized we needed to be realistic about the depth and level of detail the Guideline would offer.
First Step — Acknowledging Cultural Difference
As a first step, we decided to focus on the relationship between our users’ cultures and the building blocks of user interface design across the globe, through a collection of hands-on examples, including layout, color, type, icons, and photography. Most importantly, we intend for the Guidelines to acknowledge the world of cultural differences as a first step in raising awareness and encourage our design teams to begin working with a fresh international outlook.
In this article, we’ll briefly go through the six categories above, identifying the main international design challenges and highlight excerpts from our Guidelines of possible solutions to aid you in more effectively designing for international users.
1. Content and Layout
Creating user interfaces that can efficiently adapt to different languages is quite a challenge. Yet many designers and product managers think it will be solved through the translation of the UI text. Different writing and reading systems, grammar rules, and typographic conventions can impact and break common layout rules, and just localizing content often leads to text-based content that greatly differs in length.
When translating content to different languages, the length of the translated text is likely to be very different, sometimes up to 300% longer than the original. Text expansion is one of the main hurdles for designing effective global user interfaces. Consider the following call to action and its counterpart in Italian:
The button label expands 3 times the original English character count. That’s a big button. Does it fit your UI design? 😅
The IBM Globalization Guidelines reported an interesting correlation between the number of characters in a text field and the amount of text expansion. These experimental values indicate that shorter text fields are more susceptible to text expansion, and these values can help us predict the effect on our user interfaces. While it seems counter-intuitive, the shorter the text string, the more expansion is likely to occur!
Putting it to Practice
Localized content and text expansion impact how UI looks and performs across different countries, and it’s fundamental to creating layouts that can correctly flow with the textual content of different lengths and formats. These simple rules represent the foundation of designing world-ready layouts:
- Vertical Flow
Aligning multiple UI Elements horizontally can be problematic, as text expansion can cause overlapping or push elements in unexpected positions. When possible, it’s good practice to stack elements vertically and allocate extra horizontal space for translations. - Text Wrapping and Alignment
Wrapping text elements is an efficient way to avoid longer translations being truncated. On the other hand, it’s important to proactively check how the layout adapts as the vertical height of text fields increase (or decrease) to accommodate different character lengths and the alignment with related visual elements nearby. It’s also best practice to document the line-height value for single-line text fields, in case localized content breaks into two lines. - Sentences Built with UI Elements
These should generally be avoided as different languages follow varying grammar rules and often use different word order to build phrases. Separating words and UI elements can be challenging, as translated content often requires us to rearrange the order of elements, or adapt the plural or gender form.
Tip: Put Your Design to the Test with “World Ready”
Checking the readiness of a design solution across multiple languages can be time-consuming. For Designers using Adobe XD, our Globalization Engineering team built World Ready, a plugin that helps to automate the process of checking Artboards for localization readiness.
2. Colors
Let’s play “spot the difference” for a second. Have a look at these two pictures of Stock Market monitors. Does anything stand out to you?
You may have noticed that the use of green and red is the opposite in the two images. The reason for that is that in Europe and in the United States, the color red is usually tied to the idea of declining value, loss, and danger. So the use of color in the right image would appear questionable in the eyes of a western designer.
To understand this, we need to understand the meaning of the color red in certain Asian countries. In Japan, red and white patterns — Kouhaku (紅白) — are tied to festive, special occasions; while in China, the red represents happiness and good fortune. During Chinese New Year, it is customary for friends and families to exchange red envelopes — Hóngbāo (討紅包) — containing money. White is tied to the concept of purity in western countries but it’s seen as a mourning color in countries like China. In Japan, purple evokes luxury and financial success, while in Italy (where I’m from) purple is often said to attract bad luck. The list goes on and on.
Putting it to Practice
- Colors and UX
When approaching the UI design for a global audience, as a good measure, colors should not be the only indicator of a specific status or use case. It is always better to integrate it with textual or other visual clues. - Colors and Advertising
When designing promotional content, capturing the right tone and emotions from the local audience is key, and colors can have a big impact. It’s important to research specific markets from a cultural standpoint and to test the design with users in the target market to choose the right creative direction.
3. Text and Typography
Something that stands out when looking at writing systems around the globe is the difference in the visual complexity of characters.
Chinese and Japanese, for example, are mostly based on Logograms and in contrast with phonemic scripts like the Latin alphabet, are made of multiple strokes where single characters (or a short combination of characters) represent words, influencing how visually complex they look.
Their squared nature, lack of blank spaces and upper-lower case requires typographic adjustments for better readability.
Putting it to practice
International typography is, as you might have guessed, a complex topic. These are some of the key characteristics to keep in mind to kickstart the challenge of supporting different writing systems.
- Readability
When adapting textual content to visually complex writing systems (Chinese, Japanese, Korean, Thai, Arabic to mention few) increasing the font size of approximately 10% of the original value is a good way to improve readability. With multiple lines of text and paragraphs, line-height should also be increased accordingly. The character count per line is another important factor. With Latin characters, 80 per line is a reasonable limit to keep readers engaged, while for Asian languages it’s best practice to lower the limit to half the original value. - Font Fallback
Pairing different font styles to establish harmony, rhythm, and readability within a composition is one of the key decisions in design, and it’s not exclusive to Latin characters. Typography around the world is vastly different and it’s important to take time to properly research the right font family fallback options. - Styles
As an example, it’s common practice with Latin characters to use italics to emphasize certain words or phrases. In Chinese, Japanese and Korean, on the other hand, Italic (or “slanted”) type should not be used, as it doesn’t traditionally exist. To highlight text and create emphasis, it’s better to use different font weights or brackets.
4. Iconography and Metaphors
Imagine you are in the middle of filling out a form and you are being prompted with a question that requires you to pick one out of multiple possible answers. How would you visually express your selection?
A common way in many western countries would be to use a cross or checkmark next to the right answer. In Japan and Korea, most people would draw a circle instead, as the cross mark is a generic expression of dissent, and the checkmark is often used to identify wrong answers in paper tests.
Putting it to Practice
How can spot icons and metaphors that can cause misunderstanding? In general, these are some of the main categories designers need to be aware of:
- Artifacts
We often use icons to represent real-life objects that are familiar to the human eye and use every day. However, some of these physical objects take different forms in other countries. A common example is the mailbox icon; familiar to North American users, it doesn’t translate well for users in other countries. - Animals
Through the ages, animals have had symbolic and religious meanings, connected to different regions and cultures. When using animals to symbolize certain values or ideas, it is important to take the time to properly research specific markets to make sure the original intent is not being misunderstood locally. One example is the owl, a symbol of wisdom in the United States, it carries the opposite meaning in regions of India, where it can be associated with foolishness. - Hand gestures
Body language can compensate for language barriers, but it can also lead to international mix-ups. Even the well-accepted thumbs up, in countries like Afghanistan and Bangladesh, it is used as an insult. Similarly, the “OK” sign is far from being universally accepted. As a rule of thumb, hand gestures should be avoided in visual communications for a global audience.
5. Photography
Let’s have a look at these two pictures below. What are they expressing?
In western countries, these pictures are evocative of a moment of relaxation, while in certain Asian countries, they would represent an example of very bad manners.
In Thailand and Myanmar it’s extremely inappropriate to show the soles of your shoes or stick out your feet in general; in Japan, leaving your shoes at the entrance is good manners.
Photography is one of the strongest media to transmit emotions, ideas, and beliefs, and a double-edged sword when shared with a global audience, as it’s closely related to society, culture, beliefs, religion, and political values.
Putting it to Practice
Generally speaking, there are four categories of images that need extra care when used globally.
- People and Portraits
It is important to pick models that are dressed appropriately for the region. Editing of portraits also differs with facial manipulation and skin smoothing being popular in many Asian countries such as China and Korea. The amount of skin shown can also be considered too suggestive in some cultures. - Religion and Politics
In general, it is best practice to avoid religious symbolism and political imagery, as regions may perceive them differently. Representation of certain country maps and flags can also be tricky, due to local territorial disputes and the common practice of centering the world map over North America. - Seasonal content
Seasonal content can differ dramatically country by country, and photography should reflect it accordingly. For example, there is a variety of celebrations such as Thanksgiving and Halloween, that are not meaningful in Asian countries or possibly interpreted in different ways. The same could be said for White Day in Japan or Singles Day in China.
6. Bi-directionality and User Interface Mirroring
The two screenshots below are taken from adobe.com, in English and Arabic.
Two things immediately stand out: the direction of the text and the order of elements is reversed or what is known as bidirectionally.
Languages based on certain scripts like Arabic (e.g. Arabic, Persian, Urdu) and Hebrew (Hebrew, Yiddish), are bi-directional, are mostly read and written from right to left. User interfaces for bi-directional languages should be mirrored, to follow the same right-to-left reading pattern. This process, called UI mirroring, consists of positioning UI elements on the opposite side of the interface, reversing the direction of content and creating, as the term suggests, a mirror-like effect. Single elements, such as Icons and UI components, can be also subject to mirroring.
Learn more in our Bi-directionality Guideline.
Putting it to Practice
There are few practical rules to understand what elements of a user interface are subject to mirroring.
- UI Components / Form Elements
The majority of UI elements require mirroring, with few exceptions. For example, components representing the concept of time should not be mirrored. A common example could be the media controls of a Video player. - Icons
Icons that refer to the passage of time, do not require mirroring. For example, a clock icon, or a “rewind” glyph. Slashes, checkmarks, and icons depicting artifacts do not need mirroring as well. Icons representing horizontal movement (browsing arrows, for example) should be mirrored, to correctly follow the flow of the right-to-left interface. - Photography
As a rule of thumb, single images should not be mirrored, except for images depicting a direction. Composite images that represent a story would likely require a dedicated bi-directional version, as the sense of the story, reading from right to left, would likely look reversed.
Where do we go from here?
To get a solid grasp of the intricacies that tie cultures, languages, and digital experiences, we are committed to keeping learning, staying curious, and communicating the importance of an international mindset across Adobe.
Designing for a global audience is not an exact science, but by acknowledging these issues, we take an important first step to develop more empathy towards our international users and build globally relevant user interfaces. We see Adobe’s International Design and Bi-directionality Guidelines as best practices to bring sensitivity and knowledge to designing for different cultures. Yet, every UI design presents new challenges and use cases to find solutions for.
Feel free to read through the guidelines:
🌍
