Селектор языка — важный элемент, на который следует обратить пристальное внимание при создании многоязычного сайта , поскольку переключатель языка — это то, к чему пользователи часто обращаются, когда хотят сменить язык.
Эффективная кнопка переключения языка может принести несколько преимуществ для веб-сайта, от повышения веб-оптимизации до увеличения продаж.
В этой статье мы обсудим лучшие практики проектирования языковых селекторов. Давайте рассмотрим это подробнее в следующей статье.
Ключевые моменты: лучшие практики для дизайна селектора языка
Стратегическое размещение максимизирует использование
Размещение меню в шапке для компьютеров и в виде гамбургер-меню для мобильных устройств обеспечивает доступность, не нарушая пользовательский опыт и скорость загрузки страницы.
Умное автоопределение с возможностью переопределения
Определяйте язык браузера, но всегда предоставляйте простой способ ручного переключения и запоминайте предпочтения пользователя с помощью cookie-файлов.
SEO и доступность обязательны
Внедрите теги hreflang, ARIA-метки для программ чтения с экрана, дизайн, удобный для сенсорного управления, и резервный вариант без JavaScript для поисковых роботов.
Что такое селектор языка?
Селектор языка — это элемент пользовательского интерфейса или функция, позволяющая пользователям выбрать язык, на котором они хотят взаимодействовать с веб-сайтом, приложением или любой цифровой платформой. Он часто встречается на веб-сайтах, в программных приложениях и других цифровых интерфейсах, чтобы удовлетворить потребности пользователей, говорящих на разных языках.
Селектор языка обычно отображает список доступных языков, и пользователь может выбрать язык по своему усмотрению из этого списка. После выбора интерфейсный контент, включая текст, метки и иногда изображения, будет отображаться на выбранном языке. Это особенно важно для веб-сайтов и приложений, которые обслуживают глобальную аудиторию или разнообразную базу пользователей.
Селекторы языка способствуют улучшению пользовательского опыта, делая цифровой контент доступным для более широкой аудитории, независимо от уровня владения языком. Они являются ключевым компонентом усилий по локализации, позволяя разработчикам и дизайнерам адаптировать свои продукты к различным языковым и культурным контекстам.
Зачем нужно настраивать переключатель языков?
Настройка переключателя языков на многоязычном веб-сайте имеет несколько важных преимуществ.
- Соответствие бренду и визуальный стиль: Настраивая переключатель языков, вы можете обеспечить соответствие внешнего вида и стиля используемого языка брендингу и визуальному стилю вашего сайта. Вы можете настроить кнопки или меню переключения языков в соответствии с общим дизайном вашего сайта, создавая единообразие в пользовательском опыте.
- Больший контроль над отображаемыми языками: Иногда вам может потребоваться ограничить определенные языки, отображаемые в переключателе языков. Например, у вас может быть ограниченная версия вашего сайта на нескольких языках, и вы хотите отображать только эти языки в переключателе языков. Настраивая переключатель языков, вы можете выбирать, какие языки отображаются, что дает вам больше контроля над доступным контентом.
- Оптимизированный пользовательский опыт: Настраивая переключатель языков, вы можете создать оптимизированный пользовательский опыт. Например, вы можете настроить макет или положение переключателя языков, чтобы пользователям было легко его найти. Вы также можете добавить такие функции, как уведомления или инструкции по переключению языков, которые помогут пользователям легко понять, как использовать эту функцию.
- Удовлетворение различных потребностей пользователей: У каждого пользователя свои языковые предпочтения. Настраивая переключение языков, вы можете удовлетворить потребности пользователей с разным языковым фоном. Это могут быть местные пользователи, международные посетители или пользователи, которым удобнее общаться на другом языке.
- Повышение конверсии продаж: правильная настройка переключателя языков также может дать преимущество в виде увеличения конверсии продаж. Ведь эффективный переключатель языков обеспечивает комфорт пользователя при взаимодействии с вашим сайтом. Согласно данным CSA Research, 72,4% потребителей заявили, что с большей вероятностью купят товары, информация о которых представлена на их родном языке. Так что невозможно, чтобы ваш уровень продаж также не вырос.
Различные типы переключателя языка
Каждый владелец сайта обязательно тщательно продумает, как выглядит его переключатель языка; у каждого сайта, конечно, будут свои предпочтения. Для тех из вас, кто ищет подходящий тип переключателя языка, вот некоторые из них.
Кнопка выбора языка
Это один из часто используемых типов переключателя языка. Кнопка языка обычно представляет собой иконку или текст, указывающий отображаемый язык, например, “EN” для английского или флаг страны для обозначения конкретного языка. Когда пользователи нажимают на кнопку языка, они перенаправляются на версию сайта на соответствующем языке.
Для кнопок выбора языка рекомендуется отображать ограниченное количество языков, чтобы избежать загроможденного отображения. Как правило, наличие более 4-5 языков может создать перегруженный визуальный эффект. Важно разместить кнопку в видимом месте, чтобы пользователи могли легко ее найти. Мы обсудим эти аспекты далее в следующем разделе этой статьи.
Кнопки выбора языка могут подойти компаниям, ориентированным на конкретные рынки или обслуживающим международные сообщества в определённых регионах. Пример использования кнопки выбора языка на сайте ВОЗ приведён ниже.
Текстовая ссылка
Текстовые ссылки — это тип переключателя языков, который использует текст в виде названия языка в качестве ссылки. Например, вы можете отображать текстовые ссылки, такие как «English», «Français» или «Español», которые перенаправляют пользователей на версию сайта на выбранном языке. Эта текстовая ссылка обычно размещается в списке или выпадающем меню, чтобы пользователям было проще выбрать нужный язык.
Один из типов языкового селектора в виде ссылок используется крупной компанией Facebook: помимо перечисленных языков, вы также можете нажать на значок (+), чтобы найти больше языков.
После этого страница будет немедленно переведена на ранее выбранный язык.
Меню выбора
Меню выбора — это тип переключателя языков, который использует выпадающее меню или открытое меню для выбора языка. Когда пользователи нажимают на меню параметров, они видят список доступных языков и могут выбрать нужный язык. Меню параметров может содержать иконки стран или флаги в качестве языковых индикаторов, а также названия языков в тексте.
Меню выбора языка существенно отличается от языковой кнопки: этот тип сложнее, чем просто кнопка. Как в примере ниже, взятом с сайта Porsche.
Они предлагают сайт с переключателем языка, где пользователи могут напрямую указать свой язык или страну назначения.
Выпадающий список, обычный список или всплывающее окно: что работает лучше?
Выбор правильной модели взаимодействия для вашего селектора языка имеет решающее значение для обеспечения бесшовного и интуитивно понятного пользовательского опыта. Каждый метод—будь то выпадающий список, встроенный список или всплывающее окно, предлагает различные преимущества в зависимости от макета вашего сайта, количества поддерживаемых языков и поведения пользователей. Ниже приведено сравнение трех основных моделей взаимодействия для выбора языка, с акцентом на UX, доступность и контекст реализации.
Тип | Преимущества | Ограничения | Лучший вариант использования |
Выпадающий список | Компактный, чистый, масштабируемый, с множеством языков | Требует взаимодействия (клик/нажатие), может быть неочевидным для всех пользователей | Многоязычные сайты с ограничениями по пространству |
Список текстов | Виден без взаимодействия, быстрый доступ к ключевым языкам | Может загромождать интерфейс, не масштабируется для многих языков | Сайты с 2–4 основными языковыми опциями |
Всплывающее окно | Может включать поле поиска, гибкий дизайн интерфейса | Может нарушить пользовательский поток, требует четкой кнопки закрытия и доступности | Глобальные сайты с более чем 10 языками |
Лучшие практики и советы по выбору языка
Разработка эффективного селектора языка включает в себя обеспечение бесшовного взаимодействия на всех устройствах и доступности для пользователей с разным опытом. В условиях растущей глобальной аудитории ваш переключатель языка должен быть интуитивно понятным, доступным и адаптивным, чтобы пользователи могли комфортно общаться на предпочитаемом языке.
Ниже приведены лучшие практики, которые вы можете применить, чтобы ваш селектор языка был понятным, удобным и доступным для всех пользователей.
Уделите приоритет адаптивному дизайну
Большинство пользователей заходят на сайты с мобильных устройств, поэтому ваш переключатель языка должен быть адаптивным и удобным для мобильных устройств. Убедитесь, что кнопка или меню легко нажимаются, не перекрывают важный контент и остаются видимыми на маленьких экранах.
Например, сайт с языковым селектором выглядит так.
Кроме того, при просмотре с мобильного устройства селектор языка по-прежнему легко доступен и не перемещается и не исчезает.
Используйте выпадающие списки или раскрывающиеся меню, чтобы сохранить аккуратность макета, и убедитесь, что сенсорные элементы имеют достаточно пространства для комфортного взаимодействия. Это поможет пользователям легко выбрать предпочитаемый язык без разочарования, вызванного тесными или труднодоступными для нажатия элементами.
Продуманное размещение в интерфейсе
Разместите переключатель языка в хорошо заметных и ожидаемых местах, например, в правом верхнем углу шапки сайта или в нижнем колонтитуле. Это интуитивно понятные места, где пользователи обычно ищут варианты выбора языка.
Избегайте скрытия селектора внутри неоднозначных значков или второстепенных меню. Сохраняйте его размещение единообразным на всех страницах, чтобы пользователи, часто переключающие языки, могли легко найти его в любое время.
Используйте атрибуты доступности (ARIA)
Чтобы ваш селектор языка был доступен для пользователей с ограниченными возможностями, используйте атрибуты ARIA (Accessible Rich Internet Applications), такие как 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 в качестве примера используемой системы управления контентом.
Шаг 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: Настройка дизайна флага
После этого ниже основного раздела отображения вы увидите конфигурации дизайна, предназначенные специально для флага. Изображение ниже демонстрирует некоторые из доступных вариантов настроек.
- Отображение названия языка: У вас есть возможность отображать название языка в зависимости от страны или самого языка. Например, вы можете выбрать отображение «German» или «Deutsch».
- Тип английского флага: Эта опция применима при работе с языками, имеющими несколько вариантов, например “English USA” или “English Britain.” Аналогичный выбор можно сделать для таких языков, как испанский, тайваньский, немецкий и португальский.
- Стиль флага: Эта настройка позволяет задать форму значка флага: круглую или квадратную (прямоугольную).
Шаг 6: Установите цвет и размер флага
После того как дизайн флага настроен, следующим шагом будет настройка цветов, размера и различных других элементов. В следующем интерфейсе вы найдете множество настраиваемых параметров, включая:
- Радиус границы флага: Это позволяет персонализировать радиус границы в пикселях при использовании прямоугольного флага.
- Цвет названия языка: Вы можете выбрать цвет текста по умолчанию для названия языка.
- Цвет языка во всплывающем окне: Эта настройка определяет цвет названия языка во всплывающих окнах или выпадающих списках.
- Размер флага: У вас есть возможность изменить размер флага в соответствии с вашими предпочтениями.
- Цвет названия языка при наведении: Эта настройка управляет цветом текста при наведении курсора мыши на названия языков.
- Цвет языка во всплывающем окне при наведении: Аналогично, этот параметр определяет цвет текста при наведении курсора мыши на название языка во всплывающем окне или выпадающем списке.
Шаг 7: Установите тень флага
На заключительном этапе у вас есть возможность настроить параметры тени для флага. Первоначальная настройка позволяет задать тень для каждого флага, отображаемого на вашем сайте, а последующая настройка относится к эффекту тени при наведении курсора на флаг языка.
Не забудьте нажать кнопку Сохранить , чтобы сохранить настройки персонализации, которые вы сделали для переключателя языков. Это гарантирует, что выбранные вами конфигурации эффектов тени будут применены и сохранены для дальнейшего использования.
После выполнения всех настроек вот пример отображения переключателя языков с использованием всплывающего окна, расположенного в правом верхнем углу, и с использованием инициалов. Это всего лишь пример, остальное вы можете настроить по своему усмотрению и в соответствии с потребностями сайта.
Помимо WordPress CMS, вы также можете использовать другие веб-платформы и следовать подробному руководству, например настройка переключателя для OpenCart, переключатель языка для Drupal, и настройка переключателя для PrestaShop.
Создайте свой селектор языка для бесшовного многоязычного опыта с Linguise!
Здесь вы получили представление о лучших практиках разработки переключателей языков и о том, как это сделать с помощью Linguise! Поверьте, создание переключателя языков может принести много преимуществ и обеспечить оптимизацию на основе вышеупомянутых пунктов.
При создании селектора языка обязательно следуйте советам и лучшим практикам, которые мы объяснили выше, начиная от использования иконок и выбора подходящих языков и заканчивая позиционированием.
Теперь зарегистрируйте Linguise аккаунт, добавьте свой сайт и настройте селектор языка, чтобы обеспечить лучший пользовательский опыт. Не забудьте воспользоваться бесплатным пробным периодом на 1 месяц, чтобы оценить Linguise превосходные возможности!
