Три проблемы, которые снижают эффективность мультиязычного сайта

В разных языках у слов, обозначающих одно и то же понятие, может быть разная длина. В русском языке предложения зачастую длиннее, чем в английском, а в китайском длинную фразу можно записать 2–3 иероглифами.

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

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

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

Мобильная адаптивность важна для любого бизнеса, чья аудитория может зайти на сайт со смартфона или планшета. Это большая доля аудитории: по данным статистики Similarweb, в сентябре 2024 года доля мобильного трафика, включая планшеты, во всём мире составила 69,96%.

Для каких-то сфер бизнеса мобильная версия более приоритетна в принципе. Например, для аэропортов, на сайты которых пассажиры часто заходят со смартфона по дороге в аэропорт или из зала ожидания, чтобы проверить онлайн-табло, найти кафе на интерактивной схеме аэропорта, узнать о VIP-залах.

Чтобы не тестировать страницы и не отлавливать огрехи вёрстки в разных версиях, лучше сделать так, чтобы внешний вид контента не зависел от его объёма. Для этого следует подходить к созданию страницы как к сбору конструктора, где есть типовые элементы фиксированной длины.

Для сайта аэропорта Внуково мы установили фиксированные параметры для блоков на этапе вёрстки на уровне фронтенда. Как это работает: контент-менеджеры собирают статью из блоков, для каждого элемента интерфейса прописан размер, а текст внутри блока подстраивается под его размеры. При этом есть лимит символов для блока, чтобы текст хорошо читался и умещался в отведённых строчках.

В результате ширина колонки или величина кнопки не меняется, даже если подпись на одном языке занимает 10 символов, а на другом ― пять. А картинки и прочие компоненты автоматически встают в вёрстку, не ломая её.

Примеры того, как это выглядит на разных языках:

Такие блоки для контента не дают тексту и другим элементам сдвигаться и перекрывать друг друга при мобильном просмотре. При этом важно учитывать, что к адаптации страниц для мобильных устройств нужно подступаться отдельно. Сайт должен быть одинаково удобным и для владельца последнего iPhone, и для пользователя с планшетом, и для владельца простого смартфона с небольшим экраном.

Для сайта Внуково, чтобы все блоки и элементы точно выглядели корректно, команда собрала адаптивы для всех форматов страниц: главную, табло, контентную страницу, схему аэровокзального комплекса и других. Под каждый экран сделали макеты для вёрстки, чтобы при изменении масштаба экрана вёрстка перестраивалась по этим макетам. Всего получилось 50 шаблонов страниц и 110 адаптивных экранов.

Допустим, на сайте нужно опубликовать пресс-релиз, две новости про стартующие акции и обновить текст соглашения с партнёрами. Всё это нужно заполнить трижды, если у сайта три языковые версии. И если придётся обновлять информацию, менять контент придётся опять-таки в трёх местах.

При этом языковые версии одной страницы нужно связать между собой в структуре сайта, чтобы при изменении языкового режима открывался аналог той же страницы на выбранном языке. Контент-менеджеру придётся искать страницы внутри древовидных каталогов CMS. И если сайт большой, на это будет уходить много времени. Ответственные за публикацию контента будут выполнять множество рутинных действий, а чем больше рутины, тем больше вероятность ошибки.

В итоге нередко на сайтах остаются непереведённые и недообновлённые фрагменты текста, к примеру такого плана:

Контроль контента на параллельных версиях страницы можно упростить, чтобы оптимизировать работу контент-менеджера и уменьшить вероятность ошибок.

Пользователь попадает на страницу не своего языка, нажимает на переключатель ― на нужную языковую версию. Чтобы он оказался на этой же странице, но английской или китайской, нужно правильно настроить связь в админке.

Для этого под капотом сайта должен работать инструмент, автоматически связывающий между собой разные страницы. У CMS, например WordPress или Drupal, такие возможности добавляются плагинами. Либо можно использовать сторонние инструменты бэкенда.

С точки зрения контент-менеджера процесс простой:

• Завести страницу в родительской, русскоязычной папке и наполнить её контентом.

• Нажать кнопку для создания иностранной версии. Появится страница, которую нужно заполнить подготовленным переводом, и она автоматически будет связана с её другими языковыми версиями. Администратору не придётся устанавливать эту связь вручную.

Цена ошибки перевода на сайте аэропорта высока: неоднозначные фразы и ошибки с терминами могут ввести в заблуждение пассажира. Поэтому переводами для сайта аэропорта Внуково занималась команда, в которую входили носители языка из США и Китая.

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

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

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

На сайте Внуково мы внедрили поисковый инструмент, который справляется со всеми этими трудностями, ― умный поиск. Это поиск на основе искусственного интеллекта, который:

Для внедрения умного поиска на рынке есть специальные модули, которые предлагают такую технологию. Это и самостоятельные решения ― к примеру Solr, Sphinx, Elasticsearch, Multisearch, SearchBooster ― и модули в CMS.

Три проблемы, которые мы разобрали выше, лишь часть задач, которые нужно решить команде разработки мультиязычного сайта. Ещё нужно подумать о версиях для слабовидящих, оптимизировать технические процессы, чтобы страницы открывались без задержек и выдерживали большие нагрузки на сайт. Если уделить достаточно ресурсов такому проекту, компания увидит результат ― доля иноязычных пользователей в трафике вырастет.

В случае с сайтом Внуково результаты не заставили себя ждать. Для объективности сравним два периода: с 1 мая по 31 июля 2022 года, когда работал старый сайт, и тот же период в 2023 году, когда уже работал новый ↓

• Посещаемость английской и китайской версий выросла в 3 раза.

• Посещаемость с мобильных устройств ― более чем в 6 раз.

• Пользователи стали проводить на сайте в 1,5 раза больше времени и чаще возвращаться: на 32% увеличилось количество посетителей, кто заходил больше двух раз, на 63% ― больше четырёх, на 80% ― более восьми раз.