App translation: Designing user interfaces that are fit for localisation

App translation: Designing user interfaces that are fit for localisation

When developing a new app, it is vital to design it in a way that is future-proof, whether that’s in terms of adding new features, monetisation functionality or new languages. Even if localising your app is quite far down on your product road map, many of the design decisions you make in the early stages will have a real impact on how easy it will be to localise your app into other languages.

One of the most common problems we come across in app translation is space – or lack thereof. Developers produce beautiful interfaces which look picture-perfect in English, but in German for example, which generally tends to be 20 to 30% longer than English, text is spilling beyond the confines of button borders left, right and centre.

If you have a button like ‘Close’, be aware that in German it will be something like ‘Schließen’ – that’s 5 English characters compared to 9 German characters. Worse still, the word ‘Add’ translates into ‘Hinzufügen’ – that’s 3 characters compared to 10. You can see how translation could easily ‘butcher’ the look of your app. What ends up happening in most cases is that the developers set character limits which are so small that an accurate, let alone beautiful translation is no longer possible. Abbreviations are used and words are swapped for shorter words that don’t quite hit the nail on the head, giving the translated version of your app an unpolished feel. Imagine using an English app where the Close button has been abbreviated to Cl. or the Contact button has been shortened to Cont. – you’d probably still be able to guess what the button is for, but it immediately feels less intuitive.

Possible solutions

  • The Microsoft Developer Network suggests to ‘size the UI to accommodate the largest localised version of the content’.
  • Establishing standard minimum heights and setting dynamic heights for button boxes and text boxes can be a good option, too, but it will depend to some extent on the overall space you have available (which doesn’t tend to be much if you’re developing smartphone apps).
  • Wherever possible, use universally recognised icons like a + for ‘Add’ and an X for ‘Close’ – it’s a great way to avoid character length issues altogether.

Additional things to take into consideration are line height, the meaning of symbols and colours in different cultures and writing direction (left to right vs. right to left). Beyond the pure space issue, you should also think about using a font that supports character sets like Arabic or Greek, depending on your localisation plans. There are plenty more best practices for user interface design, here is an article from Creativ Bloq with 10 tips for designing localised interfaces.

Designing your user interface to allow for longer translations is simply a must and will save and greatly reduce your time spent fixing space issue during QA. If you’re also interested in writing great code that’s fit for localisation, then our blog Successful app translation: It all starts with great code is a good place to start.