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