Введіть мінімум 3 символи для пошуку

·15 хв читання

Чому мультимовні сайти потребують іншого підходу до дизайну

Наш сайт працює трьома мовами. Довжина тексту, типографіка, формальність і AI-переклад ламають дизайн, побудований спочатку під одну мову.

Why Multi-Language Websites Need a Different Design Approach

Мультимовному, тобто багатомовному, сайту потрібен свій підхід до дизайну, бо мова змінює не лише слова: короткі підписи виростають у рази, шрифт має працювати в кожній писемності, змінюються тон і формальність, а кожну версію доводиться підтримувати після запуску. Усе це дешево закласти в першому ескізі й дорого лагодити потім.

Наш власний сайт існує трьома мовами: англійською, російською і українською. Не як запізніла думка, не як машинний переклад, наліплений поверх англійського оригіналу, а як три версії, про які ми реально думаємо окремо, коли проєктуємо щось нове.

Більшість агенцій ставляться до мультимовних сайтів так само, як до мобільної адаптивності: галочка, плагін, перемикач у шапці. Спочатку дизайн, потім переклад рядків, потім публікація перекладу.

Цей процес чудово працює для лендінгу, що продає один продукт одному ринку.

Він розвалюється в той момент, коли мови це не просто різна лексика для однієї аудиторії, а різні аудиторії з різними очікуваннями, різними звичками читання і різними стосунками з брендом.

Мультимовний сайт це не один дизайн, перекладений тричі.

Це цифрова система, спроєктована працювати одразу для різних мов, аудиторій, ринків і постійних контент-операцій.

Довжина тексту ламає верстку

Довжина тексту ламає верстку

Перша проблема найбільш механічна, і та, яку більшість дизайнів взагалі не враховують.

Є поширене правило: російська й українська на 15-25% довші за англійську при тому самому сенсі. Ця стаття теж його повторювала, поки в листопаді 2026 року ми не порахували власний сайт, і правило не підтвердилося.

У 212 статтях, опублікованих усіма трьома мовами, медіанна українська стаття містить 0,97 від кількості знаків англійської версії, а російська 1,01. Слів при цьому менше, 0,87 і 0,88 від англійського рахунку, зате вони довші. Наші тексти проходять транскреацію, а не порядковий переклад, тому буквальний переклад може вийти довшим. Але на самій сторінці зв'язний текст вийшов майже врівень.

Інтерфейс поводиться інакше. Ми порівняли 578 рядків інтерфейсу з мовних файлів цього сайту і згрупували їх за довжиною англійського варіанта:

Довжина англійськоюРядківМедіана довжини, RU / UA до ENRU довша в 1,5 раза і більшеUA довша в 1,5 раза і більше
До 10 знаків1891,00 / 1,0018%19%
11-201741,07 / 1,025%4%
21-30571,04 / 1,002%0%
31-60491,00 / 0,982%2%
61 і більше1090,99 / 0,970%0%

Медіана майже не рухається. Проблема в першому рядку: майже кожен п'ятий підпис до 10 знаків виростає в півтора раза і більше, а в найдовшій групі таких немає. Близько 40% коротких підписів, навпаки, стають коротшими, тому єдиної найдовшої мови теж немає: Read the article українською коротше, «Читати статтю», а How we work довше, «Як ми працюємо».

Найбільший стрибок у наборі дає посилання в підвалі. SEO, 3 знаки англійською, українською називається «Просування сайтів», 17 знаків. Apply, 5 знаків на кнопці, стає «Залишити заявку», 15 знаків. Річ тут не в довжині мови: на цьому ринку те саме просто називають іншими словами.

Три підписи цього сайту англійською, російською та українською: SEO, Apply і Book a Strategic Session, під кожним кількість знаків
Три підписи з цього сайту. Число під кожним означає його довжину в знаках.

Зовнішні цифри підтверджують саму закономірність, хоча числа в усіх різні. Таблиця IBM, яку наводить W3C, відводить рядку до 10 англійських знаків у два-три рази більше місця, а рядку понад 70 знаків приблизно в 1,3 раза. Підрахунок Alconost, опублікований у 2016 році, дає російську і польську на 9,2% довшими за англійську, французьку й іспанську на 20,3%, італійську і німецьку на 17,3%, а арабську на 6,25% і спрощену китайську на 62% коротшими.

Кнопка з написом «Book a Call» комфортно вміщується англійською.

Український еквівалент, «Записатися на дзвінок», майже вдвічі довший за кількістю символів.

