Фейфей Лиу написала о переключателях языка (страны, валюты) в интернет-магазинах.

— По умолчанию отображайте языковую версию, ориентируясь на настройки браузера и IP-адрес пользователя;
— Если так сделать проблематично, показывайте специальную страницу, на которой пользователь может выбрать регион и язык и перейти на региональный сайт (Zara);
— Размещайте переключатель в правом или левом верхнем углу на десктопных версиях сайтов (Asos), на мобильных — в верхней части (обычно занята более важной информацией) или в меню (Amcal+);
— Название языка пишите на том же языке, то есть вместо «Испанский» пишите «Español» (см. Airbnb и мобильный сайт Burberry);
— Если список вариантов стран и языков большой, в отдельном блоке можно отобразить предложения языка и страны для быстрого выбора: что часто выбирают или что соответствует настройкам браузера пользователя (Airbnb);
— Переключатель обозначайте сочетанием текста и иконок (флаг, символ валюты). Так его легче заметить и распознать, он подсказывает о возможности, например, выбрать валюту для оплаты (Selfridges);
— Флаг прямоугольной формы распознать проще, чем стилизованный круглый (Asos);
— Разрешите настраивать язык, страну и валюту независимо друг от друга (AliExpress).

In English. #localization #ecommerce

В Purrweb написали об адаптации интерфейса для стран Ближнего Востока.

— Там пользователи читают справа налево, поэтому текст и числа на арабском выровны по правому краю, а привычная компоновка элементов отзеркалена по горизонтали;
— Слова или предложения на английском (или другом языке, на котором читают слева направо) выравнивают по правому краю, но порядок букв не трогают (то есть название PayPal так и будет отображаться);
— Если на английском целый абзац, его выравнивают по левому краю;
— Имеет смысл на 10% увеличивать кегль для текста в заголовках и на кнопках, так как в арабском языке и иврите нет заглавных букв;
— Числа (и номера телефонов), записанные западными арабскими цифрами (1235) пишутся слева направо, а восточными — справа налево. Исключение: цифры как часть контрола по оценке рейтинга будут располагаться в соответствии с направлением чтения;
— В направлении чтения надо разворачивать иконки, где показано движение (мотоциклист будет ехать справа налево, звук из источника лететь влево), символ текста, есть метафоры направлений назад и вперёд (стрелки «Назад» и Undo будут указывать вправо), ползунки для выбора значения в фильтрах;
— Не надо разворачивать: иконки с направлением движения по часовой стрелке и против часовой, объектами реального мира (в том числе у которых ручка справа — они просто ориентированы на правшей), логотипы и универсальные знаки (вроде галочки Check). А также аудио- и видеоплееры.

#localization

Фейфей Лиу написала о переводе пользовательского контента.

— Если продуктом пользуются люди из разных стран и пользовательский контент важен (например, это могут быть отзывы), дайте пользователям возможность перевода всех или отдельных записей или заранее переводите весь контент;
— Если отзывов мало, пригодится кнопка перевода отдельного отзыва, чтобы дополнить их мнениями иностранных покупателей (Etsy);
— Не отображайте кнопку перевода, если язык отзыва совпадает с языком пользователя;
— Если преобладают отзывы от иностранцев, пригодится кнопка «Перевести все», чтобы не переводить каждый отдельный отзыв (Amazon). Особенно актуально для развлекательного контента, когда пользователям проще уйти на другой ресурс, чем переводить вручную или прокручивать недоступный контент;
— В таком случае можно переводить контент заранее и отображать отметку о переводе и кнопку для просмотра оригинального текста;
— Стоит учесть, что сервисы для такого автоматического перевода не бесплатны;
— Если отзывов на разных языках достаточно много, дайте возможность отфильтровать их по языку (Booking, Weverse).

In English. #localization #ecommerce

В Спотифае (доступен на 65 языках в 195 странах) написали о локализации. Немного водянисто, но интересные тезисы есть.

— Локализация создаёт чувство принадлежности, что важно для музыкальных стримингов;
— Локализация — настройка продукта таким образом, чтобы каждый пользователь воспринимал его как созданный земляками;
— Процесс локализации включает интернационализацию — внедрение в продукт решений, которые позволят адаптировать его для других стран и языков без технических доработок. Например, поддержка разных форматов дат;
— Команда локализации с самого начала тесно работает с продуктовыми подразделениями. Их знания о разных языках (например, что слова в романских языках вроде испанского занимают на 25% больше места, чем в английском) помогают создавать достаточно гибкий дизайн и не писать текст, который будет проблематично перевести;
— Пользователи Спотифая в Японии предпочитают более просветительский и прямой тон голоса, в Индии — игривые фразы и юмор;
— Не берите английский за основу при разработке. На английском можно обойтись одним шаблоном «[Artist name] released a new [song/album]», тогда как во многих языках надо учитывать пол исполнителя и то, что «песня» и «альбом» — разного рода;
— Не забывайте, что в стране может быть больше одного языка. Например, при запуске в США нужен перевод на испанский;
— О чём нужно помнить: форматы времени, даты и чисел; идиомы, сленг и игра слов; эмодзи, аббревиатуры и всё, что связано с культурой или страной, например, люди, места, традиции или праздники.

