Знаете ли вы, что 3 из 4 онлайн-покупателей предпочитают приобретать товары, информация о которых представлена на их родном языке? ( Источник ). Многоязычный веб-сайт имеет свои преимущества, такие как:
- Предоставьте персонализированный опыт пользователя.
- Увеличьте продажи благодаря локализованной информации.
- Охватите более широкую аудиторию без географических ограничений.
- Улучшите имидж бренда, представив себя как глобальную компанию.
- Наблюдается увеличение конверсий и снижение показателя отказов.
Но многие компании не знают, как правильно создать многоязычные веб-сайты!
Вот почему мы рекомендуем вам 18 практических советов UX, которые следует учитывать при проектировании вашего многоязычного веб-сайта.
18 советов UX для многоязычного веб-сайта
При разработке многоязычного веб-сайта крайне важно учитывать различные факторы, чтобы обеспечить бесперебойную работу для пользователей на разных языках и в разных культурах. Вот 18 лучших советов по UX для многоязычных веб-сайтов.
Планирование и структура
Прежде чем начать проектировать многоязычный веб-сайт, вам необходимо спланировать и определить несколько вещей.
1. Определите целевые языки
Чтобы выбрать лучшие языки для вашего многоязычного веб-сайта, начните с анализа местоположения и демографии вашей аудитории. Посмотрите на текущий трафик вашего веб-сайта и данные о клиентах, чтобы увидеть, какие языки и местоположения наиболее распространены.
Исследуйте языки, на которых говорят на ваших целевых рынках, используя данные переписи, рыночные отчеты и анализ конкурентов.
Например, по данным Бюро переписи населения США , испанский язык является вторым по распространенности языком в Соединенных Штатах. Поэтому, если ваша целевая аудитория — клиенты из США, то вполне логично иметь испанскую версию вашего сайта наряду с английской.
Начните с наиболее распространенных языков и расширяйте по мере роста вашего веб-сайта. Анализируя данные вашей аудитории и согласовывая выбор языка с целями вашего бизнеса, вы можете выбрать наиболее подходящие языки для вашего многоязычного веб-сайта.
2. Используйте четкую структуру URL
Чёткая структура URL-адреса имеет решающее значение для многоязычного веб-сайта. Она улучшает SEO, поскольку поисковые системы могут легко индексировать и ранжировать различные языковые версии вашего сайта, повышая видимость в локальных поисковых запросах.
Структура подкаталогов является наиболее распространённым и рекомендуемым методом. Каждый язык получает свой собственный подкаталог под основным доменом, например, www.example.com/ru/ для русского, www.example.com/es/ для испанского и www.example.com/fr/ для французского.
Выберите структуру, которую вы можете последовательно поддерживать на всём вашем веб-сайте. Избегайте смешивания различных структур. Используйте языковые коды ISO 639-1 (например, “ru” для русского и “es” для испанского), чтобы обеспечить ясность и стандартизацию.
Используйте канонические теги, чтобы указать предпочтительную версию страницы для поисковых систем, особенно если у вас есть похожий контент на разных языках. Реализуйте теги hreflang в вашем HTML, чтобы помочь поисковым системам понять язык и региональную направленность ваших страниц.
3. Используйте глобальные шаблоны
Когда посетитель сайта выбирает другой язык, он не должен попадать на совершенно другой сайт. Используйте один и тот же шаблон сайта для всех переведенных веб-страниц.
Вот пример Canva. Когда сайт переводится на испанский с английского, расстояние между заголовками и абзацами, размещение кнопок, меню и иконки, формат плана ценообразования и все остальное остается прежним.
Глобальный шаблон помогает поддерживать единую бренд-идентичность и обеспечивает бесперебойный пользовательский опыт, независимо от языка, на который они переключаются. Убедитесь, что ваши пользователи видят одинаковый макет, элементы дизайна, брендинг и цвета при переключении с языка по умолчанию.
Если вы используете систему управления контентом (CMS), такую как WordPress, с Linguise, создание брендового многоязычного веб-сайта - это простая задача. Linguise глубоко интегрируется с темой вашего веб-сайта и автоматически переводит ваш контент без дополнительных запросов к базе данных или избыточной нагрузки на сервер. Таким образом, производительность вашего веб-сайта не снижается.
Если вы используете плагин для электронной коммерции, например WooCommerce, Linguise автоматически обновляет главную страницу и переведенные страницы при каждом обновлении товара.
4. Учитывайте расстояние для расширения текста
Один из наиболее важных советов по UX при создании многоязычного веб-сайта - учитывать расширение текста. Каждый язык имеет разные стили письма и длину слов, которые необходимо учитывать.
Посмотрите на этот пример Etsy. Слева вы можете увидеть содержимое веб-сайта на японском языке, а справа - то же содержимое на немецком языке.
Некоторые языки занимают больше места, в то время как другие занимают меньше. Макет вашего веб-сайта должен быть в состоянии адаптировать расстояние, чтобы обеспечить читаемость переведенного содержимого.
Вот демонстрация того, как текст расширяется или сжимается на разных языках. Согласно W3C, слово “view” имеет расширение на 300% с английского на итальянский!
Также учитывайте высоту строки и стиль символов. Некоторые языки имеют более высокие символы, чем другие, в то время как для некоторых шрифтов требуется больше пробелов, чем для других.
Например, для арабского шрифта требуется больше вертикального пространства между строками, чем для латинского.
5. Сохраняйте контент отдельно от дизайна
Сохраняйте текст отдельно от мультимедийных элементов для более простых обновлений и переводов.
Сохраняйте текстовый контент внутри элементов HTML например,
,
и . Используйте CSS для стилизации, чтобы изменения дизайна не влияли на контент. Храните текстовые строки в отдельных языковых файлах, таких как JSON, XML или PHP.
Это позволяет легко обновлять и переводить без изменения основной кодовой базы. Используйте библиотеки локализации, такие как i18next для JavaScript, чтобы управлять переводами динамически.
Сохраняйте дизайн и содержание отдельно, и макет с меньшей вероятностью будет испорчен после перевода.
6. Предоставьте варианты переключения языка
Предоставление четких и доступных вариантов переключения языка имеет решающее значение для многоязычного веб-сайта. Поместите переключатель в верхний правый угол для легкого доступа и используйте контрастные цвета и четкую типографику, чтобы он выделялся. Для ясности включите название языка в родном языке (например, “Español” для испанского).
Выпадающее меню может эффективно отображать несколько вариантов языка, не занимая слишком много места. Использование флагов может обеспечить визуальный сигнал, но будьте осторожны, поскольку флаги иногда могут быть вводящими в заблуждение.
Например, флаг может представлять язык, на котором говорят в нескольких странах. Часто лучше всего сочетать флаги с названиями языков для ясности.
Четко показывайте выбранный язык, используя другой цвет или жирный шрифт. Используя такие методы, как AJAX, убедитесь, что выбор языка сразу же меняет содержимое без перезагрузки страницы.Сделайте переключатель языка адаптивным для мобильных устройств и протестируйте его удобство использования с носителями языка.
Содержание и перевод
Вот несколько советов по контенту и переводу для улучшения пользовательского опыта.
7. Избегайте идиом и сленга
Не все сленговые выражения являются универсально приемлемыми. На самом деле, некоторые сленговые выражения считаются приемлемыми в одних странах и оскорбительными в других.Всегда используйте ясный и прямой язык, который хорошо переводится на другие культуры.
Например, вот популярная русская идиома – Хоть кол на голове теши. По-русски эта идиома означает «Он очень упрямый человек».
Однако дословный перевод идиомы звучит так: «На этой голове можно точить топором». 😂
Вот еще один пример того, как обычное английское слово может быть катастрофическим при автоматическом переводе с умеренностью. Английское слово Salsa звучит как 설사 (seolsa) на корейском, что означает «диарея».
Именно поэтому мы рекомендуем избегать сленга или идиом, актуальных только для определенной культуры или демографической группы. Вместо этого используйте простой язык, который можно легко перевести на другие языки.
8. Используйте изображения и значки, соответствующие культурным особенностям
Адаптируйте контент, изображения, иконки и другие мультимедиа, чтобы отражать местные обычаи и культурные ссылки.
Например, Clarins, бренд средств по уходу за кожей, ориентированный на мировую аудиторию, на европейских версиях своего веб-сайта демонстрирует женщин европеоидной расы.
Однако на японской версии своего веб-сайта они показывают японских женщин, которые лучше взаимодействуют с местными клиентами.
Для иконок, особенно для иконки переключателя языка, используйте иконку глобуса, которая выглядит универсально. Например, на изображении ниже первая иконка может понравиться южноамериканской и североамериканской аудитории, но не африканской и азиатской.
Вторая иконка может понравиться африканской аудитории, но не другим.
Чтобы избежать этой путаницы, используйте универсальный значок глобуса, который понравится всем – третий вариант. Он не выделяет конкретный регион или страну и больше подходит для многоязычного сайта.
9. Предлагайте субтитры для мультимедиа
Для мультимедиа используйте файлы субтитров для перевода видео без изменения самого видео. Убедитесь, что изображения и мультимедийные элементы имеют описательный альтернативный текст, который можно перевести отдельно от визуального содержимого.
Вот еще один пример того, как перевод может помочь вам достичь более широкой аудитории. Мы являемся активными зрителями канала Project Happiness на YouTube, который ведет итальянский путешественник по имени Джузеппе.
Создатель канала - итальянец. Он записывает видео на итальянском языке и дублирует их на английский, но его канал просматривают во всем мире благодаря широкому разнообразию предоставляемых субтитров.
10. Регулярно обновляйте переводы
Linguise позволяет редактировать переведенные страницы на внешнем интерфейсе с помощью удобного интерфейса. Вы можете самостоятельно оценить переводы и внести изменения, если почувствуете необходимость.
Сайты электронной коммерции часто претерпевают изменения — товары заканчиваются, появляются ограниченные по времени распродажи, меняются сведения о продуктах и так далее.
Но использование Linguise упрощает обновление переведённого контента. Специальный сервер перевода и система кэширования ускоряют процесс перевода и отображают переведённую страницу для вашей аудитории.
11. Учитывайте языки с письмом справа налево
Большинство языков пишутся слева направо. Однако некоторые, такие как арабский, иврит и персидский, пишутся справа налево.
Здесь представлено сравнение английской и арабской версий главной страницы Instagram. Как видите, арабская версия зеркально отражает всё: изображения, кнопки, текст и даже поисковую строку.
Сервис перевода Linguiseподдерживает языки с письмом справа налево и может адаптировать макет вашего многоязычного сайта для их размещения.
Вот некоторые из доступных языков с письмом справа налево:
- Арабский (ар)
- Иврит (he)
- Персидский (фа)
- Пушту (пс)
- Урду (ur)
Если вы хотите добавить эти языки, используйте такой макет сайта, который может вместить столь значительные изменения.
SEO и производительность
Мы настоятельно рекомендуем оптимизировать ваш многоязычный веб-сайт для международных поисковых систем, чтобы максимизировать его воздействие.
Проведите исследование ключевых слов на каждом целевом языке, используйте теги hreflang для языкового и регионального таргетинга и отслеживайте результаты.
12. Оптимизируйте для локального SEO
Начните с локализованного исследования ключевых слов для каждого языка и региона. Используйте такие инструменты, как Google Keyword Planner, SEMrush или Ahrefs, чтобы найти релевантные ключевые слова, которые ищет ваша целевая аудитория.
Учитывайте региональные диалекты и вариации терминологии. Например, испанский в Мексике отличается от испанского в Европе, поэтому адаптируйте свои ключевые слова соответствующим образом.
Создайте уникальные теги заголовков для каждой языковой версии ваших страниц, включая локализованные ключевые слова. Сделайте их краткими и релевантными, идеально менее 60 символов.
Например, на английском: “Купить органический кофе онлайн | Лучшие цены” и на испанском: “Compra Café Orgánico en Línea | Mejores Precios.”
Напишите убедительные мета-описания для каждой версии языка, включая локализованные ключевые слова и четкий призыв к действию, сохраняя их длину менее 160 символов.
Например, на английском: “Купите наш выбор органического кофе, полученного из лучших ферм. Бесплатная доставка при заказах свыше $50!” и на испанском: “Compra nuestra selección de café orgánico, proveniente de las mejores fincas. ¡Envío gratis en pedidos superiores a $50!”
13. Используйте теги hreflang
Используйте атрибуты hreflang в вашем HTML, чтобы информировать поисковые системы о языке и региональной направленности ваших страниц. Это помогает предотвратить проблемы с дублированием контента и гарантирует, что пользователи будут направлены на правильную языковую версию.
14. Мониторинг производительности на разных языках
Отслеживайте производительность каждой языковой версии с помощью инструментов, таких как Google Analytics и Google Search Console. Анализируйте источники трафика, поведение пользователей и рейтинг ключевых слов, чтобы выявить области для улучшения.
Поэкспериментируйте с различными ключевыми словами, метатегами и контентными стратегиями, чтобы понять, что лучше всего воспринимается вашей аудиторией на каждом языке.
Техническое обслуживание и поддержка
Также следует учитывать ряд моментов, касающихся обслуживания и поддержки веб-сайтов и клиентов.
15. Составьте план технического обслуживания
Создание комплексного плана обслуживания вашего многоязычного веб-сайта гарантирует, что все языковые версии остаются последовательными, точными и актуальными.
Хорошо структурированный план поможет вам эффективно управлять контентом, учитывать отзывы пользователей и адаптироваться к меняющимся рыночным условиям.
Проводите аудит контента, чтобы оценить актуальность и точность существующего контента на всех языках. Проверяйте устаревшую информацию, неработающие ссылки и несоответствия между языковыми версиями.
Регулярно проверяйте переключатель языка, навигацию и другие интерактивные элементы, чтобы убедиться в их корректной работе.
16. Обеспечивайте поддержку клиентов на нескольких языках
Предоставление клиентской поддержки на нескольких языках улучшает пользовательский опыт и укрепляет доверие со стороны разнообразной аудитории.
Наняйте представителей службы поддержки клиентов, свободно говорящих на языках, которые вы поддерживаете. Это может включать штатных сотрудников или внештатных работников.
Чтобы понять, каким языкам следует уделить приоритетное внимание, вы можете проанализировать трафик вашего веб-сайта и демографические данные клиентов или провести опросы или формы обратной связи. Используйте результаты, чтобы понять языковые предпочтения ваших существующих клиентов.
17. Механизм обратной связи
Создайте простые, удобные формы обратной связи, которые позволят пользователям сообщать о проблемах с переводами или удобством использования. Убедитесь, что эти формы доступны с каждой страницы, идеально в футере или через специальный раздел поддержки.
Убедитесь, что формы обратной связи доступны на всех поддерживаемых языках, позволяя пользователям оставлять отзывы на предпочитаемом ими языке.
Включите структурированные вопросы, которые помогут пользователям оставить конкретный отзыв. Например:
- Оцените точность перевода (по шкале от 1 до 5).
- С какими трудностями вы столкнулись при переводе?
- Насколько легко было ориентироваться на сайте на вашем языке?
Для тех, кто не хочет заполнять форму обратной связи, реализуйте кнопки быстрого отзыва (например, большой палец вверх/вниз) на переведенном контенте. Это позволяет пользователям легко указать, был ли перевод полезным или точным.
18. Используйте тестовый сайт для обновлений
Тестируйте новое содержание и обновления в тестовой среде перед запуском, чтобы избежать сбоев. Вы можете использовать конструктор сайтов с ИИ, например ZipWP, чтобы создать полноценный сайт за считанные секунды.
Сайт будет включать все необходимые страницы, соответствующие изображения, привлекательный контент сайта, а также встроенные функции CMS и SEO.
Готовы выйти на глобальную аудиторию?
Эти 18 советов по UX для многоязычных сайтов помогут клиентам лучше ориентироваться на вашем сайте и взаимодействовать с контентом на их предпочтительном языке.
Хороший многоязычный дизайн UX может значительно повысить вовлеченность пользователей и потенциал конверсии. Однако создание многоязычного сайта с бесперебойным опытом требует времени и усилий.
Вот тут-то Linguise и может помочь!
Linguise изначально интегрируется с 40+ CMS, такими как WordPress, Shopify, Webflow, Squarespace, и другими. Он поддерживает 80+ языков и 10 000+ языковых пар, чтобы обеспечить лучший мультиязычный опыт работы с сайтом.
Все переводы оптимизированы для SEO и доступны по цене, составляя 10% от стоимости услуги ручного перевода.
Готовы ли вы выйти на международный рынок с Linguise?
