April 17, 2016

Text Box Sizes and Designing for Localisation

Why Thinking Inside the Box is Good For You

One of the most often quoted tips for localisation-friendly design is to ensure your text containers (text boxes, speech bubbles, buttons and so on) have enough space for further text expansion. However, it is not always easy to implement this tip since we all have different perception of space - my idea of how much space is "enough" or "too much" may be entirely different from yours. Our experience and knowledge of foreign languages play a significant role too. Which is why today I want to look at this tip in more details and with a simple example illustrate how much space you may really need to plan for, when and why.

So, let's say you have a tabbed interaction like this (but prettier):
Example of a Tabbed Interaction

While it looks fine  in English, if you translate the tab labels into, let's say, Russian, your design will become less appealing:
Tabbed Interaction with localised tab labels

As you can see, in Russian, each tab has to fit in at least eight letters (and a number) instead of three, meaning that your tabs must be at least twice as big to accommodate the text growth. Example below provides the comparison of the original design with the localisation-friendly design. To highlight possible text growth, the tab names have been translated into German and Russian. Technically, the tabs could be even bigger, since the German label is barely fitting into the tab and looks a little bit too condensed:

Comparison between localisation-friendly and localisation-unfriendly elements.

Note that together with the tabs, I had to adjust the "body" element as well. This is why you should not assume that you (or a person responsible for the e-learning localisation and post-processing) will be able to adjust things on each slide by hand. While in certain cases such an approach may be possible (and in extreme cases - inevitable), it should never become your standard operating procedure as the available slide space may be limited or there may be other elements affected by the resizing, not just your text containers. In the worst-case scenario you may find yourself redesigning the slide completely. If by this time your content has been localised, you may end up redesigning each localised e-learning module individually.

How Much Space Do You Need?

When designing for localisation, the traditional rule of thumb suggests to account for approximately 25% or 35% text growth. This is a good start, but may not always be enough - as you have noticed in the example above, the localisation-friendly tabs are twice the size of the original. Which brings us to a lesser known fact:  if a word is short in English, the chances are very high that the translation will be very long, ranging from 100% to the extreme of 300%  text growth.

In addition to word length, when deciding the sizes of your text containers, consider the following:
  • Character density
  • Character sizes: height / width
  • Character legibility at specific sizes
  • Wrapping rules 

For best results, before committing to the final design, test your containers with the largest and the smallest string of text in each of the alphabets. If the results do not look good at all for very specific language, consider create a region-specific version. For example, you may decide to redesign one slide specifically for the Japanese audience, but leave it unchanged in other languages. Ideally, though, this approach should be an exception rather than the rule.

Mind The Invisible Containers

Another example where text growth/change should be considered are overlaps of borderless an colorless text boxes with other elements on the slide. In the example below, the text box and the avatar overlap, but since the shape of the avatar's head fits nicely along the edge of the text it does not cause any issues. 
Text box with English text overlapping an image

Once the text has been translated, however, this situation may change:
English text translated into Russian, overlapping an image.

Personally, I would say that the best way to avoid this issue is to prevent any element overlaps. Ideally, you should have enough space both within your container and between containers. If you do need to have an overlap, you should definitely check how your elements will behave in different languages, particularly if you're working with small elements containing short English text.

Text Box Properties Aren't Everything

A relatively common assumption, which I have to admit I held myself before starting to design for localisation,  is that the text box properties such as "shrink on overflow" or "resize shape to fit text" will make your design quite responsive to any text growth. While in certain cases this may be true and you definitely shouldn't ignore these settings, they are not magic, as you can see in the examples below:

Different examples demonstrating the effect of text box properties on the text container size.

As you can see, while text containers may resize themselves, it may not always happen way you want. And they will definitely not be automatically rearranged on the slide (as in the 4th example in the image), meaning more work for you. As I mentioned before, in some situations it may be acceptable to manually adjust some of the elements. However, the bigger your course, the more complex the design and more varied the languages, the more work to be done. While you may be up for moving two tabs in two courses, you probably don’t want to spend your time on moving 200 tabs in 10 different language files.

In Short:

  • You can expect between 30% and 300% empty space in your containers.
  • Short English words are much more likely to be long in other languages.
  • Paragraphs of text are less affected by text growth than short labels or UI elements.
  • Test your design in different languages aiming at the shortest and the longest string possible.
  • Avoid element overlaps.
  • Don't over-rely on text box properties.
  • Adjusting containers by hand should be an exception, not a rule.

No comments:

Post a Comment