In English. #localization

В Ispmanager написали об особенностях китайских сайтов.

— Китайцам крайне важно, как их воспринимают другие. Ключевая единица в культуре — группа, а не человек. Они очень активно общаются в интернет-сообществах;
— В культуру глубоко вплетены древние традиции, внимание уделяется значениям цветов;
— Например, красный символизирует позитив, счастье, преданность, пламенность, чувственность. Популярны жёлтый и оранжевый;
— Сайты перегружены текстом. Они действительно стремятся побольше рассказать на одном экране;
— Но эффект усиливается тем, что в китайской письменности нет пробелов между словами, разделения на строчные и прописные иероглифы;
— В языке — десятки тысяч иероглифов. Шрифтов не так много, и каждый весит довольно много, поэтому на сайтах используют один шрифт в одном-двух начертаниях;
— Часто текст верстают просто картинками;
— Так как свободного пространства мало, дизайнеры используют яркие цветовые акценты. Их выбор часто обусловлен традиционными для страны значениями;
— Часто в приложениях встречаются игровые механики;
— Mobile first: мобильные устройства — основной способ выхода в интернет и совершения покупок;
— Распространены доменные имена с цифрами. Их проще воспринимать, чем латиницу, и китайцы используют цифры для передачи слов. Например, 1688 на китайском созвучно слову Alibaba.

#localization

Мириам Миссбихлер написала об особенностях японских сайтов.

— Чтобы создать шрифт для английского языка, надо нарисовать около 230 глифов (840, чтобы охватить все языки на основе латиницы). Для японского языка их надо более 7000;
— Выбор шрифтов меньше, время их загрузки больше. Как следствие, часто текст верстают картинками, плюс активно используют другие способы создания визуальной иерархии;
— Японский подход — показать сразу несколько лакомых кусочков информации, чтобы заинтриговать, чтобы было за что зацепиться, чтобы можно было принять обоснованное решение;
— Уровень неприятия риска, перестраховки и нерешительности при принятии решений заметно выше, чем на западе. Лучше потратить время и трижды проверить отправляемый документ, но не допустить ошибок и сохранить авторитет;
— Японцы воспринимают информацию более целостно, тогда как американцы фокусируются на одном;
— Офлайновые медиа в Японии стараются вместить как можно больше информации, люди к такому привыкли.

In English. #localization

София Гнеденко написала о заглавных буквах в заголовках на английском.

— В Title case каждое слово кроме артиклей и предлогов пишется с заглавной буквы. В Sentence case — только первое;
— Плюсы Title case: выглядит симметричнее (что улучшает восприятие), формальнее и серьёзнее (его используют в The New York Times), текст становится заметнее (на 20%);
— Плюсы Sentence case: легче читать, особенно длинные заголовки (на 18%), проще использовать, выглядит дружелюбнее и менее формально, легче выделить имена собственные вроде «Входящие» или «Календарь»;
— Какой бы стиль вы ни выбрали, согласованность в оформлении заголовков повышает доверие к бренду на 20% (исследование Нильсен Норман Груп);
— Sentence case выбрали в Гугле и рекомендуют в Майкрософте;
— Мнение из комментариев: Title case — чисто американская штука, в UK считается дурным тоном и признаком желтизны.

#typography #localization

Юля Кондратьева написала о сложностях при создании интерфейсов для арабских пользователей.

— Неочевидная вещь: флоу экранов должен идти справа налево, иначе стрелочки постоянно огибают экраны и за ними неудобно следить;
— Несмотря на направление чтения, телефон часто держат правой рукой, поэтому в некоторых случаях не стоит механически переносить контролы справа налево;
— Арабский текст мельче английского того же кегля. Эппл арабские надписи программно увеличивает на 2 пункта, чтобы сохранить читаемость. Есть арабские шрифты с крупным очком, например, Al Khat;
— Большую часть гласных показывают символами над и под основным блоком текста, из-за чего уменьшать дефолтное межстрочное расстояние нельзя, можно только увеличивать. Из-за этого латинские блоки выглядят рыхлыми;
— Если вы не носитель и используете переводчики, смысл текста можно сохранить, но нюансы теряются. «Сохранёнки» из Ноушена и «Сохранённое» будут переведены одинаково;
— Масло — метафора выжимки, самого важного. Утка — провала на экзамене;
— Лучше не использовать людей-маскотов (изображение людей Коран не приветствует) и собак (их тоже не любят);
— Если подставлять в макеты нейтральное для неносителя имя Саддам, человек из Кувейта будет воспринимать его так же, как если бы в списке друзей были Маша, Петя и Адольф;
— Культурные отличия влияют и на функциональность. Среди учеников много девочек, которые не показывают лиц, поэтому нет функции загрузки аватарок;
— Из-за разделения полов нет общих видеокомнат для общения учеников одного года обучения.

