Як переклад може вплинути на UX/UI дизайн

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

При виході на міжнародний ринок кожна деталь має значення — від культурної адаптації контенту до оптимізації користувацького досвіду на різних платформах. Якісно локалізований UX/UI дизайн робить продукт зрозумілим і зручним для цільових користувачів, що призводить до зменшення показника відмов та підвищенню конверсії. Потенційні клієнти, які відчувають, що сайт чи застосунок «говорить» їхньою мовою та легко розібралися з тим, як працює інтерфейс, більш схильні завершити необхідні дії — реєстрацію, покупку чи оформлення підписки.

І навпаки, невдало перекладений інтерфейс може призвести до непорозумінь, зниження залучення користувачів і навіть втрати клієнтів. Чим більша культурна прірва між аудиторіями в різних країнах, тим ретельніше потрібно підходити до перекладу та адаптації UX/UI дизайну.

Як подружити довжину тексту та дизайн

Дослідження свідчать: якщо контент сайту не перекладений, 79% відвідувачів його покинуть, а 88% онлайн-споживачів навряд знову повернуться на сайт після першого невдалого досвіду. Тобто питання «перекладати чи не перекладати» взагалі не повинне стояти. Справа в іншому — як зробити так, щоб переклад та UX/UI дизайн не зашкодили один одному, а створили ідеальний дует, який припаде до серця користувачам у будь-якому регіоні світу.

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

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

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

Якщо локалізація відбувається з/на такі мови як німецька, нідерландська чи фінська, проблема може з’явитися через наявність складних та дуже довгих слів. Наприклад: Unternehmenssteuerfortentwicklungsgesetz, що означає «Закон про розвиток корпоративного оподаткування». У цьому випадку доведеться змінювати макет, бо такі слова буде нелегко вмістити в одному рядку.

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

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

1. Перекладений текст виходить за межі елементів (кнопок та рамок) або перекриває інші частини інтерфейсу. Це призводить до некоректного відображення, порушує читабельність і знижує зручність для користувачів.
2. При перекладі арабською чи на іврит змінюється напрямок письма, що порушує структуру макета. В результаті всі елементи зміщуються, перекриваються або накладаються один на одного. Якщо не врахувати цієї особливості, інтерфейс виглядатиме дивно для місцевих користувачів.
3. Мінімальні розміри шрифтів, які працюють з простими алфавітами (англійський) можуть ускладнити читабельність перекладених слів на інші складніші мовні символи, наприклад, японський. Крім того, висота рядка, яка використовується для західних мов, може бути замалою для ієрогліфів.
4. В деяких мовах існують особливі правила перенесення слів і розривів рядків. Наприклад, в тайській немає пробілів між словами, бо він позначає «крапку» і його роблять між реченнями. Тому зайвий пробіл може ввести в оману користувача і спотворити зміст.

Якщо немає можливості змінювати інтерфейс, то варто перед початком локалізації зазначати ліміти по довжині рядка за кількістю знаків або певних літер (наприклад, 10 літер m), бо у китайській версії знаків може бути 4, але вони занадто широкі для елементу інтерфейсу.

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

Навіщо враховувати культурні відмінності в UX/UI дизайні

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

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

Кольори

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

Символи

В Японії символ ⭕️ має значення "Правильно"/"Так"/"ОК", а ❌ — це "Неправильно"/"Ні"/"Недобре«. В той час, як європейські користувачі Playstation звикли, що кнопка ❌ — це вибір виділеного елементу, а ⭕️ — скасування команди.

Емодзі

В США емодзі, як і жест, 👌 («окей») використовують для схвалення чи демонстрації задоволення. У Франції та Тунісі воно означає «нуль», «нічого не вартий». В Туреччині, на Близькому Сході та в деяких країнах Південної Америки цей жест може бути інтерпретований як вульгарний вираз або як образлива згадка про гомосексуальність. У Кувейті та деяких арабських країнах його використовують як прокляття.

Послідовність написання повного імені

В більшості європейських країн повне ім’я традиційно записують у послідовності ім’я + прізвище. У Китаї, Кореї та Японії першим завжди йде прізвище, потім ім’я. В Англії часто додається ще скорочене друге ім’я, наприклад — Robert E. Matheson, а в Іспанії можуть використовувати два прізвища — як батька, так і матері. Такі нюанси слід враховувати при розробці форм для введення даних користувача.

Формат валюти

В США суму у 100 грошових одиниць запишуть як $100.00, в Німеччині — 100,00 €, в Японії — ¥100 або 100円. Тобто крім самої валюти, змінюється символ розділення (кома чи крапка), місце для знака валюти (на початку чи в кінці) та спосіб відділення десяткових частин.

Календар

В Україні, майже у всій Європі, Австралії та деяких країнах Азії перший день тижня припадає на понеділок. У Китаї, Великій Британії, США, Канаді та південноамериканських країнах тиждень починається з неділі.