З нашою кнопкою заявки те саме: у Book a Strategic Session 24 знаки, в українській версії 31, у російській 35.

Пункт навігації, що акуратно вміщується в один рядок англійською, може перенестись на два рядки українською і зламати весь вертикальний ритм шапки.

Спроєктуйте верстку спочатку англійською, і будь-яка інша мова стає латкою.

Кнопки, розмічені під англійський текст, починають обрізатись. Навігація, побудована під короткі англійські підписи, починає непередбачувано переноситись.

У наших проєктах це найчастіше трапляється у двох місцях: у перевантаженому меню і у фіксованих блоках, які розробили англійською, а потім російська чи українська туди вже не вміщується. Різниця тут значна. Своєї шкоди завдають і переноси: короткий прийменник, що завис у кінці рядка, українською і російською читається як помилка, тому тексту потрібні не лише запас місця, а й нерозривні пробіли.

Рішення не в тому, щоб просто збільшити запасний розмір шрифту. Рішення в тому, щоб проєктувати компоненти з достатнім запасом гнучкого простору з самого початку, так щоб значне збільшення довжини нічого не ламало, і тестувати кожен компонент на найдовшому варіанті його тексту, якою б мовою він не виявився.

Наші цифри підказують і те, з чого починати перевірку: з найкоротшого тексту, а не з абзаців. Навігація, кнопки, вкладки і фільтри, кожен усіма мовами, у найвужчій ширині, яка є у верстки.

Компонент може вирішувати і сам. Смуга розділів у нашому блозі вимірює свої підписи до першого малювання: якщо вміщуються, вона лишається в один рядок, якщо ні, відкривається у дві колонки, будь-якою мовою. На телефонах тонка смуга під шапкою показує ті самі розділи короткими мітками, і довжина слова перестає мати значення.

Типографіка не універсальна

Типографіка не універсальна

Шрифт, обраний за те, як він виглядає англійською, не обов'язково такий самий добрий у кирилиці.

У деяких шрифтів чудово промальовані латинські символи і ледь підтримуваний кириличний набір, доданий майже як запізніла думка: нерівні товщини штрихів, незграбні форми літер, інтервали, які ніхто й ніколи не тестував очима людини, що читає кирилицю щодня.

Те саме працює і в зворотний бік.

У шрифту з чудовою підтримкою кирилиці може бути непримітний латинський алфавіт.

Обирати шрифт для мультимовного сайту означає перевіряти кожну систему письма з рівною суворістю, а не обирати шрифт під основну мову і сподіватись, що решта успадкує його якість.

Міжрядковий інтервал, трекінг і навіть пунктуаційні конвенції теж зміщуються.

У російської й української типографіки свої конвенції лапок, свої правила для тире в діалогах, свої комфортні довжини рядків для читання.

Імпортувати англійські типографічні замовчування цілком означає отримати текст, який виглядає технічно правильним і читається трохи чужим для носія мови.

Деякі мови змінюють інтерфейс

Деякі мови змінюють інтерфейс

Англійська, російська й українська часто можуть ділити один і той самий базовий інтерфейс, навіть коли типографіка і довжина тексту різняться.

Це припущення стає значно слабшим, коли змінюється сама система письма.

Арабська вводить читання справа наліво і напрямок інтерфейсу.

Навігацію, вирівнювання, іконки і візуальний потік сторінки, можливо, доведеться переглядати, а не просто перекладати.

Китайська створює свій набір міркувань.

Текст може бути помітно компактнішим, типографіка поводиться інакше, і залежно від ринку і продукту навігацію, пошук, ієрархію інформації і патерни взаємодії, можливо, теж доведеться переглядати.

Це не просто перекладацькі проблеми.

Іноді зміна мови означає зміну інтерфейсу.

Тому мультимовна дизайн-система потребує достатньої гнучкості, щоб вміщувати різні системи письма і патерни взаємодії з самого початку.

Переклад це не транскреація

Переклад це не транскреація

Найглибша проблема не візуальна. Вона в тому, що буквальний переклад хорошого англійського тексту рідко стає хорошим текстом цільовою мовою.

Англійський маркетинговий текст спирається на короткі, різкі фрагменти речень, пряме звертання і певний ритм, що йде з самої мови.

Перекладіть цей ритм слово в слово українською, і він часто звучить скуто, або того гірше, ніби написаний людиною, яка насправді не говорить цією мовою.

Перекладене речення і транскреоване речення можуть говорити те саме і звучати абсолютно по-різному.