#localization

Фёдор Миронов написал, как использует Crowdin для перевода текста в интерфейсе.

— Если передавать переводчикам просто текстовые строки без сведений, где они используются и как выглядят, будут ошибки и неестественные формулировки;
— Надо хорошо постараться, чтобы в процессе перевода не было бардака, особенно если работает несколько переводчиков;
— Crowdin хранит идентификаторы строк (ключи), все переводы, их статусы, теги принадлежности к платформам;
— При загрузке текста из Фигмы делает скриншоты и отмечает, где находится текстовая строка, что позволяет переводчику понимать контекст;
— Переводчики могут начинать работу сразу, не дожидаясь готовности макета и вёрстки;
— Плагин Crowdin в Фигме синхронизирует текст и позволяет дизайнеру просматривать переводы прямо в Фигме;
— Перед передачей макетов в разработку дизайнер запускает плагин и создаёт ключи;
— С помощью Select Matching Layers выделите повторяющиеся текстовые слои и переименуйте их, указав предполагаемые ключи. Плагин найдёт дубликаты и свяжет повторяющийся текст с одним ключом;
— Не используйте один ключ для заголовков и текста на кнопках. Они могут совпадать на английском (Transfer/Transfer), а на русском отличаться (Перевод/Перевести). У каждой текстовой роли в интерфейсе должна быть отдельная строка;
— Если в строке есть переменные данные (суммы, даты, имена), не разбивайте строку на части, а используйте переменные. Строка останется целостной и понятной для перевода. Это важно, если порядок слов в переводах может отличаться.

#localization #сrowdin

Александр Щеблыкин рассказал о RTL-адаптации интерфейса и показал, как её упростить с помощью переменных в Фигме.

— Написание слов может отличаться в разных диалектах. Например, «Назад» пишется по-разному в Саудовской Аравии и ОАЭ с Оманом;
— Если на английском написан целый абзац, стандартно выровненный по левому краю, его не выравнивают по правому краю в RTL-режиме;
— А вот отдельный пункт ненумерованного списка, даже если он на английском, стоит выровнять как и все остальные пункты;
— Изображения отражать не надо, но композицию с картинками и текстом надо адаптировать под направление чтения. То есть если в LTR текст был слева, а картинка справа, в RTL они поменяются местами;
— Размер текста и межстрочное расстояние для компенсации увеличивают на 10%, так как арабский текст визуально меньше;
— Числа, записанные и западно-арабскими, и восточно-арабскими цифрами, читают слева направо;
— Знак вопроса пишется зеркально, отличаются и другие знаки препинания. Но появились они 100 лет назад, и на арабском спокойно можно выражаться без них;
— Отражают иконки, отображающие текст или направление чтения (есть пример и с отражённой иконкой с текстово-графической композицией), а также движение вперёд и назад;
— Не отражают иконки, изображающие реальные объекты, а также логотипы и универсальные символы вроде знака «✓»;
— В дизайн-системе переменная RTL переключает интерфейс на арабский;
— Есть переменные EN Only и AR Only, которые позволяют не усложнять простые компоненты. Например, хлебных крошках могут лежать «шеврон вправо» и «шеврон влево», связанные с переменными EN Only и AR Only так, что одновременно отображаться будет только один шеврон;
— Есть отдельные коллекции иконок для RTL, так как автоматическое отражение работает не всегда;
— Также в Фигме в виде переменных есть словарь — набор переводов на английском, русском и арабском, когда-либо использовавшихся в проекте.

#localization #figma

Никита написал об особенностях создания транспортных схем на иностранных языках (тоже победитель «Технотекста 8» в категории «Дизайн»).

