Language login screen

Question

I have a small application that I'm making for both Android and iOS. On the first screen users see, they have to fill in a code. This code gets checked with the server, and the server also returns the language the application should be in.

Currently only three languages have to be supported. How should I make my login screen look like? It should consist of a textfield for the code-input, a button for submission, a welcome message and a short sentence saying you should insert the provided code in the field. The major issue I'm having it having it all in the languages.

Should I have all the sentences in a single language, using a fade to go to he next language every x seconds (like when booting an iOS device for the first time), or provide the specific sentence in each language? And how should the text on the button behave?

On a sidenote, I'm trying to adhere to material design, just in case they have something in the spec about it that I missed.

This is the current single-language layout:

Answer 1

For simplicity sake I would use Alan Geroge's answer but if you don't think that will provide enough information for your users to understand what to do you could always use localization to format the text to the language the user prefers.

You mention that your server returns the correct language after the user enters their code. If you can access that before they enter it just use that method and map the login text to their language. If you cannot access it until after the code depending on the device there are a couple way to do this:

iOS:

Getting current device language in iOS

Android:

Get the current language in device

Web:

JavaScript for detecting browser language preference

Locale::acceptFromHttp

This will allow you to use you current phrasing without issue, and keep language consistent across the users device and other apps.

Answer 2

If you're mainly concerned about translation, you will need to seek external help. As for the design of the interface, it matters more that the interface is language-less.

For example:

^{download bmml source – Wireframes created with Balsamiq Mockups}

1. Instead of "Code", show numbers in the format expected of the user.
2. Instead of "Log On", use an icon to indicate submitting or moving onto the next step.

An interface designed in this manner should be easily usable by people of many languages, regardless of what language the title and instructions are in.

This blog post gives some additional information on and examples of removing language from your designs.