Селектор языка — это важный элемент, которому следует уделить пристальное внимание при создании многоязычного сайта , поскольку переключатель языка — это то, к чему пользователи часто обращаются, когда хотят сменить язык.
Эффективная кнопка переключения языка может принести сайту ряд преимуществ — от повышения веб-оптимизации до роста продаж.
В этой статье мы обсудим лучшие практики дизайна селекторов языка. Давайте рассмотрим это подробнее в следующей статье.
Ключевые моменты: лучшие практики дизайна селектора языка
Стратегическое размещение обеспечивает максимальное использование ресурсов
Размещение в шапке/десктопном меню и в гамбургер-меню/мобильном меню обеспечивает доступность, не нарушая пользовательский опыт и скорость загрузки страницы.
Интеллектуальное автоматическое обнаружение с возможностью переопределения
Определяйте язык браузера, но всегда предоставляйте возможность простого ручного переключения и запоминайте предпочтения пользователя с помощью файлов 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 (доступные расширенные интернет-приложения), такие как 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: Настройте дизайн флага
После этого ниже основного раздела отображения вы найдете настройки дизайна специально для флага. На изображении ниже показаны некоторые из доступных вариантов настроек.
- Отображение названия языка: Вы можете отображать название языка либо по стране, либо по самому языку. Например, вы можете выбрать отображение «German» или «Deutsch».
- Тип английского флага: Эта опция применима для языков, имеющих несколько вариантов, например «английский США» или «английский Британия». Аналогичный выбор можно сделать для таких языков, как испанский, тайваньский, немецкий и португальский.
- Стиль флага: Эта настройка позволяет задать форму значка флага — круглую или квадратную (прямоугольную).
Шаг 6: Настройте цвет и размер флага
После того как дизайн флага настроен, следующий шаг включает настройку цветов, размера и различных других элементов. В следующем интерфейсе вы найдете множество настраиваемых параметров, включая:
- Радиус скругления флага: Это позволяет настроить радиус скругления в пикселях при использовании прямоугольного флага.
- Цвет названия языка: Вы можете выбрать цвет текста по умолчанию для названия языка.
- Цвет языка во всплывающем окне: Этот параметр определяет цвет названия языка во всплывающих окнах или выпадающих списках.
- Размер флага: Вы можете изменить размер флага по своему усмотрению.
- Цвет названия языка при наведении: Эта настройка определяет цвет текста при наведении курсора мыши на названия языков.
- Цвет заголовка языка при наведении: Аналогично, этот параметр определяет цвет текста при наведении курсора мыши на название языка во всплывающем окне или выпадающем списке.
Шаг 7: Установите флаг box-shadow
На заключительном этапе у вас есть возможность настроить параметры тени для флага. Первоначальная настройка позволяет задать тень для каждого флага, отображаемого на вашем сайте, а последующая настройка относится к эффекту тени при наведении курсора на языковой флаг.
Не забудьте нажать кнопку Сохранить , чтобы сохранить настройки персонализации, которые вы сделали для переключателя языков. Это гарантирует, что выбранные вами конфигурации для эффектов тени будут применены и сохранены для дальнейшего использования.
После выполнения всех настроек вот пример отображения переключателя языков с использованием всплывающего окна, расположенного в правом верхнем углу и использующего инициалы. Это всего лишь пример, остальное вы можете настроить по своему усмотрению и в соответствии с потребностями сайта.
Помимо WordPress CMS, вы также можете использовать другие веб-платформы и следовать подробным руководствам, таким как настройка переключателя для OpenCart, переключатель языка для Drupal, и настройка переключателя для PrestaShop.
Создайте свой языковой селектор для бесшовного многоязычного опыта с Linguise!
Здесь вы узнали о лучших практиках разработки переключателей языков и о том, как это сделать с помощью Linguise! Поверьте, создание переключателя языков может принести много преимуществ и обеспечить оптимизацию на основе вышеперечисленных пунктов.
При создании селектора языка обязательно следуйте советам и лучшим практикам, которые мы описали выше, начиная от использования иконок и выбора подходящих языков и заканчивая позиционированием.
Теперь зарегистрируйте Linguise аккаунт, добавьте свой сайт и настройте переключатель языков, чтобы обеспечить лучший пользовательский опыт. Не забудьте воспользоваться бесплатным пробным периодом на 1 месяц, чтобы оценить превосходные возможности Linguise!