Формат дати

В Україні ми звикли записувати дату як день/місяць/рік — 01.09.2024. В США використовують формат місяць/день/рік — 09/01/2024, а в Японії — рік/місяць/день, тобто 2024/09/01.

Формат часу

Американці звикли до 12-годинного формату часу з позначками «ам» та «рм», наприклад, 7:15 рм. В Україні та Польщі використовують обидва формати, а в Німеччині вживають лише 24-годинний — 19:15.

Формат телефонного номера

Формат запису номеру телефону у Великій Британії — XXX-XXX-XXXX, у США — (XXX) XXX-XXXX, в Австралії — ХХХ-ХХХ-ХХХ, у Франції — X-XX-XX-XX-XX-XX, в Японії — XX-XXXX-XXXX.

Формат одиниць виміру

Європейці використовують метричну систему одиниць: наприклад, 1,73 м, натомість американці вимірюють довжину в дюймах та футах — 5’8″ (п’ять фунтів вісім дюймів).

Комбінація «гарячих» клавіш

Якщо для роботи вашої програми на ПК потрібна клавіатура, ще на етапі розробки остерігайтеся тих комбінацій «гарячих» клавіш або макросів, які можуть бути недоступні на іншомовних клавіатурах.

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

Перевірка якості перекладу

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

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

Чек-лист для перевірки локалізації інтерфейсу користувача

Чек-лист для перевірки перекладеного тексту

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

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

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

Технічні аспекти локалізації

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

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

Інструменти для локалізації

Ефективна локалізація продукту — масштабний проєкт, проте за допомогою перевіреної платформи керування локалізацією можна спростити процес та покращити його результати. Фахівці MK:translations рекомендують використовувати наступні сервіси та системи керування перекладами (TMS):

• Crowdin;

• Phrase;

• MemoQ;

• SDL Trados Studio;

• Lokalise;

• Transifex.

В деяких випадках допустиме використання інструментів автоматичного перекладу, таких як Google Translate API або DeepL API, але за умови обов’язкової перевірки та коригування перекладу вручну досвідченими фахівцями або відділом LQA, щоб уникнути помилок.

Поради для розробки багатомовних інтерфейсів

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

1. Всі текстові елементи, повідомлення й назви повинні бути відокремлені від коду та зберігатися у зовнішніх файлах локалізації (наприклад, .json, .xml, .po).
2. При розробці дизайну враховуйте можливість змін через різну довжину текстів після перекладу та підтримку мов, текст в яких пишеться справа наліво.
3. Враховуйте особливості культури цільової аудиторії. Це стосується адаптації формату дат, часу, чисел, валют, специфічних символів і кольорів, які можуть мати різні значення в різних країнах.
4. Уникайте використання тексту, вбудованого в зображення. Це ускладнює його переклад та додає зайвого клопоту.
5. До локалізації залучайте професійних перекладачів, ідеально — носіїв цільової мови. Надайте їм контекст для збереження точності перекладу.
6. Не використовуйте розмовний сленг та складні неоднозначні фрази, які можуть заплутати перекладачів, а потім — користувачів.
7. Уникайте омонімів, ідіом та термінів, для яких складно знайти відповідники в інших мовах. Якщо думаєте, що це зайве застереження, згадайте японське слово «коморебі» — світло сонця, яке пробивається крізь листя дерев.
8. Стандартизуйте термінологію в усіх розділах продукту, надайте перекладачам корпоративні та галузеві глосарії.
9. Для інтерфейсу користувача використовуйте короткі та лаконічні тексти.
10. При створенні макета залиште простір навколо елементів інтерфейсу, що дозволить збільшувати їхній розмір за необхідності, або використовуйте динамічні компоненти, що автоматично адаптуються під довжину тексту.
11. Застосуйте дизайн вертикальної навігації, що дозволить адаптувати макет під мови з різним напрямком тексту.
12. Забезпечте легкий доступ до вибору мов, щоб користувачі могли легко перемикатися між ними. Намагайтеся не використовувати для цього лише прапорці, аби не заплутати аудиторію. Це можуть бути повні назви мов, міжнародні скорочення, або прапорці з назвою мов (див.зображення).

Наостанок

Створити адаптивний дизайн, вдало виконати локалізацію та отримати схвальні відгуки від користувачів — це ще не кінець місії під назвою «Досягти успіху на міжнародному ринку». Потрібно подбати про підтримку перекладів в актуальному стані. Мова йде про оновлення та вдосконалення продукту, які теж потребують локалізації. Тому співпраця з командою перекладачів — це «серйозно і надовго», а значить до вибору підрядника для локалізації необхідно поставитися від початку відповідально. Тоді ваш тандем призведе до довгострокового успіху на нових ринках, а продукт залишатиметься конкурентоспроможним і привабливим для користувачів у різних країнах.