Селектор языка является важным элементом, на который следует обратить пристальное внимание при создании многоязычного веб-сайта, поскольку переключатель языка - это то, что пользователи часто посещают, когда хотят переключить языки.
Эффективная кнопка переключения языка может обеспечить несколько преимуществ для сайта, от повышения оптимизации до увеличения продаж.
В этой статье мы обсудим лучшие практики проектирования селекторов языка. Давайте обсудим это дальше в следующей статье.
Что такое селектор языка?
Селектор языка - это элемент или функция пользовательского интерфейса, позволяющая пользователям выбирать язык, с которым они хотят взаимодействовать на веб-сайте, приложении или любой цифровой платформе. Обычно он встречается на веб-сайтах, программных приложениях и других цифровых интерфейсах, чтобы соответствовать пользователям, говорящим на разных языках.
Селектор языка обычно отображает список доступных языков, и пользователь может выбрать язык по своему выбору из этого списка. После выбора содержимое интерфейса, включая текст, метки и иногда изображения, будет отображаться на выбранном языке. Это особенно важно для веб-сайтов и приложений, обслуживающих глобальную аудиторию или разнообразную базу пользователей.
Селекторы языка способствуют улучшению пользовательского опыта, делая цифровой контент доступным для более широкой аудитории, независимо от уровня владения языком. Они являются ключевым компонентом локализации, позволяя разработчикам и дизайнерам адаптировать свои продукты к различным лингвистическим и культурным контекстам.
Зачем нужно настраивать переключатель языка?
Настройка переключателя языка на многоязычном веб-сайте имеет несколько важных преимуществ.
- Согласование бренда и визуальный стиль: Настроив переключатель языка, вы можете обеспечить соответствие внешнего вида и стиля используемого языка брендингу и визуальному стилю вашего веб-сайта. Вы можете настроить кнопки или меню переключения языка, чтобы они соответствовали общему дизайну вашего веб-сайта, создавая последовательность в пользовательском опыте.
- Большой контроль над отображаемыми языками: Иногда вы можете захотеть ограничить определенные языки, отображаемые в переключателе языка. Например, у вас может быть ограниченная версия вашего веб-сайта на нескольких языках, и вы хотите отображать только эти языки в переключателе языка. Настроив переключатель языка, вы можете выбрать, какие языки отображаются, что дает вам больше контроля над доступным контентом.
- Оптимизированный пользовательский опыт: Настроив переключатель языка, вы можете создать оптимизированный пользовательский опыт. Например, вы можете настроить расположение или положение переключателя языка, чтобы пользователям было легко его найти. Вы также можете добавить функции, такие как уведомления или инструкции по переключению языка, которые помогут пользователям понять, как использовать эту функцию легко.
- Удовлетворение различных потребностей пользователей: У каждого пользователя разные языковые предпочтения. Настроив переключение языка, вы можете удовлетворить потребности пользователей из разных языковых сред. Это может включать местных пользователей, международных посетителей или пользователей, которым удобнее на другом языке.
- Увеличение конверсии продаж: Правильная настройка переключателя языка также может обеспечить преимущество в увеличении конверсии продаж. Поскольку эффективный переключатель языка может обеспечить комфорт пользователя при взаимодействии с вашим сайтом. Согласно данным исследования CSA, 72,4% потребителей заявили, что они с большей вероятностью купят продукты, содержащие информацию на их родном языке. Таким образом, невозможно, чтобы уровень ваших продаж также не увеличился.
Различные типы селектора языка
Каждый владелец веб-сайта обязательно тщательно подумает, как будет выглядеть его селектор языка, у каждого сайта, конечно, будут разные предпочтения. Для тех из вас, кто ищет тип селектора языка, который можно использовать, вот некоторые из них.
Кнопка языка
Это один из наиболее часто используемых типов переключателя языка. Кнопка языка обычно представляет собой значок или текст, указывающий на отображаемый язык, например, «RU» для русского или флаг страны, представляющий конкретный язык. Когда пользователи нажимают кнопку языка, они перенаправляются на версию веб-сайта на соответствующем языке.
Для языковых кнопок рекомендуется отображать ограниченное количество языков, чтобы избежать загромождения. Обычно наличие более 4-5 языков может создать загруженный визуальный эффект. Важно разместить кнопку в видимом месте, чтобы пользователи могли легко ее найти. Мы обсудим эти аспекты далее в следующем разделе этой статьи.
Кнопки языка могут быть подходящими для бизнеса, который нацелен на конкретные рынки или обслуживает международные сообщества в определенных местах. Пример использования кнопки языка на сайте ВОЗ приведен ниже.
Текстовый линк
Текстовые ссылки - это тип переключателя языка, который использует текст в форме названия языка в качестве ссылки. Например, вы можете отображать текстовые ссылки, такие как «Английский», «Французский» или «Испанский», которые переводят пользователей на версию веб-сайта на выбранном языке. Эта текстовая ссылка обычно размещается в списке или выпадающем меню, чтобы пользователям было проще выбрать желаемый язык.
Один из типов селектора языка ссылок используется крупной компанией Facebook, в дополнение к перечисленным языкам, вы также можете нажать на значок (+) чтобы найти больше языков.
После этого страница будет немедленно переведена на ранее выбранный язык.
Меню выбора
Выпадающее меню - это тип переключателя языка, который использует выпадающее меню или открытое меню для выбора языка. Когда пользователи нажимают на меню «Параметры», они увидят список доступных языков и смогут выбрать нужный язык. Меню «Параметры» может содержать значки стран или флаги в качестве индикаторов языка, а также названия языков в тексте.
Меню выбора значительно отличается от кнопки языка, этот тип более сложен, чем просто кнопка. Как в примере ниже, который взят с веб-сайта Porsche.
Они предоставляют веб-сайт селектора языка, где пользователи могут напрямую указать свой язык или страну назначения.
Выпадающий список vs. Список vs. Всплывающее окно: Что работает лучше всего?
Выбор правильной модели взаимодействия для вашего селектора языка имеет решающее значение для обеспечения бесперебойного и интуитивно понятного пользовательского опыта. Каждый метод — будь то выпадающий список, встроенный список или всплывающее окно — предлагает различные преимущества в зависимости от макета вашего сайта, количества поддерживаемых языков и поведения пользователей. Ниже приводится сравнение трех основных моделей взаимодействия для выбора языка с учетом удобства использования, доступности и контекста реализации.
Тип | Преимущества | Ограничения | Лучший вариант использования |
Выпадающий список | Компактный, чистый, масштабируемый, с множеством языков | Требует взаимодействия (клик/тап), может быть неочевидным для всех пользователей | Многоязычные сайты с ограничениями по пространству |
Текстовый список | Видимый без взаимодействия, более быстрый доступ к ключевым языкам | Может засорять интерфейс, не масштабируется для многих языков | Сайты с 2–4 основными языковыми вариантами |
Всплывающее окно | Может включать поле поиска, гибкий дизайн интерфейса | Может нарушить поток пользователя, требует четкой кнопки закрытия и доступности | Глобальные сайты с 10+ языками |
Лучшие практики и советы по выбору языка
Разработка эффективного селектора языка предполагает обеспечение бесперебойного опыта на всех устройствах и гарантию доступности для пользователей различного происхождения. С ростом глобальной аудитории ваш переключатель языка должен быть интуитивно понятным, доступным и отзывчивым, чтобы пользователи могли комфортно взаимодействовать на предпочитаемом ими языке.
Ниже приведены лучшие практики, которые вы можете применить, чтобы ваш селектор языка был ясным, удобным и доступным для всех пользователей.
Приоритизируйте адаптивный дизайн
Большинство пользователей получают доступ к веб-сайтам с мобильных устройств, поэтому ваш селектор языка должен быть адаптивным и удобным для мобильных устройств. Убедитесь, что кнопка или меню легко нажимаются, не покрывают важный контент и остаются видимыми на меньших экранах.
Например, веб-сайт селектора языка выглядит так.
Затем, при просмотре с мобильной стороны, селектор языка все еще можно легко получить и он не перемещается или исчезает.
Используйте выпадающие списки или расширяемые меню, чтобы сохранить порядок в макете и обеспечить достаточное расстояние между сенсорными элементами для комфортного взаимодействия. Это помогает пользователям легко выбрать предпочитаемый язык без раздражения из-за тесных или труднокликаемых элементов.
Вдумчивое размещение в интерфейсе
Разместите селектор языка в хорошо видимых, ожидаемых областях, таких как верхний правый угол заголовка или нижний колонтитул. Это интуитивно понятные места, где пользователи обычно ищут языковые опции.
Избегайте скрывать селектор внутри неоднозначных иконок или вторичных меню. Сохраняйте его размещение последовательным на всех страницах, чтобы пользователи, которые часто переключают языки, могли легко найти его в любое время.
Используйте атрибуты доступности (ARIA)
Чтобы ваш селектор языка был доступен пользователям с ограниченными возможностями, используйте атрибуты ARIA (Доступные интернет-приложения) такие как aria-label, aria-haspopup и aria-expanded. Они помогают вспомогательным технологиям, таким как экранные дикторы, понять роль и функциональность элемента.
Реализация доступности соответствует стандартам WCAG и гарантирует, что ваш сайт является инклюзивным и удобным для более широкой аудитории. Инклюзивный дизайн полезен для всех, а не только для пользователей с особыми потребностями.
Используйте ясные и узнаваемые языковые метки
Отображайте каждую языковую опцию, используя ее родную метку, например, “Español” вместо “Spanish” или “Deutsch” вместо “German.” Это позволяет пользователям быстро распознавать предпочитаемый язык, даже если они не понимают текущий язык сайта.
Нативные метки более инклюзивны и снижают когнитивную нагрузку, особенно для международных пользователей. Избегайте использования неясных сокращений или языковых кодов, если ваша аудитория их не знает.
Избегайте перегрузки слишком большим количеством вариантов
Отображение слишком многих языковых опций одновременно может засорить интерфейс и запутать пользователей. Отображайте только наиболее актуальные или часто используемые языки сначала, а остальные помещайте в выпадающее меню или в раздел “Больше языков”.
Это сохраняет интерфейс чистым и улучшает удобство использования, особенно на мобильных устройствах. Используйте аналитику трафика веб-сайта, чтобы решить, какие языки следует приоритизировать или скрывать.
Используйте подходящие иконки и визуальные подсказки (без опоры на флаги)
Визуальные подсказки, такие как значки глобуса (🌐), стрелки вниз (▾) или выделение активного состояния, помогают пользователям понять, что элемент кликабелен. Однако избегайте использования национальных флагов для представления языков, поскольку один язык может быть распространен в нескольких странах.
Флаги также могут нести культурные или политические коннотации. Если вы используете визуальные элементы, сочетайте их с текстовыми метками для обеспечения ясности и сохраняйте иконочные элементы последовательными и культурно нейтральными на протяжении всего вашего дизайна.
Сохраняйте последовательность с дизайном и брендингом сайта
Ваш селектор языка должен визуально соответствовать общему стилю вашего сайта. Независимо от того, используются ли кнопки, текстовые ссылки или иконки, убедитесь, что типография, цвета и состояния наведения соответствуют вашему брендингу. Это повышает доверие и улучшает пользовательский опыт.
Если вы создаете собственный селектор, протестируйте его в разных браузерах и на разных устройствах, чтобы убедиться, что он работает как задумано. Последовательный дизайн и надежная функциональность способствуют бесперебойному мультилингвальному пользовательскому опыту.
Настройка языкового селектора с помощью 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: Установите дизайн флага
После этого ниже основного раздела дисплея вы столкнетесь с конфигурациями дизайна, специально предназначенными для флага. Изображение ниже демонстрирует некоторые из доступных вариантов настроек.
- Отображение названия языка: У вас есть возможность отображать название языка на основе либо страны, либо самого языка. Например, вы можете выбрать отображение «Немецкий» или «Deutsch».
- Тип английского флага: Этот параметр применим при работе с языками, имеющими несколько вариантов, такими как “Английский США” или “Английский Британии.” Аналогичные выборы можно сделать для языков, таких как испанский, тайваньский, немецкий и португальский.
- Стиль флага: Этот параметр позволяет определить форму иконки флага, будет ли она круглой или квадратной (прямоугольной).
Шаг 6: Установите цвет и размер флага
После настройки дизайна флага следующим шагом является регулировка цветов, размера и различных других элементов. В следующем интерфейсе вы найдете множество настраиваемых параметров, включая:
- Радиус границы флага: Это позволяет вам настроить радиус границы в пикселях при использовании прямоугольного флага.
- Цвет названия языка: Вы можете выбрать цвет текста по умолчанию для названия языка.
- Цвет всплывающего языка: Этот параметр определяет цвет названия языка во всплывающих или выпадающих областях.
- Размер флага:
- Цвет при наведении на имя языка: Этот параметр управляет цветом текста при наведении мыши на имена языков.
- Цвет при наведении на язык в всплывающем окне: Аналогично, этот параметр определяет цвет текста при наведении мыши на название языка во всплывающем окне или выпадающем списке.
Шаг 7: Настройка тени блока флага
На заключительном этапе у вас есть возможность настроить параметры тени для флага. Начальная настройка позволяет указать тень для каждого флага, отображаемого на вашем сайте, а последующая настройка относится к эффекту тени при наведении на языковой флаг.
Не забудьте нажать на кнопку Сохранить, чтобы сохранить настройки, сделанные для переключателя языка. Это гарантирует, что выбранные конфигурации для эффектов тени будут реализованы и сохранены для будущего использования.
После того, как все конфигурации были выполнены, вот пример отображения селектора языка с помощью всплывающего окна, расположенного в правом верхнем углу, и с использованием инициалов. Это всего лишь пример, вы можете настроить остальное по своему усмотрению и в соответствии с потребностями сайта.
Помимо WordPress CMS, вы также можете использовать другие платформы веб-сайтов и следовать подробному руководству, такому как настройка переключателя для OpenCart, переключатель языка для Drupal, и настройка переключателя для PrestaShop.
Создайте свой селектор языка для бесперебойного многоязычного опыта с Linguise!
Здесь вы получили представление о лучших практиках проектирования селекторов языка и о том, как это сделать с помощью Linguise! Поверьте мне, создание переключателя языка может принести много пользы и обеспечить оптимизацию на основе вышеупомянутых моментов.
При создании селектора языка убедитесь, что следуете советам и лучшим практикам, которые мы объяснили выше, начиная с использования иконок и выбора соответствующих языков до позиционирования.
Теперь зарегистрируйте Linguise аккаунт, добавьте свой веб-сайт и настройте селектор языка, чтобы обеспечить лучший пользовательский опыт. Не забудьте попробовать 1-месячный бесплатный пробный период, чтобы воспользоваться превосходными функциями Linguise!
