4

Design and Localization

almost 3 years ago from , Designer @ TDSoftware

Dear fellow Designers,

TLDR: How do you localize and when in the design process do you work with translators?

I'm working in small design studio in an agency that builds apps. We mainly had local customers from Germany but our latest projects were launched globally. We never bothered with optimizing the UI for longer text strings because it was designed in either German which is naturally pretty long already or English which is shorter most of the time. Now we have Portuguese and Spanish in there too, and it constantly breaks UI patterns on smaller screens, even the native and most basic ones e.g. a segmented control with 3 elements.

Currently, the design studio does the designs, then sends the strings to the translator while the developers are already building the features. If the translations are there, the devs feed them into the app — and thats where we get stuck — at this point some UIs break. At this point we need to "hot fix" the designs, which of course does not lead to ideal solutions.

If the designers would wait for the translations, a week would pass which is way too critical for most deadlines.

How do you prevent this from happening? How do you handle translations?

Best Regards, Paul.

6 comments

  • Lucian .esLucian .es, almost 3 years ago

    • You design for best and worst cases and the rest will take care of itself. Never assume the text is a certain length.

    • Question yourself on every component Ex: how would this look in german, english ? Ex2: Do we need to use text here?

    • Try to learn from past mistakes. List the elements where localization had a huge impact on the design and list down things you could have been done better.

    That's at least some of the things I usually do.

    I've always worked on products that are localized in multiple languages, so I had to think this through from the beginning. Hope it helps!

    Best, Lucian.es

    1 point
  • Marc EdwardsMarc Edwards, almost 3 years ago

    Our approach:

    1. Assume the longest strings will be around 2× the length of English (sometimes longer). Design with this in mind from the start. I think it’s better to allow lots of space in the design, rather than having multiple designs for certain elements, if you can. You don’t want the code to be a sea of if statements. That makes testing really difficult.

    2. Some strings do not need to be direct translations. Let the translators know which strings are going to be an issue, because they don’t have much space.

    3. Some things don’t need to be text. If you can use icons and if doing so is very clear, that saves on localisation issues.

    4. Assume you will need to test and make some tweaks when you have the localised strings.

    1 point
  • Neil Lee, almost 3 years ago

    When I was at Mozilla we used a number of different strategies (including having content pre-translated before the design process started).

    A fast-and-dirty test we'd use was this bookmarklet cheekily called "dasFauxGermanhausen" that turned all of the text on the page into, well, faux German.

    This obviously is only useful for web-based designs, but if it's helpful to anyone I posted the bookmarklet here - please keep in mind this is like eight years old, but it still works.

    0 points
  • Matt C, almost 3 years ago

    I've had to design for "configurable text" and several languages my whole career being in enterprise.

    You have to get into the habit of creating more fluid layouts. You just can't assume the text you drop into a container will always fit in that container as it is. Keep it fluid.

    I also very rarely mock up translations aside from what is likely to be the worst case scenario (usually German or Arabic in my personal experience). I think it's a pretty big waste of time, considering if your design is properly fluid then it should just work.

    It's a bit tedious at first, and once you start designing this way your work will be way less dribbble friendly, but the plus is that your designs will actually render well in any language (with the bonus of preparing you to work with "configurable text" if you ever go the route of enterprise design).

    0 points