Селектор мови — важливий елемент, на який слід звернути особливу увагу під час створення багатомовного веб-сайту, оскільки перемикач мов — це те, до чого користувачі часто звертаються, коли хочуть змінити мову.
Ефективна кнопка перемикання мови може надати веб-сайту кілька переваг, від збільшення веб-оптимізації до збільшення продажів.
У цій статті ми обговоримо найкращі методи розробки селекторів мови. Давайте обговоримо це далі в наступній статті.
Що таке селектор мови?
Селектор мови — це елемент або функція інтерфейсу користувача, яка дозволяє користувачам вибирати мову, якою вони бажають взаємодіяти з веб-сайтом, програмою або будь-якою цифровою платформою. Його зазвичай можна знайти на веб-сайтах, програмних застосунках та інших цифрових інтерфейсах, які підходять користувачам, які розмовляють різними мовами.
Засіб вибору мови зазвичай відображає список доступних мов, і користувач може вибрати мову за своїм вибором із цього списку. Після вибору вміст інтерфейсу, включаючи текст, мітки та іноді зображення, відображатиметься вибраною мовою. Це особливо важливо для веб-сайтів і програм, які обслуговують глобальну аудиторію або різноманітну базу користувачів.
Селектори мови сприяють покращенню взаємодії з користувачем, роблячи цифровий вміст доступним для ширшої аудиторії, незалежно від рівня її володіння мовою. Вони є ключовим компонентом локальних зусиль, що дозволяє розробникам і дизайнерам адаптувати свої продукти до різних мовних і культурних контекстів.
Навіщо потрібно налаштовувати перемикач мов?
Налаштування перемикача мов на багатомовному веб-сайті має кілька важливих переваг.
- Вирівнювання бренду та візуальний стиль: налаштувавши перемикач мов, ви можете переконатися, що вигляд і стиль використовуваної мови узгоджуються з брендингом і візуальним стилем вашого веб-сайту. Ви можете налаштувати кнопки перемикання мов або меню відповідно до загального дизайну вашого веб-сайту, створюючи узгодженість взаємодії з користувачем.
- Кращий контроль над мовами, що відображаються: іноді ви можете обмежити відображення певних мов у перемикачі мов. Наприклад, у вас може бути обмежена версія вашого веб-сайту кількома мовами, і ви хочете відображати лише ці мови в перемикачі мов. Налаштувавши перемикач мов, ви можете вибрати, які мови відображатимуться, що дасть вам більше контролю над доступним вмістом.
- Оптимізована взаємодія з користувачем: налаштувавши перемикач мов, ви можете створити оптимізовану взаємодію з користувачем. Наприклад, ви можете налаштувати макет або положення перемикача мов, щоб полегшити його пошук користувачам. Ви також можете додати такі функції, як сповіщення або інструкції щодо перемикання мови, які допоможуть користувачам зрозуміти, як легко користуватися цією функцією.
- Задоволення різних потреб користувачів: кожен користувач має різні мовні переваги. Налаштувавши перемикання мов, ви можете задовольнити потреби користувачів з різним мовним походженням. Це можуть бути місцеві користувачі, відвідувачі з інших країн або користувачі, які зручніше спілкуються іншою мовою.
- Збільшення конверсії продажів: правильне налаштування перемикача мов також може забезпечити перевагу збільшення конверсії продажів. Тому що ефективний перемикач мов може забезпечити комфорт користувача під час взаємодії з вашим веб-сайтом. Згідно з даними CSA Research, 72,4% споживачів сказали, що вони з більшою ймовірністю купуватимуть продукти, які містять інформацію їхньою мовою. Тому неможливо, щоб ваш рівень продажів теж зріс.
Різні типи вибору мови
Кожен власник веб-сайту, безсумнівно, ретельно обміркує, як виглядає його селектор мови, кожен веб-сайт, звичайно, матиме різні переваги. Для тих із вас, хто шукає тип вибору мови, який можна використовувати, ось деякі з них.
Кнопка мови
Це один із поширених типів перемикання мов. Кнопка мови зазвичай є піктограмою або текстом, що вказує мову, яка відображається, наприклад, «EN» для англійської або прапор країни для представлення певної мови. Коли користувачі натискають кнопку мови, вони будуть перенаправлені на версію веб-сайту відповідною мовою.
Для мовних кнопок рекомендується відображати обмежену кількість мов, щоб уникнути захаращеного дисплея. Як правило, наявність більше ніж 4-5 мов може створити візуальний ефект зайнятості. Важливо розташувати кнопку на видному місці, щоб користувачі могли її легко знайти. Ми обговоримо ці аспекти далі в наступному розділі цієї статті.
Мовні кнопки можуть бути придатними для компаній, які націлені на певні ринки або обслуговують міжнародні спільноти в певних місцях. Нижче наведено приклад використання мовної кнопки на веб-сайті ВООЗ.
Текстове посилання
Текстові посилання – це тип перемикача мов, який використовує текст у формі назви мови як посилання. Наприклад, ви можете відображати текстові посилання, такі як «English», «Français» або «Español», які спрямовують користувачів на версію веб-сайту вибраною мовою. Це текстове посилання зазвичай розміщується в списку або спадному меню, щоб полегшити користувачам вибір потрібної мови.
Один із типів вибору мови посилань використовується великою компанією Facebook, окрім перерахованих мов, ви також можете натиснути значок (+), щоб знайти інші мови.
Після цього сторінка буде негайно перекладена на попередньо вибрану мову.
Меню вибору
Меню вибору – це тип перемикача мов, який використовує спадне або відкрите меню для вибору мови. Коли користувачі натискають на меню параметрів, вони побачать список доступних мов і зможуть вибрати потрібну мову. Меню параметрів може містити піктограми або прапорці країни як індикатори мови, а також назви мов у тексті.
Меню вибору суттєво відрізняється від кнопки мови, цей тип є складнішим, ніж просто кнопка. Наприклад, наведений нижче приклад із веб-сайту Porsche.
Вони надають веб-сайт вибору мови, де користувачі можуть безпосередньо вказати свою мову або країну призначення.
Список проти списку проти спливаючого вікна: який найкраще працює?
Вибір правильної моделі взаємодії для вашого вибору мови має вирішальне значення для забезпечення безперебійного та інтуїтивного досвіду користувачів. Кожен метод-випадки, вбудований список чи спливаючі вікна, пропонує різні переваги залежно від макета вашого веб-сайту, кількості підтримуваних мов та поведінки користувачів. Нижче наведено порівняння трьох основних моделей взаємодії для вибору мови, зосередження уваги на UX, доступності та контексті впровадження.
Тип | Бригади | Обмеження | Корпус найкращого використання |
спадний список | Компактний, чистий, масштабований, з багатьма мовами | Вимагає взаємодії (натисніть/натисніть), може бути не очевидним для всіх користувачів | Багатомовні веб-сайти з космічними обмеженнями |
Текстовий список | Видно без взаємодії, швидший доступ до ключових мов | Може захаращувати інтерфейс, не масштабований для багатьох мов | Сайти з 2–4 варіанти основної мови |
Спливаюче вікно | Може включати поле пошуку, гнучкий дизайн інтерфейсу | Може порушити потік користувача, потребує чіткої кнопки закриття та доступності | Глобальні сайти з 10+ мовами |
Рекомендації та поради щодо вибору мови
Розробка ефективного вибору мови передбачає забезпечення безперебійного досвіду на всіх пристроях та забезпечення доступності для користувачів різного походження. Завдяки все більш глобальній аудиторії ваш комутатор мови повинен бути інтуїтивно зрозумілим, доступним та реагуванням, щоб користувачі могли комфортно взаємодіяти своєю бажаною мовою.
Нижче наведено найкращі практики, які ви можете застосувати, щоб переконатися, що ваш вибір мови є зрозумілим, зручним та доступним для всіх користувачів.
Пріоритетний дизайн
Більшість користувачів отримують доступ до веб-сайтів з мобільних пристроїв, тому ваш вибір мови повинен бути чуйним та зручним для мобільних пристроїв. Переконайтесь, що кнопка або меню легко торкнеться, не охоплює важливий вміст і залишається видимим на менших екранах.
Наприклад, веб -сайт Selector Language виглядає так.
Потім, дивлячись з мобільної сторони, на вибір мови все ще можна легко отримати доступ і не рухається і не зникає.
Використовуйте випадання або розширювані меню, щоб зберегти макет охайним, і переконайтеся, що сенсорні цілі мають достатньо відстані для комфортної взаємодії. Це допомагає користувачам легко вибирати свою бажану мову без розчарування, спричинених тісними або важкоочистовими елементами.
Продумане розміщення в інтерфейсі
Помістіть мовний селектор у дуже помітні, очікувані області, такі як верхній правий кут заголовка або нижній нижній колонтитул. Це інтуїтивні місця, де користувачі, як правило, шукають мовні варіанти.
Уникайте приховування селектора всередині неоднозначних ікон або вторинних меню. Зберігайте його розміщення послідовно на всіх сторінках, щоб користувачі, які часто перемикають мови, могли легко знайти його в будь -який час.
Використовуйте атрибути доступності (ARIA)
Щоб переконатися, що ваш селектор мови доступний для користувачів з обмеженими можливостями, використовуйте атрибути ARIA (доступні багаті Інтернет-додатки), такі як Aria-Label, Aria-Haspopup та Aria Expand. Ці допоміжні технології, такі як читачі екрана, розуміють роль та функціональність елемента.
Впровадження доступності відповідає стандартам WCAG та гарантує, що ваш сайт буде всеосяжним та корисним для широкої аудиторії. Інклюзивний дизайн приносить користь усім, а не лише користувачам з конкретними потребами.
Використовуйте чіткі та впізнавані мовні етикетки
Відображайте кожну мову, використовуючи рідну етикетку, наприклад, "Español" замість "іспанської" або "deutsch" замість "німецької". Це дозволяє користувачам швидко розпізнавати свою бажану мову, навіть якщо вони не розуміють поточної мови сайту.
Рідні етикетки є більш інклюзивними та зменшують когнітивне навантаження, особливо для міжнародних користувачів. Уникайте використання незрозумілих скорочень або мовних кодів, якщо ваша аудиторія їх не знає.
Уникайте перевантаження занадто великою кількістю варіантів
Показування занадто багато варіантів мови одночасно може захаращувати інтерфейс та заплутати користувачів. Спочатку відображайте лише найбільш релевантні або загально використовувані мови, а решту поставте в спадне меню або в розділі "Більше мов".
Це підтримує чистий інтерфейс та покращує зручність використання, особливо на мобільному. Використовуйте аналітику трафіку веб -сайту, щоб вирішити, які мови повинні бути пріоритетні або приховані.
Використовуйте відповідні піктограми та візуальні підказки (не покладаючись на прапори)
Візуальні підказки, такі як значки Globe (🌐), стрілки вниз (▾) або активний стан, що виділяють, допомагають користувачам зрозуміти, що елемент можна натиснути. Однак уникайте використання національних прапорів для представлення мов, оскільки одна мова може говорити в багатьох країнах.
Прапори можуть також мати культурні чи політичні наслідки. Якщо ви використовуєте візуальні зображення, з’єднайте їх з текстовими мітками, щоб забезпечити ясність, а піктограми послідовними та культурно нейтральними для вашого дизайну.
Будьте узгоджені з дизайном та брендингом веб -сайтів
Ваш вибір мови повинен візуально узгоджуватись із загальним стилем вашого веб -сайту. Незалежно від використання кнопок, текстових посилань або піктограм, переконайтеся, що типографія, кольори та стани наведення у вас відповідають вашому брендингу. Це покращує довіру та зміцнює досвід користувачів.
Якщо ви будуєте власний селектор, протестуйте його в різних браузерах та пристроях, щоб переконатися, що він працює за призначенням. Послідовна конструкція та надійна функціональність сприяють безперебійній багатомовній подорожі користувача.
Налаштування вибору мови за допомогою 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».
- Тип англійського прапора: цей параметр застосовний, коли мова йде про мови, які мають кілька варіантів, наприклад «English USA» або «English Britain». Подібний вибір можна зробити для таких мов, як іспанська, тайванська, німецька та португальська.
- Стиль прапорця: цей параметр дає змогу визначити форму піктограми прапорця, круглою чи квадратною (прямокутною).
Крок 6: Встановіть колір і розмір прапора
Після того як дизайн прапора налаштовано, наступним кроком є налаштування кольорів, розміру та інших елементів. У наступному інтерфейсі ви знайдете численні параметри, які можна налаштувати, зокрема:
- Прапорець border-radius: це дозволяє вам персоналізувати радіус межі в пікселях під час використання прямокутного прапорця.
- Колір назви мови: Ви можете вибрати колір тексту за замовчуванням для назви мови.
- Колір мови спливаючого вікна: цей параметр визначає колір назви мови у спливаючому вікні чи спадному меню.
- Розмір прапора: у вас є можливість змінити розмір прапора відповідно до ваших уподобань.
- Колір назви мови при наведенні курсору: це налаштування контролює колір тексту під час наведення курсора миші на назви мов.
- Колір мови спливаючого вікна при наведенні курсора: так само цей параметр визначає колір тексту під час наведення курсора миші на назву мови у спливаючому вікні чи спадному списку.
Крок 7: Встановіть прапорець box-shadow
На завершальному етапі у вас є можливість налаштувати параметри тіні для прапора. Початкове налаштування дозволяє вказати тінь для кожного прапора, що відображається на вашому веб-сайті, тоді як наступне налаштування стосується ефекту тіні під час наведення курсора на прапор мови.
Не забудьте натиснути «Зберегти» , щоб зберегти налаштування, які ви зробили для перемикача мов. Це гарантує, що вибрані конфігурації ефектів тіні реалізовано та збережено для майбутнього використання.
Після виконання всіх налаштувань ось приклад відображення вибору мови за допомогою спливаючого вікна, розташованого у верхньому правому куті, з використанням ініціалів. Це лише приклад, решту ви можете налаштувати на свій розсуд і відповідно до потреб веб-сайту.
Окрім WordPress CMS, ви також можете використовувати інші платформи веб-сайтів і слідувати докладним посібникам, таким як перемикач налаштувань для OpenCart , перемикач мов для Drupal і перемикач налаштувань для PrestaShop .
Створіть свій селектор мови для бездоганного багатомовного досвіду з Linguise!
Тут ви дізналися про найкращі методи розробки селекторів мови та про те, як це зробити за допомогою Linguise! Повірте, створення перемикача мов може надати багато переваг і забезпечити оптимізацію на основі згаданих вище моментів.
Створюючи засіб вибору мови, обов’язково дотримуйтесь порад і найкращих практик, які ми пояснили вище, починаючи від використання значків і вибору відповідних мов до позиціонування.
Тепер зареєструйте обліковий запис Linguise , додайте свій веб-сайт і налаштуйте селектор мови, щоб забезпечити кращу взаємодію з користувачем. Не забудьте спробувати 1-місячну безкоштовну пробну версію, щоб насолодитися чудовими функціями Linguise Linguise