— Их никогда не переводят полностью. Перевод топологических имён вроде «Красносельская» навигацию только усложняет;
— Названия большинства объектов транслитерируют или транскрибируют, чтобы передать звучание, не передавая смысл;
— Полная транслитерация со всеми составными частями (Ленинградский вокзал → Leningradskiy Vokzal) основана на идее, что главная задача схемы — навигация в пределах транспортной системы;
— Чтобы понять, где он и куда ему идти, пассажир может сопоставить голосовое объявление остановки с надписью или спросить у местного жителя;
— Альтернатива: переводить слова «вокзал», «улица», «площадь». Упрощает навигацию за пределами транспортной системы: можно увидеть объект в окно и сопоставить место со схемой. Но усложняет восприятие аудиосообщений;
— Такой подход зафиксирован, например, в правилах оформления Народной карты Яндекса;
— Компромисс: транскрибировать всё, а важным для навигации объектам добавлять перевод. Минус: больше надписей, хуже читаемость;
— На китайском звуки передаются иероглифами (одному звуку могут соответствовать разные). Но так как каждый иероглиф — слово, может появляться дополнительный смысл;
— Имя «Юлия» можно написать: а) 朱莉娅 (Zhū​lì​yà) — красный, жасмин, шурин; б) 猪厉亚 (Zhū​lì​yà) — свинья, злой, ущербный;
— Переводчик отвечает за уместность возникающих ассоциаций. Обычно используют словари официальных транскрипций, а если нужного топонима там нет — правила китайско-русской практической транскрипции;
— В схеме Московского метро на китайском и арабском совмещены 3 подхода;
— В арабской версии в названии станции «Аэропорт Внуково» перевели «аэропорт», так как станция находится в аэропорту. А название станции «Аэропорт» транскрибировали, так как там аэропорта нет;
— Вместо китайских и восточных арабских цифр на схемах используют привычные цифры, так как они служат обычно идентификаторами. Они должны совпадать с тем, что встречается на указателях и табло;
— Если цифры должны передать именно числа (например, время работы), то можно использовать восточные арабские цифры. Для китайской версии сойдут обычные, так как в Китае их тоже используют;
— Станция «Улица 1905 года» записана с цифрами. Сложнее распознать по звучанию, зато надпись занимает меньше места и её легче заметить на табличках, экранах и бегущих строках.

#localization #writing #transport

Ира Туманова написала об автоматизации подготовки перевода интерфейса в многоязычном продукте.

— Каждая текстовая строка в коде заменяется ключом. Основные решения: i18next, Lingui и FormatJS;
— ICU MessageFormat — синтаксис для форматирования сообщений, который позволяет разработчикам учитывать сложности человеческого языка;
— Значения ключей (текстовые строки на разных языках) хранятся в специальных файлах, откуда система берёт текст для заданного языка;
— Translation management system позволяет управлять переводами: смотреть статус ключа, на какие языки он уже переведён. Интересные TMS: Lokalise, Phrase, Crowdin, POEditor;
— Доделав фичу, разработчик запускает скрипт экстракции ключей из кода в TMS и создаёт задачу для переводчиков (со ссылками на ключи);
— Чтобы минимизировать человеческий фактор, в Яндекс Go процесс запускается сам при Pull Request в основную ветку;
— После того, как переводчики подготовят переводы, надо забрать их из TMS обратно в файлы локализации;
— В Яндекс Go это происходит автоматически по крону каждый день в 5 утра: скрипт по TMS API запрашивает все новые переводы, раскладывает данные по файлам, создаёт Pull Request с изменениями;
— Плюс добавили проверку на дубликаты, чтобы случайно не слить два Pull Request с одинаковыми ключами;
— Разработчики в среднем заводили 2,5 задачи в день на переводы. Это порядка 20 минут на задачи и последующее обновление файлов переводов. Немного, но выбивало из рабочего потока.

#localization

Алексей Кирдяев написал о чистом дизайне.

Чистый минималистичный дизайн — не стандарт качества, а культурное предпочтение. 73% поведенческих данных получено из исследований, в которых участвовали в основном WEIRD-респонденты (Western, Educated, Industrialized, Rich, Democratic). Они представляют всего 12% населения Земли.

Чистая форма заявки на кредит из 3 полей, прогресс-бара и кнопки не конвертила на мексиканском рынке. Пользователи ей не доверяли. У конкурентов были плотные многостраничные формы, много институционального брендинга, государственной символики и значков безопасности.

Есть низко- и высококонтекстуальные культуры. Есть культуры с низкой и высокой дистанцией власти — насколько нормальным в обществе считается неравное распределение власти. В странах с низкой дистанцией (Скандинавия, Нидерланды, Австралия) плоское и неформальное вызывает доверие.

В странах с высокой дистанцией (Индия, Мексика, Бразилия, Филиппины, Индонезия, Малайзия и большая часть Ближнего Востока и Центральной Азии) институты, которые не демонстрируют свой авторитет, не задают много вопросов, кажутся несерьёзными.

Мгновенное решение по кредиту и вовсе будет выглядеть сломанным. Кредитная организация рассматривает заявку — это процесс. Как вариант, можно добавить искусственную паузу, анимации, информацию о статусах рассмотрения заявки.

В некоторых культурах ритуал — часть продукта, и в этом случае трение, формальность и видимый процесс убирать не стоит (хоть мы и привыкли так делать). Чистый дизайн не должен быть решением по умолчанию, его надо осознанно выбрать. Смотрите не на глобальных конкурентов, а на местных, а также государственные сервисы и национальные банки.

#localization