Транскреація означає переписати ідею у власному природному ритмі цільової мови, а не переносити слова через мовний кордон.

Заголовку, що працює завдяки англійській грі слів, може знадобитись зовсім інший заголовок українською, побудований навколо української гри слів, а не перекладена версія англійського жарту, який більше не працює.

Саме тут більшість агенцій зрізають кути, бо транскреація вимагає справжнього володіння мовою і реального часу, а в перекладацького API цього немає.

Різницю бачить носій мови одразу, навіть якщо вона невидима тому, хто затвердив переклад, не читаючи його уважно.

AI перекладає, але не завершує

AI перекладає, але не завершує

AI змінив економіку мультимовного контенту.

Перший переклад, що раніше займав години, тепер можна згенерувати за хвилини.

Для великих сайтів це робить початкову локалізацію кардинально швидшою і практичнішою, особливо коли йдеться про сотні чи тисячі сторінок.

Але згенерований переклад не те саме, що готовий контент.

AI може перекласти слова коректно, але все одно упустити те, як люди на конкретному ринку реально говорять, шукають, порівнюють продукти чи розуміють бренд.

Сторінка послуги може бути граматично бездоганною і все ж звучати неприродно. Опис продукту може зберегти сенс, але втратити емоційний тон.

А люксовий бренд може втратити значну частину свого характеру, якщо кожна мова обробляється як буквальний переклад того самого речення.

Вдаліший робочий процес ближчий до такого:

Створити → AI-переклад → Перевірка → Адаптація → Транскреація де потрібно → Публікація

AI надзвичайно корисний для першого проходу.

Він чудово справляється з обсягом, консистентністю і повторюваною роботою.

Але фінальне питання не повинно звучати: «AI переклав це правильно?»

Воно повинно звучати: «Чи написала б це так людина, яка реально говорить цією мовою і розуміє цей ринок?»

Не кожному шматку контенту потрібна транскреація.

Технічна специфікація може вимагати лише точного перекладу. Заголовку кампанії чи люксовому бренд-посланню може знадобитись повна транскреація.

AI повинен знижувати вартість локалізації.

Він не повинен знижувати стандарт якості.

Формальність і культурний зсув

Формальність і культурний зсув

Англійська здебільшого стерла різницю формального і неформального звертання.

«You» працює незалежно від того, звертаєшся ти до незнайомця, клієнта чи близького друга.

Російська й українська цю різницю взагалі не стерли.

Вибір між ти і ви це не деталь перекладу.

Це брендове рішення, яке змінює те, як відчувається весь сайт.

B2B-сайт, націлений на закупівельні команди в корпораціях, ймовірно, хоче формальне ви всюди, тоді як молодіжний споживчий бренд може навмисно обрати неформальне ти.

Помиліться тут, і невідповідність одразу відчує носій мови, навіть якщо не завжди зможе сформулювати, чому текст відчувається не так.

Англійська не дає жодного сигналу, який вибір зробити, бо в англійської спочатку немає цього вибору.

Це має бути свідоме рішення, ухвалене один раз, рано, і потім послідовно застосоване на кожній сторінці, кожній кнопці і кожному повідомленні про помилку.

Образи, метафори і культурні відсилки, що ідеально лягають для американської чи західноєвропейської аудиторії, іноді лягають дивно, або взагалі ніяк, для іншого ринку.

Метафорі, побудованій навколо культурно специфічного свята, виду спорту чи історичної відсилки, потрібен реальний еквівалент, а не буквальний переклад відсилки, яку ніхто на цільовому ринку не впізнає.

Те саме стосується візуального контенту.

Фотографія, люди, локації, приклади, сигнали довіри і навіть порядок подачі інформації можуть означати різне на різних ринках.

Що вважається переконливим соціальним доказом, прийнятною прямотою в продажному тексті, чи продуктом, що заслуговує на довіру, все це варіюється за ринками.

Тому глобальна дизайн-система не повинна означати однаковий контент всюди.

Вона повинна давати послідовний каркас, лишаючи достатньо місця, щоб кожен ринок відчувався рідним.

Мультимовна контент-операція

Мультимовна контент-операція

Запуск нової мови не закінчується, коли переклад завантажено.

З цього моменту кожна мова стає ще однією версією сайту, яку потрібно підтримувати.

Нову сторінку послуги потрібно створити кожною релевантною мовою.

Новий кейс потрібно опублікувати і локалізувати.

Продукти, ціни, зображення і підписи змінюються. Публікуються нові статті.

Застарілу інформацію потрібно оновити чи прибрати.

