Знаете ли вы, что 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-элементов таких как
Это позволяет легко обновлять и переводить без изменения основной кодовой базы. Используйте библиотеки локализации, такие как i18next для JavaScript, чтобы управлять переводами динамически.
Сохраняйте дизайн и содержание отдельно, и макет с меньшей вероятностью будет испорчен после перевода.
6. Предоставьте варианты переключения языка
Предоставление четких и доступных вариантов переключения языка необходимо для многоязычного сайта. Разместите переключатель в правом верхнем углу для удобного доступа и используйте контрастные цвета и четкую типографику, чтобы он выделялся. Для ясности указывайте название языка на родном алфавите (например, “Español” для испанского).
Выпадающее меню может эффективно отображать несколько вариантов языка, не занимая слишком много места. Использование флагов может обеспечить визуальный сигнал, но будьте осторожны, поскольку флаги иногда могут быть вводящими в заблуждение.
Например, флаг может представлять язык, на котором говорят в нескольких странах. Часто лучше всего сочетать флаги с названиями языков для ясности.
Четко показывайте выбранный язык, используя другой цвет или жирный шрифт. Используя такие методы, как AJAX, убедитесь, что выбор языка сразу же меняет содержимое без перезагрузки страницы. Сделайте переключатель языка адаптивным для мобильных устройств и протестируйте его удобство использования с носителями языка.
Содержание и перевод
Вот несколько советов по контенту и переводу для улучшения пользовательского опыта.
7. Избегайте идиом и сленга
Не все сленговые выражения являются универсально приемлемыми. На самом деле, некоторые сленговые выражения считаются приемлемыми в одних странах и оскорбительными в других.Всегда используйте ясный и прямой язык, который хорошо переводится на другие культуры.
Например, вот популярная русская идиома – Хоть кол на голове теши. Эта идиома по-русски означает «Он очень упрямый человек».
Однако дословный перевод этой идиомы звучит так: «На этой голове можно топором заточить». 😂
Вот еще один пример того, как обычное английское слово может быть катастрофическим при автоматическом переводе с умеренностью. Английское слово Salsa звучит как 설사 (seolsa) на корейском, что означает «диарея».
Именно поэтому мы рекомендуем избегать сленга или идиом, актуальных только для определенной культуры или демографической группы. Вместо этого используйте простой язык, который можно легко перевести на другие языки.
8. Используйте изображения и иконки, соответствующие культурным особенностям
Адаптируйте контент, изображения, иконки и другие мультимедиа, чтобы отражать местные обычаи и культурные ссылки.
Например, Clarins, бренд по уходу за кожей, ориентированный на глобальную аудиторию, показывает европеоидных женщин в своих европейских версиях сайта.
Однако на японской версии своего сайта они показывают японских женщин, чтобы лучше наладить связь с местными клиентами.
Для иконок, особенно для иконки переключателя языка, используйте иконку глобуса, которая выглядит универсально. Например, на изображении ниже первая иконка может понравиться южноамериканской и североамериканской аудитории, но не африканской и азиатской.
Вторая иконка может понравиться африканской аудитории, но не другим.
Чтобы избежать этой путаницы, используйте универсальный значок глобуса, который понятен всем – третий. Он не выделяет конкретный регион или страну и больше подходит для многоязычного веб-сайта.
9. Предлагайте субтитры для мультимедиа
Для мультимедиа используйте файлы субтитров для перевода видео без изменения самого видео. Убедитесь, что изображения и мультимедийные элементы имеют описательный альтернативный текст, который можно перевести отдельно от визуального содержимого.
Вот еще один пример того, как перевод может помочь вам достичь более широкой аудитории. Мы являемся активными зрителями канала Project Happiness на YouTube, который ведет итальянский путешественник по имени Джузеппе.
Создатель канала - итальянец. Он записывает видео на итальянском языке и дублирует их на английский, но его канал просматривают во всем мире благодаря широкому разнообразию предоставляемых субтитров.
Готовы исследовать новые рынки? Попробуйте наш автоматический сервис перевода бесплатно с нашим 1-месячным безрисковым испытанием. Кредитная карта не требуется!
10. Регулярно обновляйте переводы
Linguise позволяет редактировать переведенные страницы на внешнем интерфейсе с помощью удобного интерфейса. Вы можете самостоятельно оценить переводы и внести изменения, если почувствуете необходимость.
Сайты электронной коммерции часто претерпевают изменения — товары заканчиваются, появляются ограниченные по времени распродажи, меняются сведения о продуктах и так далее.
Но использование Linguise упрощает обновление переведённого контента. Специальный сервер перевода и система кэширования ускоряют процесс перевода и отображают переведённую страницу для вашей аудитории.
11. Учитывайте языки с письмом справа налево
