Локализуй или покарают
Как жить с несколькими языками в интерфейсе
Любой мало-мальски серьезный стартап стремится к мировому господству. Скорее всего, вы тоже будете иметь к этому отношение. И если заранее не вбить себе в голову необходимость дизайнить интерфейс с учетом локализации, не пройдет и пары дней, как ваш хэдер панели управления (он же Header или Label, она же Navigation Bar) будет выглядеть примерно так: «Projektübersi…»
Частный пример локализации, который побудил меня к написанию этой темы, как мне кажется, неплохо подскажет вам, почему я пишу об этом.
Ареал обитания
В одном уютном интерфейсе под navigation bar’ом должны были разместиться три таба (речь идет, разумеется, про айфончик). Казалось бы, что тут такого? Русский, немецкий, английский — какая разница? Прикинул GUI к носу — и стал понятен масштаб трагедии:
Project overview
My tasks | Available tasks | Completed tasksПроект
Мои задачи | Доступные задачи | Завершенные задачиProjektübersicht
Meine Aufgaben | Verfügbare Tasks | Erledigte Aufgaben
Несложно догадаться, что в табах эти слова не поместились. Пришлось немного подумать и убедить продакт-менеджеров, что с этим надо что-то делать. В итоге, узрев живьем проблему, мы совместными усилиями через 5 минут изменили нейминг на такой (а заодно провернули то же самое и в веб-аппе):
Tasks
My work | Available | CompletedЗадачи
В работе | Доступные мне | ЗавершенныеAufgaben
In Arbeit | Verfügbar | Fertiggestellt
Предположу, что малая часть из читателей уже сталкивалась с подобным. Тем же, кто не успел — рекомендую внимательно прочитать текст ниже.
Горчинка истории в том, что такие случаи встречаются почти всегда и везде, как только в вашем ТЗ (или со слов клиента) появляется слово ЛОКАЛИЗАЦИЯ.
Как побороть упрямый гуй?
Перед началом творчества задайте простой вопрос клиенту: «На каких языках будет выпускаться продукт?»
Если на одном — улыбка на лице. Если на нескольких, то надо всегда иметь в виду, что любое слово в каком-нибудь забугорном языке из невинных трех букв может превратиться в 20 на русском, либо наоборот.
Для себя я вывел несколько правил:
- Если экшн-кнопки можно заменить на понятные иконки — делайте это всегда (желательно иконки в веб аппах дополнять hint text (это когда мышь наводишь и всплывает подсказочка);
- Если вы хотите уместить название задачи в navigation bar, то обязательно продублируйте название задачи на странице задачи, иначе может быть некрасиво и нечитабильно.
- Используйте иконки для табов. И если это невозможно (а так почти всегда), то подумайте, действительно ли вам нужны эти 5 табов с длинными названиями. По возможности пересмотрите свой подход к навигации во всем аппе. Кстати, в «Андроиде» есть такая вещь как scrollable tabs, но в iOS таковых нет, поэтому они не всегда вас спасут.
- Если вас посетили сомнения на счет того или иного названия кнопки (лейбла), то открываете Google Translate и проверяете название на нужных языках. Часто так бывает, что «оно не влезет» — и вы броситесь резво рожать иконку.
- Если у вас осталось много пустого места — не торопитесь увеличивать размеры элементов. Для начала переведите их на немецкий или русский ;)
- Если дизайните под планшеты или десктопы, то старайтесь не нагружать тулбары несметным количеством кнопок. Кнопки имеют тенденцию к размножению, а вы к этому не очень-то готовы. Особенно это касается кнопок с лейблами, и в меньшей степени — иконок.
Нарисуй свой самый страшный сон
Иногда бывает — смотришь на интерфейс экрана, где красиво и лаконично все расположено, и душа радуется. Но в продакшене, когда появляются мало-мальски реальные данные, волосы в причинных места начинают шевелиться от того, что все тупо не влезло и вообще «Выглядит хорошо… НЕОЧЕНЬ!» (c) Борат Сагдиев
Так бывает, когда дизайнер дизайнит красиво ради красоты, выкладывая болт на локализацию.
Избежать этих последствий достаточно просто:
Надо привыкнуть рисовать скрин сначала с огромным количеством данных (сколько сможете, столько и вставляйте, желательно, чтобы страшно самому стало). А только потом — с почти полным их отсутствием. И, в финале, не без помощи Google Translate, вставлять текст на других языках и...
Править, править, править интерфейс.
Безусловно, скриншоты потом на «Бехансик» выкладывать, зачем его уродовать реальными данными. Это понятно, что не хочется. Но все же…
Надо дизайнить интерфейс с самыми ужасными данными, которые вы только можете себе представить. Пускай слов будет очень много, пускай названия будут очень длинными, пускай всего будет очень-очень много и все на немецком (а еще хуже , что в данном контексте равнозначно — на русском).
Помучившись и всплакнув, вы нарисуете пуленепробиваемый интерфейс, который сможет выдержать много прямых попаданий контента (даже на немецком).
Пример. Допустим, есть у вас такие данные (поля): Who will do this task; Deadline; Description; Address. Мы же хотим красиво их нарисовать, правильно? И рисуем, и все у нас так здорово, но нереально:
– Who will do this task
Anna Lee
– Deadline
9 Sep 2016
– Description
Anna, please fill in the form in this task.
– Address
Moscow, Tverskaya 2, office 5
Но в суровой немецкой реальности оно, скорее всего, будет выглядеть примерно так (с учетом реальных данных):
– Wer wird diese Aufgabe übernehmen
Friedemann Schukhardt
– Einsendeschluss
September 9, 2016
– Beschreibung
Anna, füllen Sie bitte Formular bei dieser Aufgabe.
– Adresse
Deutschland, Frankfurt am Main, Darmstädter Landstraße 730 63263 Neu-Isenburg
Шоколад к успеху шел…
Пережив первый шок от подстав со стороны ряда известных языков, вы уже никогда не будете прежним.
И это к лучшему. Вы научены горьким опытом и в дальнейшем сэкономите себе пару приятных вечеров в компании семьи / друзей / подруг, пока другие будут делать красивости.
А представьте себе радость клиента, о котором вы, ни сказав ни слова, позаботились, нарисовав интерфейс, работающий со многими языками — и при этом красивый!
… и пришел! =))
Познав силу локализации, идем дальше. Далее на нашем канале: Шрифты и их малообразие.
