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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Флаги не подходят для замены названия языка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И это перевернутый дизайн для языков справа налево, таких как арабский.

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

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

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

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

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

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

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

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

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

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

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

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

Выбор цветов

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

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

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

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

Корректировка формата

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

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

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

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

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

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

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

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

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

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

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