Селектор языка — это важный элемент, на который следует обратить пристальное внимание при создании многоязычного веб-сайта , поскольку переключатель языка — это то, что пользователи часто посещают, когда хотят переключить язык.
Эффективная кнопка переключения языка может обеспечить веб-сайту несколько преимуществ: от повышения веб-оптимизации до увеличения продаж.
В этой статье мы обсудим лучшие практики разработки языковых селекторов. Давайте обсудим это подробнее в следующей статье.
Что такое переключатель языка?
Селектор языка — это элемент или функция пользовательского интерфейса, которая позволяет пользователям выбирать язык, на котором они хотят взаимодействовать с веб-сайтом, приложением или любой цифровой платформой. Его обычно можно встретить на веб-сайтах, в программных приложениях и других цифровых интерфейсах, которые подходят пользователям, говорящим на разных языках.
Селектор языка обычно отображает список доступных языков, и пользователь может выбрать язык по своему выбору из этого списка. После выбора содержимое интерфейса, включая текст, метки и иногда изображения, будет отображаться на выбранном языке. Это особенно важно для веб-сайтов и приложений, которые обслуживают глобальную аудиторию или разнообразную базу пользователей.
Средства выбора языка способствуют улучшению пользовательского опыта, делая цифровой контент доступным для более широкой аудитории, независимо от уровня ее языковых навыков. Они являются ключевым компонентом усилий по локализации, позволяя разработчикам и дизайнерам адаптировать свои продукты к различным языковым и культурным контекстам.
Зачем нужно настраивать переключатель языков?
Настройка переключателя языка на многоязычном веб-сайте имеет несколько важных преимуществ.
- Согласование бренда и визуальный стиль. Настраивая переключатель языка, вы можете гарантировать, что внешний вид и стиль используемого языка будут соответствовать брендингу и визуальному стилю вашего веб-сайта. Вы можете настроить кнопки или меню переключения языка в соответствии с общим дизайном вашего веб-сайта, обеспечивая согласованность взаимодействия с пользователем.
- Больший контроль над отображаемыми языками. Иногда вам может потребоваться ограничить отображение определенных языков в переключателе языков. Например, у вас может быть ограниченная версия вашего веб-сайта на нескольких языках, и вы хотите отображать только эти языки в переключателе языков. Настраивая переключатель языков, вы можете выбирать, какие языки будут отображаться, что дает вам больше контроля над доступным контентом.
- Оптимизированный пользовательский интерфейс: настроив переключатель языка, вы можете создать оптимизированный пользовательский интерфейс. Например, вы можете настроить макет или положение переключателя языка, чтобы пользователям было легче его найти. Вы также можете добавить такие функции, как уведомления или инструкции по переключению языка, которые помогут пользователям понять, как легко использовать эту функцию.
- Удовлетворение различных потребностей пользователей: у каждого пользователя разные языковые предпочтения. Настраивая переключение языка, вы можете удовлетворить потребности пользователей с разным языковым опытом. Сюда могут входить местные пользователи, гости из других стран или пользователи, которым удобнее говорить на другом языке.
- Увеличение конверсии продаж: правильная настройка переключателя языка также может повысить конверсию продаж. Потому что эффективный переключатель языка может обеспечить комфорт пользователя при взаимодействии с вашим сайтом. По данным CSA Research, 72,4% потребителей заявили, что с большей вероятностью купят продукты, информация на которых написана на их родном языке. Поэтому невозможно, чтобы ваш уровень продаж также увеличился.
Различные типы выбора языка
Каждый владелец веб-сайта, безусловно, внимательно продумает, как выглядит его средство выбора языка; у каждого веб-сайта, конечно, будут разные предпочтения. Для тех из вас, кто ищет тип переключателя языка, который можно использовать, вот некоторые из них.
Кнопка выбора языка
Это один из часто используемых типов переключателя языка. Кнопка выбора языка обычно представляет собой значок или текст, обозначающий отображаемый язык, например «EN» для английского языка или флаг страны для обозначения определенного языка. Когда пользователи нажимают кнопку выбора языка, они будут перенаправлены на версию веб-сайта на соответствующем языке.
Для языковых кнопок рекомендуется отображать ограниченное количество языков, чтобы избежать загромождения дисплея. Как правило, наличие более 4–5 языков может создать перегруженный визуальный эффект. Важно расположить кнопку на видном месте, чтобы пользователи могли легко ее найти. Мы обсудим эти аспекты подробнее в следующем разделе этой статьи.
Языковые кнопки могут подойти компаниям, ориентированным на определенные рынки или обслуживающим международные сообщества в определенных местах. Пример использования кнопки языка на веб-сайте ВОЗ приведен ниже.
Текстовая ссылка
Текстовые ссылки — это тип переключателя языка, который использует в качестве ссылки текст в виде названия языка. Например, вы можете отображать текстовые ссылки, такие как «Английский», «Французский» или «Испанский», которые перенаправляют пользователей на версию веб-сайта на выбранном языке. Эта текстовая ссылка обычно размещается в списке или раскрывающемся меню, чтобы пользователям было проще выбрать нужный язык.
Один из типов выбора языка ссылок используется крупной компанией Facebook. Помимо перечисленных языков, вы также можете нажать значок (+), чтобы найти больше языков.
После этого страница будет сразу переведена на выбранный ранее язык.
Меню выбора
Меню выбора — это тип переключателя языка, в котором для выбора языка используется раскрывающееся или открытое меню. Когда пользователи нажмут на меню параметров, они увидят список доступных языков и смогут выбрать нужный язык. Меню параметров может содержать значки или флаги стран в качестве индикаторов языка, а также названия языков в тексте.
Меню выбора сильно отличается от кнопки языка, этот тип сложнее, чем просто кнопка. Как пример ниже, взятый с сайта Porsche.
Они предоставляют веб-сайт выбора языка, где пользователи могут напрямую указать свой язык или страну назначения.
Выпадающая часть против списка против всплывающего окна: что работает лучше всего?
Выбор правильной модели взаимодействия для вашего выбора языка имеет решающее значение для обеспечения бесшовного и интуитивного пользовательского опыта. Каждый метод-будь то раскрывающийся список, встроенный список или всплывающее окно, предлагает различные преимущества в зависимости от макета вашего веб-сайта, количества поддерживаемых языков и поведения пользователей. Ниже приводится сравнение трех основных моделей взаимодействия для выбора языка, сосредоточенного на UX, доступности и контексте реализации.
Тип | Стригты | Ограничения | Лучший вариант использования |
Падать | Компактный, чистый, масштабируемый, со многими языками | Требуется взаимодействие (щелчок/нажимать), может быть не очевидным для всех пользователей | Многоязычные сайты с пространственными ограничениями |
Текстовый список | Виден без взаимодействия, более быстрый доступ для ключевых языков | Может загромождать пользовательский интерфейс, не масштабируемый для многих языков | Сайты с 2–4 вариантами языка |
Неожиданно возникнуть | Может включить поле поиска, гибкий дизайн пользовательского интерфейса | Может нарушить пользовательский поток, нуждается в кнопке Clear Close и доступности | Глобальные сайты с 10+ языками |
Рекомендации и советы по выбору языка
Разработка эффективного селектора языка включает в себя предоставление бесшовного опыта на всех устройствах и обеспечение доступности для пользователей различных фонов. Со все более глобальной аудиторией ваш языковой переключатель должен быть интуитивно понятным, доступным и отзывчивым, чтобы пользователи могли комфортно взаимодействовать на своем предпочтительном языке.
Ниже приведены лучшие практики, которые вы можете применить, чтобы гарантировать, что ваш выбор языка является ясным, удобным и доступным для всех пользователей.
Расстановить приоритет отзывчивого дизайна
Большинство пользователей получают доступ к веб-сайтам с мобильных устройств, поэтому ваш выбор языка должен быть отзывчивым и мобильным. Убедитесь, что кнопка или меню легко нажать, не покрывают важное содержание и остается видимым на небольших экранах.
Например, сайт селектора языка выглядит так.
Затем, глядя с мобильной стороны, селектор языка все еще может быть доступен легко и не перемещается и не исчезает.
Используйте выпадающие или расширяемые меню, чтобы сохранить макет аккуратно, и убедитесь, что касательные цели имеют достаточно расстояния для комфортного взаимодействия. Это помогает пользователям выбирать предпочтительный язык легко без разочарования, вызванного тесными или труднодоступными элементами.
Вдумчивое размещение в интерфейсе
Поместите селектор языка в очень заметные, ожидаемые области, такие как верхний правый уголок заголовка или нижний нижний колонтитул. Это интуитивно понятные места, где пользователи обычно ищут языковые варианты.
Избегайте скрытия селектора внутри неоднозначных значков или вторичных меню. Сохраняйте его размещение на всех страницах, чтобы пользователи, которые часто переключали языки, могли легко найти его в любое время.
Используйте атрибуты доступности (ARIA)
Чтобы гарантировать, что ваш выборка доступен для пользователей с ограниченными возможностями, используйте атрибуты ARIA (доступные богатые интернет-приложения), такие как ARIA-Label, Aria-Haspopup и ARIA-расширенная. Эти помогают вспомогательным технологиям, таким как читатели экрана понимать роль и функциональность элемента.
Реализация доступности соответствует стандартам WCAG и гарантирует, что ваш сайт включен и доступен более широкой аудиторией. Инклюзивный дизайн приносит пользу всем, а не только пользователям с конкретными потребностями.
Используйте четкие и узнаваемые языковые этикетки
Отобразите каждый язык языка, используя свой нативный этикетку, например, «Español» вместо «испанского» или «Deutsch» вместо «немецкого». Это позволяет пользователям быстро распознавать свой предпочтительный язык, даже если они не понимают текущего языка сайта.
Нативные этикетки более инклюзивны и снижают когнитивную нагрузку, особенно для международных пользователей. Избегайте использования неясных сокращений или языковых кодов, если ваша аудитория их не знает.
Избегайте перегрузки со слишком большим количеством вариантов
Показывание слишком большого количества языковых вариантов одновременно может загромождать интерфейс и запутать пользователей. Сначала отображайте только самые релевантные или обычно используемые языки, а остальные поместите остальное в раскрывающемся меню или в разделе «Больше языков».
Это держит интерфейс в чистоте и улучшает удобство использования, особенно на мобильных устройствах. Используйте аналитику трафика веб -сайта, чтобы решить, какие языки должны быть приоритетными или скрытыми.
Используйте соответствующие значки и визуальные сигналы (не полагаясь на флаги)
Визуальные подсказки, такие как значки глобуса (🌐), стрелки вниз (▾) или активное состояние, подчеркивают, что пользователи понимают, что элемент кликабель. Тем не менее, избегайте использования национальных флагов для представления языков, как можно сказать на одном языке в нескольких странах.
Флаги также могут нести культурные или политические последствия. Если вы используете визуальные эффекты, соедините их с текстовыми метками, чтобы обеспечить ясность, и сохраните значки последовательными и культурно нейтральными по всему дизайну.
Оставайтесь в соответствии с дизайном и брендингом веб -сайтов
Ваш языковой селектор должен визуально соответствовать общему стилю вашего сайта. Независимо от того, используя ли кнопки, текстовые ссылки или значки, гарантируйте, что типография, цвета и состояния наказания соответствуют вашему брендинге. Это улучшает доверие и укрепляет пользовательский опыт.
Если вы создаете пользовательский селектор, протестируйте его в разных браузерах и устройствах, чтобы убедиться, что он работает так, как задумано. Последовательный дизайн и надежная функциональность способствуют бесшовному многоязычному путешествию пользователя.
Настройка переключателя языка с помощью Linguise за 7 шагов
На данный момент вы знаете лучшие практики для выбора языка. Этот перевод можно выполнить после того, как вы воспользуетесь услугой перевода веб-сайта. Однако не все службы перевода обеспечивают гибкость настроек выбора языка.
Но не волнуйтесь, потому что Linguise не такой. Linguise — это служба автоматического перевода, которая позволяет пользователю настраивать переключатель языка. Некоторые из преимуществ, которые вы получите при использовании Linguise , включают:
- Linguise можно использовать и интегрировать в более чем 40 CMS ( WordPress , Joomla , Drupal и т. д.).
- Перевод на различные языки будет выполнен автоматически через несколько секунд после того, как вы добавите язык в переключатель языков на сайте.
- Доступно более 80+ языков , которые можно добавить в инструмент выбора языка.
- Linguise автоматически подготовит уникальный URL-адрес в соответствии с языком назначения перевода. Например, URL-адрес linguise .com/de/ для страницы, которая переводится на немецкий язык.
- Он автоматически создаст канонический URL-адрес, чтобы избежать дублирования контента в поисковых системах, когда на странице есть языковые варианты.
- Вы можете настроить переключатель языка в соответствии с потребностями веб-сайта, начиная от значка и цвета и заканчивая названием языка.
- Вы можете просмотреть статистику просмотров страниц посетителей по каждому языку для каждого языка, добавленного в селектор языков.
В этом уроке мы будем использовать WordPress в качестве примера используемой CMS.
Шаг 1: Регистрация бесплатной учетной записи Linguise
Чтобы получить доступ к переключателю языка на Linguise , первым делом вам необходимо зарегистрировать учетную запись на Linguise . Linguise также предлагает бесплатную пробную версию на один месяц, которая включает в себя множество функций, которыми вы можете воспользоваться.
Шаг 2. Добавьте домен на свой многоязычный веб-сайт.
Второй шаг — уже принадлежащий вам домен веб-сайта в Linguise Linguise . Есть несколько вещей, которые вам нужно заполнить, начиная с.
- Счет
- URL-адреса
- Платформа
- Язык
- Язык перевода
- Перевести URL-адрес
После этого вам необходимо активировать ключ API и установить URL-адрес языка. Полное руководство по добавлению домена веб-сайта вы можете прочитать в документации, а специально для WordPress вы можете просмотреть его, установив автоматический перевод Linguise WordPress или посмотрев видеоурок ниже.
Шаг 3: Установите плагин Linguise
После успешного добавления веб-сайта откройте WordPress и установите Linguise . Для этого выберите «Плагины» > «Добавить новый» > Linguise > «Установить» > «Активировать».
Если плагин уже установлен, перейдите в панель управления Linguise и скопируйте ключ API.
Затем откройте плагин Linguise и вставьте код API, полученный из панели управления Linguise в следующий столбец.
Шаг 4. Настройте главный дисплей
Чтобы настроить переключатель языка или отобразить языковые флаги, выполните действия через Linguise в меню «Настройки» > «Отображение языковых флагов».
Во время первоначальной настройки мы внесем коррективы в основной дисплей с учетом различных компонентов.
Одним из первоначальных соображений является настройка формата отображения списка языков, который предлагает три варианта на выбор: рядом, раскрывающийся список или всплывающее окно. С левой стороны имеется предварительный просмотр для каждого формата.
Первый формат, как показано ниже, представляет собой макет «бок о бок».
В следующем формате используется стиль раскрывающегося списка, как показано на рисунке ниже.
Наконец, у нас есть формат всплывающего окна в качестве последнего варианта.
Далее переходим к следующему шагу, который предполагает настройку положения переключателя языка. У вас есть возможность выбирать из различных вариантов позиции, поэтому важно выбрать позицию, которая будет легко заметна посетителям.
Наконец, вам нужно определиться с предпочтительной комбинацией отображения языковых опций. Вы можете выбирать между такими вариантами, как флаг + название языка, флаг + короткое имя или просто отображение только флага. Это решение будет зависеть от ваших конкретных дизайнерских предпочтений и предпочтений вашей целевой аудитории.
Шаг 5. Установите дизайн флага
После этого под основным разделом дисплея вы увидите конфигурации дизайна специально для флага. Изображение, представленное ниже, демонстрирует некоторые доступные параметры настройки.
- Отображение названия языка : у вас есть возможность отображать название языка в зависимости от страны или самого языка. Например, вы можете выбрать отображение «Немецкий» или «Немецкий».
- Тип английского флага: этот параметр применим при работе с языками, имеющими несколько вариантов, например «Английский США» или «Английский Британия». Аналогичный выбор можно сделать для таких языков, как испанский, тайваньский, немецкий и португальский.
- Стиль флага: этот параметр позволяет вам определить форму значка флага: круглую или квадратную (прямоугольную).
Шаг 6. Установите цвет и размер флага.
После того, как дизайн флага настроен, следующим шагом будет настройка цвета, размера и других элементов. В следующем интерфейсе вы найдете множество настраиваемых параметров, в том числе:
- Флаг border-radius: позволяет персонализировать радиус границы в пикселях при использовании прямоугольного флага.
- Цвет названия языка: вы можете выбрать цвет текста по умолчанию для названия языка.
- Цвет языка всплывающих окон: этот параметр определяет цвет заголовка языка во всплывающих или раскрывающихся областях.
- Размер флага: у вас есть возможность изменить размер флага в соответствии с вашими предпочтениями.
- Цвет при наведении на название языка: этот параметр управляет цветом текста при наведении указателя мыши на названия языков.
- Цвет при наведении на язык всплывающего окна. Аналогично, этот параметр определяет цвет текста при наведении указателя мыши на заголовок языка во всплывающем или раскрывающемся списке.
Шаг 7: Установите флаг box-shadow
На заключительном этапе у вас есть возможность настроить параметры тени для флага. Первоначальная настройка позволяет вам указать тень для каждого флага, отображаемого на вашем веб-сайте, а последующая настройка относится к эффекту тени при наведении курсора на флаг языка.
Не забудьте нажать «Сохранить» , чтобы сохранить настройки, выполненные вами для переключателя языка. Это гарантирует, что выбранные вами конфигурации эффектов тени будут реализованы и сохранены для использования в будущем.
После того, как все настройки были выполнены, вот пример отображения выбора языка с использованием всплывающего окна, расположенного в верхнем правом углу, и с использованием инициалов. Это всего лишь пример, остальное вы можете настроить по своему желанию и в соответствии с потребностями сайта.
Помимо WordPress , вы также можете использовать другие платформы веб-сайтов и следовать подробному руководству, такому как переключатель настройки для OpenCart , переключатель языка для Drupal и переключатель настроек для PrestaShop .
Создайте свой выбор языка для беспрепятственного многоязычного взаимодействия с Linguise!
Здесь вы узнали о лучших методах разработки языковых селекторов и о том, как это сделать с помощью Linguise! Поверьте, создание переключателя языков может дать множество преимуществ и обеспечить оптимизацию на основе упомянутых выше моментов.
При создании средства выбора языка обязательно следуйте советам и рекомендациям, которые мы объяснили выше, начиная с использования значков и выбора соответствующих языков и заканчивая позиционированием.
Теперь зарегистрируйте учетную запись Linguise , добавьте свой веб-сайт и настройте переключатель языка, чтобы обеспечить лучший пользовательский опыт. Не забудьте попробовать бесплатную пробную версию на 1 месяц, чтобы насладиться превосходными функциями Linguise Linguise
