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):
While it
looks fine in English, if you translate
the tab labels into, let's say, Russian, your design will become less
appealing:
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:
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.
Once the
text has been translated, however, this situation may change:
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:
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