Перемикач мов — це важливий елемент, на який слід звернути особливу увагу під час створення багатомовного вебсайту , оскільки саме до перемикача мов користувачі часто звертаються, коли хочуть змінити мову.
Ефективна кнопка перемикання мови може принести вебсайту кілька переваг — від покращення вебоптимізації до збільшення продажів.
У цій статті ми обговоримо найкращі практики дизайну перемикачів мов. Розгляньмо це детальніше в наступній статті.
Ключові моменти: найкращі практики проєктування вибору мови
Стратегічне розташування максимізує використання
Розміщення в заголовку/на робочому столі та в меню-гамбургері/на мобільному пристрої забезпечує доступність, не порушуючи досвід користувача чи швидкість сторінки.
Інтелектуальне автоматичне виявлення з можливістю перевизначення
Визначайте мову браузера, але завжди надавайте можливість легко змінити її вручну та запам’ятовуйте вподобання користувача за допомогою файлів 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 як приклад використаної 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: Налаштуйте тінь прапорця
На завершальному етапі ви маєте можливість налаштувати параметри тіні для прапора. Початкове налаштування дозволяє вказати тінь для кожного прапора, що відображається на вашому веб-сайті, а наступне налаштування стосується ефекту тіні при наведенні курсора на прапор мови.
Не забудьте натиснути Зберегти , щоб зберегти налаштування персоналізації, які ви зробили для перемикача мов. Це гарантує, що вибрані вами конфігурації ефектів тіні буде застосовано та збережено для подальшого використання.
Після виконання всіх налаштувань ось приклад відображення вибору мови за допомогою спливного вікна, розташованого у верхньому правому куті, з використанням ініціалів. Це лише приклад, решту ви можете налаштувати на свій розсуд і відповідно до потреб сайту.
Окрім WordPress CMS, ви також можете використовувати інші веб-платформи та скористатися детальними інструкціями, як-от налаштування перемикача для OpenCart, перемикач мов для Drupal, та налаштування перемикача для PrestaShop.
Створіть свій селектор мов для бездоганного багатомовного досвіду з Linguise!
Тут ви отримали уявлення про найкращі практики розробки перемикачів мов і про те, як це зробити за допомогою Linguise! Повірте, створення перемикача мов може дати багато переваг і забезпечити оптимізацію на основі наведених вище пунктів.
Створюючи селектор мови, обов'язково дотримуйтесь порад і найкращих практик, які ми пояснили вище, починаючи від використання іконок і вибору відповідних мов до розташування.
Тепер зареєструйте Linguise акаунт, додайте свій вебсайт і налаштуйте перемикач мов, щоб забезпечити кращий досвід користувача. Не забудьте скористатися 1-місячною безкоштовною пробною версією, щоб насолодитися Linguise — його чудовими функціями!
