We have a web client for our product with translations in 3 languages: English, French and German. This web client has a way to send emails to one of 3 different target groups: All connected users (currently logged in), all users, specific user group (all users in a freely selectable group). These are done through 3 radio buttons on the same line.

The problem is that our form looks nicely lined out when using English as the language, but when using French and to a lesser extent German, we run into problems with our radio button labels extending far beyond the right edge of our other controls, meaning a distorted form background. Apart from looking ugly, this also makes the UI look inconsistent when switching from one language to another. This is caused by the word for user being a lot longer in French (Utilisateur) and somewhat longer in German (Benützer).

All solutions I can think of either don't fix distortion or impact usability:

  • Editing the dimensions of the other fields to fit the French length just makes it so the other languages look weirder;
  • Placing French and German on 2 lines is again not consistent, but for the line height;
  • Placing all messages on 2 lines distorts the line height on the form. in addition, the horizontal width also remains inconsistent.
  • Changing this to a dropdown would solve most dimension-related issues, but also leads to extra clicks to choose the right value.

What is the best way to handle this?

  • 2
    Any introductory textbook about localization will tell you...add at least 30% extra space for localization. Yes, you may have to redesign your UI because of this (or it will look weird...) but you really can't avoid that. A better job would also consider a dynamic layout (going into two lines but keep all radio with same height). Can't say more without a specific example. May 26 '16 at 12:21
  • Can you provide a screenshot or mockup?
    – Monomeeth
    May 27 '16 at 23:42

Since this seems to be a web client, you could, if you cannot totally redesign the UI (as suggested by Adriano Repetti above), consider switching stylesheets according to the selected language. So you define a custom layout of your radio buttons which will only be used for display in french or German.

  • This is a very good solution. As a matter of fact, not even an entire style-sheet is needed, simply add the specific localization styles in the same sheet and then add an additional class like '.form .de' (where .de is for german version of the form)
    – Devin
    May 30 '16 at 15:29
  • Yes, it was more about explaining the concept than the technical implementation :-) May 30 '16 at 15:32
  • I totally understand that, adding the comment just in case the OP needs it, but your answer is very good as I said :)
    – Devin
    May 30 '16 at 15:35
  • Yes, after discussing this with our graphical designer today, we decided this was the best solution for the problem.
    – Nzall
    May 30 '16 at 16:04
  • Cool! All the best with your project! May 30 '16 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.