5

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?

Improve this question
2
  • 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.
    – Adriano Repetti
    May 26, 2016 at 12:21
  • Can you provide a screenshot or mockup?
    – Monomeeth
    May 27, 2016 at 23:42

1 Answer 1

Reset to default
2

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.

Improve this answer
5
  • 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, 2016 at 15:29
  • Yes, it was more about explaining the concept than the technical implementation :-)
    – Gino van de Staaij
    May 30, 2016 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, 2016 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, 2016 at 16:04
  • Cool! All the best with your project!
    – Gino van de Staaij
    May 30, 2016 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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