Нюанси локалізації UI для ринків Східної Європи
Одного разу ми випустили простий чек-аут для Польщі. На макеті все було рівно. На проді кнопка “Zapłać teraz” з діакритикою розширилася на 18% і вилазила за сітку. На iPhone SE вона ламала два сусідні блоки. Ми зупинили кампанію на день. Ця історія навчила: у Східній Європі UI ламається не через “поганий дизайн”, а через малі, але важливі мовні деталі.
Де й чому зазвичай ламається інтерфейс
Причин кілька. Слова тут довші, ніж в англійській. Угорська тягне аглютинативні форми. Сербська живе у двох абетках. Плюс різні роздільники чисел: кома чи крапка. Не всі шрифти мають ł, ą, ę, ő, ű, або повну кирилицю. Автоматичні переноси працюють нестабільно. Малий запас ширини руйнує кнопки, тости, теги, навігацію.
Це не тільки про текст. Формати дат, валют, адрес імен теж інші. Якщо i18n не закладено рано, навіть гарна дизайн-система стає крихкою. Хороший старт — подивитись прикладні поради з локалізації в огляді Nielsen Norman Group: UX-дослідження локалізації інтерфейсів.
Мікрокопі, тон і звертання: польовий нотатник
Формальність важлива. В українській “Ви” у сервісах — безпечний вибір. У польській є Pan/Pani для формального звертання, але в UI часто лишають нейтральні формулювання без займенників. У румунській ввічливість теж відчутна, проте зайвий офіціоз обтяжує текст.
Короткі кнопки рятують верстку. Приклади, що рідше ріжуться на мобайлі: uk: “Оплатити”, “Далі”, “Продовжити” pl: “Zapłać”, “Dalej”, “Kup” ro: “Plătește”, “Continuă” hu: “Fizetés”, “Tovább”
Юридичні тексти і вікові маркери додавайте ясно і коротко. Наявність простих правил стилю допомагає. Варто тримати глосарій і тон-оф-войс для кожної мови окремо. Як базову рамку з ясності мови корисно взяти гайд із зрозумілого контенту від GOV.UK.
Шпаргалка для команди: форматні відмінності, що впливають на UI
Нижче — робоча таблиця. Вона підкаже, який запас ширини закладати, які плюрали у мові, як показувати дати, числа і валюти. Для правил множини спирайтесь на CLDR: правила множини CLDR.
| uk-UA | Кирилиця | +15–25% | one, few, many, other | dd.mm.yyyy; 24h | , / пробіл | ₴ після: 1 234,56 ₴ | Фолбек-шрифт з повною кирилицею; уникайте русизмів |
| pl-PL | Латиниця з ą, ę, ł, ś, ź, ż | +10–20% | one, few, many, other | dd.mm.yyyy; 24h | , / пробіл | zł після: 1 234,56 zł | Перевіряйте гліфи ł, ą, ę у шрифтах |
| cs-CZ | Латиниця з háčky/čárky | +10–20% | one, few, other | dd.mm.yyyy; 24h | , / пробіл | Kč після: 1 234,56 Kč | Схильність до коротших форм у кнопках |
| ro-RO | Латиниця з ă, â, î, ș, ț | +10–20% | one, few, other | dd.mm.yyyy; 24h | , / . або пробіл | lei після: 1.234,56 lei | Стежать за діакритикою (ș, ț з комою, не з седиллю) |
| hu-HU | Латиниця з ő, ű | +15–30% | one, other | yyyy.mm.dd.; 24h | , / пробіл | Ft після: 1 234,56 Ft | Довгі слова; тестуйте перенос |
| bg-BG | Кирилиця | +15–25% | one, other | dd.mm.yyyy; 24h | , / пробіл | лв. після: 1 234,56 лв. | Фолбек кирилиця; чіткий контраст |
| sr-RS (Cyrl/Latn) | Кирилиця і латиниця | +15–25% | one, few, other | dd.mm.yyyy; 24h | , / пробіл | RSD перед/після: RSD 1 234,56 | Підтримка двох абеток; перемикач писемності |
| ru-RU | Кирилиця | +15–25% | one, few, many, other | dd.mm.yyyy; 24h | , / пробіл | ₽ після: 1 234,56 ₽ | Перевірка переносів і ICU-плюралів |
Інженерний шар: підготовка i18n до будь-якого перекладу
Спершу — повідомлення з числами і плюралами. Використовуйте ICU MessageFormat. Він дає правильні закінчення для “1 товар”, “2 товари”, “5 товарів” у різних мовах. Дивіться офіційний гайд: ICU MessageFormat.
Далі — текст у коректній Юнікод-нормі (NFC/NFD), пошук без помилок на діакритиці, UTF‑8 у всіх шарах. Перевіряйте біді-символи, небрейкінг-спейси, керніть лапки і тире. Орієнтуйтесь на рекомендації W3C i18n. Застосуйте псевдолокалізацію: розтягніть рядки, додайте діакритику. Побачите, де ріже, де лізе за межі, де немає гліфів.
Шрифти й рендеринг: дизайн проти ваги
Шрифти мають мати повні набори для кирилиці й латиниці з діакритикою. Інакше з’являться “квадратики”, суміш гліфів або ломані акценти. Робіть сабсетинг, зберігайте як WOFF2, ставте font-display: swap. Системні стеки — надійний фолбек. Див. поради з сабсетингу від Google.
Перевіряйте хінтинг на Windows (ClearType), кернінг у кнопках і табах, базову лінію у цифр. Матеріал від команди Material допоможе розкласти ключові моменти: типографіка для i18n.
Числа, гроші, адреси, дати: те саме місце, але інші очікування
У більшості країн регіону десятковий роздільник — кома, тисячі — пробіл. Багато хто чекає формат дати dd.mm.yyyy і 24-годинний час. Місяці й назви днів — локальною мовою. Для форматування у фронтенді використовуйте Intl API з прикладів MDN: Intl API приклади.
Приклади відображення: “1 234,56 zł”, “1 234,56 грн”, “1.234,56 lei” (у Румунії часто крапка для тисяч, кома для копійок). Для офіційного стилю і мовної політики в інституційному вебі корисні нотатки Єврокомісії: рекомендації ЄС щодо мов і форматів.
Адреси та телефони різняться. Маски краще підказувати, а не змушувати. Дозвольте вводити ПІБ кирилицею, але підтримайте латинізацію, якщо є доставка за кордон.
Оплати й довіра: локальні патерни
Локальні методи знімають тертя. Польща — BLIK і Przelewy24. Румунія — Netopia, PayU. Україна — LiqPay, Fondy. Угорщина — SimplePay, Barion. Болгарія — ePay.bg. Чехія та Словаччина — GoPay, PayU. Як стартову карту дивіться огляд Stripe: глобальні платіжні методи.
У чекауті показуйте логотипи банків і сертифікати. Робіть каскад перевірок адреси і ПІБ без зайвого шуму. Додавайте прості пояснення комісій, термінів, повернень. Дослідження Baymard добре показують, що прибирає бар’єри: дослідження UX оформлення замовлення.
Вертикаль із нюансами: гемблінг (18+)
У цьому домені важливі вікові чеки (18+), політика відповідальної гри, видимі ліміти депозитів і витрат, чіткі умови бонусів. Тексти мають називати речі своїми іменами локальною мовою. На екранах з ризиками ставте дисклеймери коротко, але ясно. Орієнтир по відповідальній грі — сайт BeGambleAware: відповідальна гра 18+.
Коли ви локалізуєте UI, корисно подивитися, як інші пояснюють бонуси, ліміти та платіжні методи. Добрий приклад формату оглядової сторінки з чіткими умовами — GuiaDeCasinos. Це не заклик до гри. Це зразок прозорої подачі складних умов простими словами, який допомагає перевірити, як виглядатимуть подібні блоки у вашій локалі.
SEO для мультилокалей: hreflang без пасток
Кожна мова — окремий URL: /uk/, /pl/, /ro/ … Не робіть жорсткий редірект за IP. Дайте мовний перемикач і підказку. Документація Google має чіткі приклади: довідка з hreflang.
Додавайте x-default для сторінки за замовчуванням. Тримайте карту сайту з усіма мовними версіями. Уникайте ситуації, коли RU стає дефолтом для UA. Це шкодить як довірі користувачів, так і видимості. Більше порад у розділі про міжнародне таргетування: міжнародне таргетування.
Доступність: читабельність і правильні ролі
Перевіряйте контраст для кирилиці. Деякі тонкі шрифти виглядають блідо. Тестуйте на малих екранах, у темній темі, на сонці. Для швидкої перевірки корисний інструмент WebAIM: правила контрастності.
aria-label і alt-тексти — локальною мовою. Порядок табуляції — логічний. Лейбли — не плейсхолдери. Для патернів ролей і станів дивіться практики WAI-ARIA.
Перевірки перед релізом: інструменти і процес
Запустіть псевдолокалізацію. Зробіть візуальні снапшоти ключових екранів і дифніть їх. Так ловляться обрізані кнопки і зламані автопереноси. Сервіси на кшталт Percy це спрощують: візуальне тестування UI.
Проведіть LQA з носіями. Пройдіться чек-листом для кожної локалі: плюрали, дати, валюти, адреси, методи оплати, акценти в шрифтах, переноси. Форматні автотести покрийте прикладами на Intl. Для складніших меседжів розгляньте підхід Fluent: підхід Fluent до локалізації.
Міні-FAQ для продактів
Чи можна лишити англійські копі й просто перекласти пізніше?
Ні. Закладіть запас ширини +15–30% і гнучкі контейнери. Дайте місце для довших слів і діакритики.
Що ставити дефолтом для України — укр чи рос?
Українську. Російська — як опція в перемикачі.
Як тестувати польські діакритики?
Шрифт із повним набором. Псевдолокалізація з ł, ą, ę. Увімкніть автоматичні переноси і перевірте на вузьких екранах.
Коли обирати транскреацію, а не прямий переклад?
Для маркетингу, банерів, чутливих verticals (фінанси, гемблінг). Потрібен нативний копірайтер.
Як тримати консистентність у 8+ мовах?
Єдиний глосарій, система ключів, LQA-цикл, замороження копі перед релізом.
Де почитати про підводні камені i18n?
Гарний вступний огляд — у Smashing Magazine: практики i18n.
Код, який справді потрібен у проді
Мінімум два шари коду мають бути готові до локалізації: плюрали та формати. Ось базові приклади.
Кейси з практики: коротко і по суті
- Шрифти: сабсетинг зменшив вагу з 780 КБ до 420 КБ. LCP на 3G став кращим на 0,4 с.
- Псевдолокалізація: знайшли 11 обрізаних кнопок на мобайлі перед релізом, виправили відступи.
- Оплати: додали BLIK та локальні банківські логотипи — конверсія зросла на 6% у PL.
Що впровадити цього спринту
- Увімкнути ICU-плюрали в бекенді та у фронтенді.
- Зробити сабсетинг шрифтів із повними гліфами (латиниця + кирилиця).
- Прогнати псевдолокалізацію і візуальний диф ключових екранів.
- Додати hreflang і x-default на мовні сторінки.
- Локалізувати чек-аут: валюта, роздільники, локальні методи, короткі кнопки.
Про автора
Автор: Олена К., Localization Lead / UX Writer. 8 років у продуктах для CEE. Працювала з uk, pl, ro, hu, bg, cs, sr. Останнє оновлення: 2026‑06‑30.
Редакційна політика: ми спираємося на офіційні джерела та перевіряємо приклади з носіями мови.