А іноді сам контент потрібно адаптувати, а не просто перекласти.

Це означає, що мультимовний сайт створює постійну операційну вимогу: хтось повинен володіти кожною мовою.

Бізнесу потрібно знати:

  • хто створює оригінальний контент
  • хто перекладає чи адаптує його
  • хто його перевіряє
  • хто публікує
  • хто тримає версії синхронізованими
  • хто оновлює застарілу інформацію
  • і що відбувається, коли одна мова навмисно відрізняється за змістом від іншої

Інакше англійська версія може мати 50 статей, друга версія 32, а третя 11, причому найновіший кейс існує тільки однією мовою.

Технічно всі три мови доступні.

Операційно сайт розповідає відвідувачам три різні версії історії компанії.

Перемикач мови створює очікування. Бізнес повинен бути готовий підтримувати те, що обіцяє за цим перемикачем.

Для великих сайтів мультимовний контент стає власним робочим процесом: Створити → Перекласти → Перевірити → Опублікувати → Оновити → Архівувати

І цей процес повинен працювати через сторінки, послуги, продукти, кейси, блог-контент та інші типи контенту.

Мультимовний сайт тому не тільки UX/UI-проблема.

Це ще й проблема управління контентом, governance і операційна проблема.

Мультимовне SEO це не переклад

Мультимовне SEO це не переклад

Мова сайту також змінює те, як його знаходять.

Перекладена сторінка автоматично не створює локалізовану пошукову присутність.

Різні ринки можуть використовувати різну термінологію для того самого продукту чи послуги.

Пошуковий намір може змінюватись.

Ключові слова можуть змінюватись.

Сторінки, які заслуговують існувати, можуть змінюватись.

Навіть внутрішню перелінковку і ієрархію контенту, можливо, доведеться переглянути.

Потім є технічний шар: локалізовані URL, метадані, структуровані дані, мовні сигнали і реалізація hreflang, все це повинно працювати разом.

Сторінка може бути ідеально перекладена і все одно погано працювати на іншому ринку, бо вона ніколи реально не була локалізована для пошуку.

Це ще одна причина, чому мультимовний дизайн і контент-стратегію не можна повністю відділити від SEO.

Ви не просто публікуєте ту саму інформацію іншою мовою, ви створюєте ще одну точку входу в бізнес.

Вартість за межами розробки

Вартість за межами розробки

Вартість мультимовного сайту це не лише вартість проєктування і розробки додаткових мовних версій.

Це ще й вартість будівництва і підтримки того, що бізнесу насправді може бути не потрібно.

Додавання ще однієї мови означає більше контенту для створення, перекладу і підтримки, більше сторінок для проєктування, більше SEO-роботи і більше постійних редакторських зусиль.

Тому правильне питання не: «Скільки мов ми можемо додати?»

А: «Які мови бізнесу реально потрібні?»

Компанія може виявити, що один ринок генерує майже весь попит, тоді як інша мова додає мало комерційної цінності, зате створює сотні сторінок і постійне навантаження на підтримку.

Те саме стосується глибини локалізації.

Не кожній сторінці потрібно існувати кожною мовою, і не кожному шматку контенту потрібен негайний переклад чи однакова глибина.

Мета не в тому, щоб максимізувати кількість мов.

Мета в тому, щоб розподілити час і ресурси бізнесу туди, де вони створюють максимум цінності.

Інакше мультимовний сайт може стати вражаючою колекцією ідеально перекладених сторінок, які нікому насправді не потрібні.

Так ми проєктуємо корпоративні сайти кількома мовами: мови, ринки, редактори та інтеграції входять у дизайн з першого ескізу, а не додаються шаром після запуску.

Закласти всередину, не зверху

Закласти всередину, не зверху

Практична відповідь така: ставитись до мультимовності як до вимоги дизайн-системи з першого ескізу, а не як до проходу з локалізації в самому кінці.

Кожен компонент проходить стрес-тест на найдовшому варіанті свого тексту, перш ніж його затвердять.

Кожен шрифт перевіряється в кожній системі письма, яку сайт реально використовуватиме.

Кожен шматок тексту пишеться, а не просто перекладається, людиною, яка думає цією мовою від природи.

CMS повинна підтримувати контент-процес.

Технічна архітектура повинна підтримувати мовну структуру.

SEO-архітектура повинна підтримувати локалізований пошук.

А бізнес повинен бути готовий підтримувати мови, які вирішує запустити.

Це повільніший і дорожчий процес, ніж перекласти готовий англійський сайт.

