Советы по дизайну многоязычных веб-сайтов с ConveyThis

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

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

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

Последовательный брендинг

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

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

Это очень просто сделать в WordPress с помощью ConveyThis, который идеально распознает текст независимо от выбранной вами темы (даже если она настроена индивидуально!) и автоматически переводит его, даже если вы работаете с другими плагинами.

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

В качестве примера отлично подойдет домашняя страница Airbnb. Давайте рассмотрим ее австралийскую версию:

А вот японская версия:

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

Очистить переключатели языка

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

Настоятельно рекомендуется, чтобы названия языков были на их родном языке. Например, «Español» вместо «Spanish» сотворит чудеса. Asana делает это, на их сайте есть раскрывающийся список с доступными вариантами языка.

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

«Языки» лучше, чем «Регионы»

Многие крупные международные бренды заставляют вас менять регионы, чтобы иметь возможность читать веб-сайт на вашем языке. Это ужасная идея, которая затрудняет просмотр для посетителей. Эти веб-сайты работают с предположением, что вы просматриваете в регионе, где говорят на этом языке, поэтому вы получаете текст на вашем языке, но вы можете не получить контент для интересующего вас региона.

Следующее изображение взято с сайта Adobe:

Языки не должны быть неразрывны с регионами. Возьмем, к примеру, все эти космополитичные города, такие как Нью-Йорк, Лондон и Париж. Возможно, бельгиец, живущий в Великобритании, хочет купить на сайте Великобритании, но просматривает его на французском языке. Ему нужно выбрать между покупкой на бельгийском сайте на своем языке и покупкой на сайте Великобритании на английском языке, и он не хочет делать ни то, ни другое. Таким образом, вы случайно создали барьер. Давайте рассмотрим веб-сайт, который позволяет вам указывать язык и регион отдельно, веб-сайт Uber.

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

В качестве бонуса вы можете «запомнить», какой язык выбрал пользователь, чтобы с первого посещения ему больше не пришлось переключаться.

Автоматическое определение местоположения

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

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

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

Флаги не являются подходящей заменой названия языка.

Существует 21 испаноговорящая страна и 18 англоговорящих стран, а в Китае есть 8 основных диалектов, поэтому флаги не являются хорошей заменой названий языков. Кроме того, флаги могут быть не полезными индикаторами, поскольку они могут сбивать с толку тех, кто их не узнает.

Будьте гибкими в использовании текстового пространства

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

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

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

Сайт Flickr многоязычный, давайте взглянем на оригинальную кнопку «Просмотры»:

Выглядит фантастически, все замечательно, но «views» в других языках оказывается более длинным словом, требующим больше места.

В итальянском языке это займет в три раза больше места!

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

Совместимость веб-шрифтов и кодировка веб-сайта

По данным W3C, настоятельно рекомендуется кодировать веб-страницу с помощью кодировки UTF-8 , которая допускает использование специальных символов.

Это довольно просто, декларация UTF выглядит так

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

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

Относительно языков с письмом справа налево

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

Это дизайн Facebook для языков с письмом слева направо, таких как английский.

А это перевернутый дизайн для языков с письмом справа налево, например, арабского.

Присмотритесь, все элементы дизайна расположены зеркально.

Дополнительную информацию о том, как это сделать, можно найти в статье Роберта Додиса о дизайне для языков с письмом справа налево .

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

Выберите подходящие значки и изображения

Визуальные элементы имеют очень тяжелую культурную составляющую и являются ключевыми элементами правильного дизайна веб-сайта. Каждая культура придает разное значение изображениям и значкам, некоторые интерпретации положительны, а некоторые — полностью противоположны. Некоторые изображения отражают опыт идеалов одной культуры, но в другом контексте они заставят пользователей чувствовать себя отчужденными.

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

Это домашняя страница Clarin на французском языке, на которой изображена белая женщина. А вот корейская версия, где кореянка является послом бренда.

Оскорбительными могут оказаться те визуальные материалы, которые кажутся невинными в одних культурах, но в глазах другой культуры они демонстрируют противозаконное или табуированное поведение, например, изображения гомосексуализма или расширения прав и возможностей женщин.

Это касается и иконок: в США иконка с двумя бокалами шампанского, поднимающими тост, символизирует праздник, а в Саудовской Аравии употребление алкоголя противозаконно, поэтому иконку придется заменить на соответствующую культурным нормам.

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

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

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

Выбор цвета

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

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

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

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

Настройки формата

Постарайтесь избегать использования только цифр при написании дат, поскольку существует множество различных способов их написания. В США официальным форматом является mm/dd/yyyy, и если вы видите только цифры, некоторые пользователи из других стран, использующих другие системы (например, dd/mm/yyyy), могут запутаться. Поэтому у вас есть следующие варианты: убедиться, что переведенные версии имеют адаптированный формат даты, или написать месяц буквами, чтобы ConveyThis всегда писал правильную дату.

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

Лучший плагин перевода для WordPress

Существует так много вариантов добавления плагина перевода на ваш сайт WordPress, и не все они работают одинаково, результаты будут разными. С ConveyThis вам гарантирована идеальная интеграция независимо от дизайна вашего сайта.

ConveyThis — лучший выбор для перевода веб-сайтов с 92 доступными языками. Это надежный плагин WordPress, который позволит вам быстро получить надежную многоязычную версию вашего веб-сайта. Он может понимать макет сайта, обнаруживать весь текст и переводить его. ConveyThis также включает в себя интуитивно понятный редактор для настройки текста.

ConveyThis включает в себя кнопку переключения языка "один размер подходит всем", которая работает с любым сайтом по умолчанию, но вы также можете редактировать ее столько, сколько захотите. Мы также следуем принципам дизайна, изложенным в этой статье:

• Единый брендинг на всех языковых версиях сайта.
• Понятный переключатель языков и возможность выбора предпочитаемого языка.
• Веб-сайты автоматически кодируются в UTF-8.
• Правильные интерфейсы для языков с письмом справа налево

ConveyThis: многоязычное веб-решение, которому вы можете доверять

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

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

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