New feature: toggle "pseudo-localization" to make design international

[raffaelelimosani]

Text in languages other than English is often much longer (~Europe) or taller (~Asia), hence once the UI is localized there may be usability issues with users not being able to see the entire text due to truncations and clipping. Shortening a translation is often the only approach at this point, however that impacts the quality of the product.

What if there was a toggle in Sketch-Measure that shows off\on the possible longer and taller strings to designers, so that they can better accommodate the UI? You may add a new layer for the pseudo-localized text and toggle its visibility, for example.

Pseudo-localization is the process of changing text (usually English) into a fake-English, still readable, using particular characters-mapping (e.g. a --> à,á,â,ã,ä,å,ā,ă,ą,ǻ,ά,α,а,д,..) [https://en.wikipedia.org/wiki/Pseudolocalization]. Usually pseudo-loc is used by engineers in the testing-phase, but it may be too late (i.e. no time to re-design): in contrast, by using this feature designers can see the possible impact of taller and longer strings, hence adjust the UI immediately and produce "world-ready" redlines, while increasing agility in release, decreasing localization-costs and creating a better product overall.

Check the branched-code here: https://github.com/raffaelelimosani/sketch-measure - this is a very lightweight engine for strings-pseudo, to mimic how taller and longer real text may be..

Thanks! Raffaele

[utom]

How to use it?

[raffaelelimosani]

Thanks for your interest. The function “convertString” simply takes a string and converts into pseudo – e.g. from “Hello World” to “[ۘĦěļļơ Ŵơřļđ_ȡūšÇıǷŞȽIJʅ]”. I’m not familiar with Sketch object-model, anyway as mentioned in the commented section (pasted below), the idea would be to “convert” the visible strings into pseudo (and back to English, when user toggles-off). I thought about an alternate layer with pseudo-text, or possibly you can temporarily store the English strings into a database (or similar). The intended goal is for Designers to be able to SEE & FEEL how the UI may look like with taller and longer text (and often, text is much longer in many languages, compared to English) – thus giving them an opportunity to for example increase padding or width, etc.. Makes sense?

+com.utom.extend({ isPLocalized: false, togglePLoc: function (){ //1- retrieve list of strings in UI, to create alternate layer with pseudo-strings displayed (?) //2- if (!isPLocalized) // foreach string in list, convert from UI-language to PLoc // else // foreach string in list, restore back string-value of UI-language //3- [optional?] if text-measure was shown, re-calculate and update return; },

Thanks! Raffaele

[raffaelelimosani]

I've been talking to Designers and are skeptical about pseudo-language. Even if pseudo-language is “readable” and helps with clippings for the ascenders\descenders, the most important issue to address is about truncations happening after translations, just because of lack of space in the UI redlines. To address that, what Designers lack is “just” the knowledge of the potential expansion-rates applied. Please check the new simplified function now in ploc branch, let me know also offline if you can adopt it by extracting text programmatically and expanding it with the provided rates. Thanks!