Але тільки так виходить сайт, який відчувається рідним кожною мовою, якою він опублікований, а не рідним однією мовою і прийнятно перекладеним рештою.

Ми пройшли рівно цей процес, будуючи власний сайт англійською, російською і українською, і це сформувало рішення, які ми б не ухвалили, проєктуючи під одну мову: як розраховуються підписи навігації, як кнопки обробляють змінну довжину тексту, як формальність лишається послідовною.

Це також підтвердило те, що ми регулярно бачимо в міжнародних проєктах: локалізація не те, що відбувається після дизайну.

Це одне з обмежень, яке повинно формувати дизайн з самого початку.

Хорошому мультимовному сайту не обов'язково мати однакову кількість сторінок, однаковий текст чи ідентичні зображення кожною мовою, і не обов'язково вимагати однаковий інтерфейс для кожного ринку.

Незмінною має лишатись базова система:

бренд, стандарт якості, ключовий досвід і логіка, що тримає все разом.

Все інше повинно мати достатньо гнучкості, щоб реагувати на мову, ринок і аудиторію, яку обслуговує.

Бо мета не в тому, щоб зробити сайт технічно доступним десятьма мовами.

Мета в тому, щоб зробити сайт, який реально працює на ринках, які важливі бізнесу.

Мультимовний сайт це не один інтерфейс з різними словами. Це система, спроєктована під різні мови, аудиторії і реальності.

Якщо ви будуєте чи переробляєте сайт більш ніж під один мовний ринок, важливі питання повинні отримати відповідь до того, як почнеться переклад.

Які мови реально важливі бізнесу? Що потрібно змінити в дизайн-системі? Якому контенту потрібен переклад, адаптація чи транскреація? Як використовуватиметься AI, і де залишається необхідним людський контроль? Що потрібно архітектурі, що стоїть за всім цим?

Ми детальніше писали про вибір правильного партнера для розробки у статті Як обрати компанію для веброзробки, і про технічний борг, що розкривається під час редизайну, у статті Прихований технічний борг, через який редизайн сайту коштує дорожче за план.

Мультимовність змінює і графік: це ми розбираємо у статті Скільки насправді займає розробка e-commerce і що має робити клієнт.

Пошукова сторона того самого питання, включно з hreflang, логікою canonical і доменною архітектурою, розібрана у статті Мультимовне SEO: чому перекладені сторінки не ранжуються на своїх ринках.

Що входить у дизайн багатомовного сайту за шарами, скільки це коштує і чим відрізняється сайт двома мовами, ми розібрали у статті Дизайн багатомовного сайту: що змінюється, крім перекладу.

FAQ

Часті запитання

Наскільки український або російський текст довший за англійський?

Залежить від довжини тексту. На нашому сайті цілі статті виходять майже врівень усіма трьома мовами, а 18-19% підписів до 10 знаків виростають у півтора раза і більше.

Чому короткі підписи ламають верстку сильніше за довгий текст?

Абзац приймає зайві слова, ставши на рядок довшим. У кнопки, вкладки чи пункту меню місце фіксоване, а одне слово іншою мовою може виявитися в кілька разів довшим. Чим коротший вихідний текст, тим більший можливий стрибок.

Що перевіряти першим у мультимовному дизайні?

Найкоротші підписи в найвужчій ширині: навігацію, кнопки, вкладки і фільтри, потім заголовки. Після цього кожен шрифт у кожній писемності, яку використовує сайт.

Чи можна обійтися одним шрифтом на мультимовному сайті?

Лише якщо гарнітура однаково добре намальована в усіх писемностях сайту. Якщо кирилицю чи арабську додано до неї нашвидкуруч, краще підібрати до неї другу гарнітуру.

Чи достатньо ШІ-перекладу для мультимовного сайту?

Для першого проходу часто так. Перед публікацією текст має прочитати людина, яка говорить цією мовою і знає ринок, а заголовкам і текстам про бренд може знадобитися транскреація.

Чи потрібні всім мовним версіям однакові сторінки?

Ні. Бренд, стандарт якості і ключовий досвід лишаються єдиними, а сторінки, тексти і зображення можуть відрізнятися за ринками. Будь-яку запущену версію доведеться підтримувати.

Джерела

Плануєте сайт кількома мовами? Перевірмо, які підписи, шрифти і версії зламаються першими.

Записатися на стратегічну сесію

Дизайн сайтів

ОБГОВОРИТИ ПРОЄКТ · ОБГОВОРИТИ ПРОЄКТ ·