Almost every written menu, directory or instruction sheet now has multiple languages for a more culturally dynamic population. Language translation should not be reduced to only written documents, but also available through digital communications. Arreya has built in the support to integrate Google’s powerful program “Translate” that can now be applied to any Arreya presentation. And as complex as translating another language might sound, the steps to make it happen are quite simple, involve no programming and it is remarkable how instant it happens for language translation for interactive digital signage. Arreya’s Translate feature eliminates a ton of setup time and costs that were previously associated with multi language displays, making language translation a reality on any display. Imagine public directories immediately able to change all the copy to a different language or public information kiosks at parks and government buildings translating for every visitors with hundreds of different languages.
How Google Translate Integrates with Arreya Digital Signage
Google Translate is a powerful tool that can translate text, voice, photos, handwriting, and can even translate in real time through your phone’s camera. Just like you are used to seeing on the web, you can now translate the text on your digital signage to over 100 different languages.
While this may seem simple, a lot is going on in the background – leveraging machine learning, neural networks and AI to produce the best possible translation, without a human translator. In a few clicks your digital signage or kiosk can leverage AI and machine learning with Arreya Google Translate Widget. Here is a list of all of the available languages.
To add Google Translate to your presentation it’s as simple as selecting the widget from the menu, picking which language to translate into, and what you want the button to display. How To YouTube tutorial.
We’re also working with the Google Translate API to enable additional features in the future. By tying in translate with other features like voice commands in Google Dialogflow, you can also detect what language a person is speaking and automatically translate the content, as well as navigating them to the correct page.
Adding Translate Menu and Buttons to Interactive Digital Signage
With language translation for interactive digital signage being a new specialized feature and not common on most kiosks it is best to emphasize or call it out with a button so that anyone interacting with the display knows the option is available. By adding a button to your pages you will always give someone the option to translate or convert back. If the next person walks up to interact after someone has just been reading a spanish version you will want to have a button on every page available to convert back to English or a different language. The device will also automatically time out when not in use and convert back to the English Home page.
So make sure to add a translate button on all the pages to take the viewer to a landing page for translation options. This is where you have set up buttons for each language you want to target. Follow the same steps mentioned above to set up each language option you want available to create your menu. Also include an English button in the menu list. Once the menu is set up “push it live” and now your entire site can have language translation applied to all your pages
BELOW notice how the “Language” button is part of the navigation menu
BELOW is a sample menu showing the 4 language options on this display
Designing Digital Signage for Translation
What Gets Translated
When designing your digital signage you will need to think about what text fields will be able to be translated. Just because there is text on a screen doesn’t mean Google Translate will be able to identify it for conversion. What it comes down to is how the text is established in the editor. Translate will target all forms of text fields or any text that is typed into the Arreya Editor. What will not be recognized is any text that is part of a visual graphic element because it is rasterized to pixels. This would apply to any photo, graphic or video, or web image that has text on it. So if you are designing a promotional ad or custom icon in photoshop just omit the text and then once you import your graphic into the editor type the text over the image. This also applies to any logo element where you might have a tag line – if you want the tag line to translate you would want to remove the tag line in the logo file and type the text in the editor.
BELOW shows Spanish Translation for “Donate Today” The initial image is saved from the web and uploaded but translation was unable to convert the text in pixel format. This can be fixed by creating the blue background shape without text then type the words in Arreya and now the text will get translated.
What to Keep In Mind When Designing for Text Translation
Now that we understand what text gets translated, identify what happens to text with translation and how to plan for the change so that your content still reads well and looks good. One thing to always remember is most languages when converted will add more characters and become longer then english text. Keeping this in mind it is important to plan for text to extend and change within your design at about a 25% change rate.
Which Page Elements to Watch Out For When Designing
Usually a headline will be one or two lines but if translation adds more words your headline will be taking up too much space resulting in it extending into a photo or even get partially cut off. The best adjustment for headlines is to make sure you extend the text fields and adjust the fonts so there is enough room for the translation reflow. This could mean planning for the headline to continue onto another line below or make the fonts smaller in the space so that translate can fit more characters.
BELOW shows French translation for two headlines set up on a page with and without adjustments. Notice how much better it reads when planning for translation
Body Copy or Paragraphs
The best practice to handle larger areas of copy is to allow for at least 25% gain. The way to set this up is to just simply extend the text box fields with a lot of empty space below. This allows the translated text to continue onto the page without getting cut off. So when designing your page plan on some extra “white space” for text to still read well when it overflows from the english version. If you already have a lot of text and content that fills the page then you will want to edit it down, size it down or add additional pages to break up all that content.
BELOW has German translation in paragraphs without adjustments then shows how with a few tweaks to the layout and leaving more open area and larger text fields how it will read and look better.
Buttons for Interaction
Again thinking about the text characters expanding and in some cases going from one word to two words buttons will need to be thoughtfully positioned and sized for translation.
Two ways you can handle this is to turn on the auto text flow in Arreya on your button settings which will then automatically adjust the font to fit your button size. But this would then change the size of the fonts between each button making them less consistent and some could get small. If this is not the look you want then the buttons will need to be initially set up oversized with room for the text to run longer yet still fill the specific button shape.
Apply Translate Today
Well that covers language translation for interactive digital signage and Google translate for digital signage, how simple it is to apply and what best practices to design into your digital display. We do hope our language options will help you welcome all viewers to interact with your display even if they can’t read English so that you can now offer a very user friendly experience for everyone to enjoy!
We always like to hear about our client’s success and would love to hear about your projects and how you are using Arreya translate on your kiosks for complete digital communications. For a full tutorial watch our YouTube video.