Дизайн багатомовних додатків

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

Ви запускаєте додаток і бачите наступне:



Хм. Щось тут не так. Зверху вбудоване відео, але текст в ньому — мовою, якої ви не розумієте. Формулювання якісь дивні, а напис на кнопці навіть не влазить на саму кнопку. Як таке може подобатися людям?

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

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

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

1. Залишайте місце для більш довгих перекладів

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

Візьмемо для прикладу ярлик «New!». Англійською він складається з чотирьох символів, включаючи знак оклику. Але на французькому у цій написи буде вже 9 символів: «Nouveau !», тобто довжина збільшиться більш ніж удвічі. І так, у французькому цей пробіл перед знаком оклику потрібен.

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



Один із способів прикинути довжину перекладу — скористатися Google Таблицями. Застосовуючи функцію GoogleTranslate, можна отримати машинний переклад тексту на цілу купу мов. Всього кілька секунд — і у мене є загальне уявлення, яким за обсягом буде кожен з переказів.



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



2. Не розташовуйте тексту у вузьких колонках

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

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



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

3. Не накладайте текст картинки

Якщо у вашому інтерфейсі присутні картинки з написами, процес його перекладу на різні мови може стати справжніми тортурами.

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

Ось пара більш зручних варіантів:

— Використовуйте замість тексту лінії. Іноді, щоб передати думку, слів не треба. Просто вражає, скільки можна виразити за допомогою декількох закарлюк.



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



4. Не додавайте UI-елементи в пропозиції

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

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



Локалізація таких структур — головний біль з кількох причин:

Не той порядок слів. В різних мовах слова в реченнях розставляються по-різному. Якщо перевести «Buy 3 shirts» на японський, слово «buy» буде стояти в кінці речення. Якщо ваш дизайн розрахований на певний порядок слів, він годиться не для всіх мов.

Форми множини. В англійській мові у кожного іменника тільки дві форми однини та множини: «1 picture» і "__ pictures". У російському ж з числівником може поєднуватися три різні форми: 1 картинка», «3 картинки» і «7 картинок». А значить, якщо поставити в середині речення поле для зазначення кількості, користувач може ввести число, для якого обрана форма буде граматично неправильної.

Родові закінчення. В деяких мовах іменники та прикметники відмінюються за родами. Наприклад, у французькому слово «великий» може перекладатися як «grand,» «grande,» «grands,» або «великий», в залежності від того, що саме описується. Випадаюче меню в середині програми може призвести до граматичною розузгодження між словами.
Так що ж тоді робити? Краще буде винести UI-елемент за межі пропозиції:



5. Акуратніше з метафорами

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

Але в різних культурах метафори можуть розрізнятися. Сова, яка в США є символом мудрості, у Фінляндії та Індії асоціюється з дурістю.

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



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

6. Використовуйте описові назви для функцій

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

Кілька років тому Dropbox запропонував користувачам нову можливість — доступ до всіх попередніх версій файлу. Спочатку ми дали цій функції назву «Packrat».



Але, хоча американської аудиторії назва могло б здатися дотепним, на інших мовах воно звучало б незрозуміло. А іконка з зображенням щура поруч з підписом тільки сильніше б збивала з пантелику. На щастя, ми змінили назву на «Extended version history», яке набагато простіше перевести.

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

7. Пропонуйте альтернативи для перекладу

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

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

Можна оформити їх у вигляді коментарів для перекладачів в тих місцях, де можуть виникнути труднощі. Ми зараз робимо підписи до стікерами, які використовуються в Dropbox. Для стікера знизу ми зупинилися на варіанті «OMG Cat».



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

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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.