Селектор мови є важливим елементом, якому слід приділяти пильну увагу при створенні багатожовного веб-сайту, оскільки перемикач мови - це те, що користувачі часто відвідують, коли хочуть змінити мову.
Ефективна кнопка перемикання мови може забезпечити кілька переваг для веб-сайту, від підвищення оптимізації веб-сторінок до збільшення продажів.
У цій статті ми обговоримо найкращі практики проектування вибору мови. Давайте обговоримо це далі в наступній статті.
Ключові моменти: Найкращі практики розробки селектора мови
Стратегічне розташування максимізує використання
Розміщення меню у заголовку/настільному меню та меню гамбургера/мобільному меню забезпечує доступність без порушення взаємодії з користувачем або швидкості завантаження сторінки.
Інтелектуальне автоматичне виявлення з можливістю перевизначення
Виявляти мову браузера, але завжди забезпечувати легке ручне змінення та запам'ятовувати налаштування користувача за допомогою файлів cookie.
SEO + доступність – обов’язкові вимоги
Впроваджуйте теги hreflang, мітки ARIA для програм зчитування з екрана, дизайн, зручний для сенсорного керування, та резервний варіант без JavaScript для пошукових роботів.
Що таке селектор мови?
Вибір мови - це елемент інтерфейсу користувача або функція, яка дозволяє користувачам вибрати мову, якою вони хочуть взаємодіяти з веб-сайтом, додатком або будь-якою цифровою платформою. Він зазвичай зустрічається на веб-сайтах, програмних додатках та інших цифрових інтерфейсах, щоб задовольнити користувачів, які говорять різними мовами.
Вибір мови зазвичай відображає список доступних мов, і користувач може вибрати мову на свій розсуд зі цього списку. Після вибору зміст інтерфейсу, включаючи текст, мітки, а іноді й зображення, буде відображатися вибраною мовою. Це особливо важливо для веб-сайтів та додатків, які обслуговують глобальну аудиторію або різноманітну базу користувачів.
Вибір мови сприяє кращому користувацькому досвіду, роблячи цифровий контент доступним для ширшої аудиторії, незалежно від рівня володіння мовою. Вони є ключовим компонентом зусиль з локалізації, дозволяючи розробникам і дизайнерам адаптувати свої продукти до різних лінгвістичних і культурних контекстів.
Чому потрібно налаштувати ваш перемикач мови?
Налаштування перемикача мови на багатомовному веб-сайті має кілька важливих переваг.
- Вирівнювання бренду та візуальний стиль: Налаштовуючи перемикач мови, ви можете забезпечити, щоб вигляд і стиль використовуваної мови відповідали брендингу та візуальному стилю вашого веб-сайту. Ви можете налаштувати кнопки або меню перемикання мови відповідно до загального дизайну вашого веб-сайту, створюючи узгодженість у користувацькому досвіді.
- Більший контроль над відображуваними мовами: Іноді ви можете обмежити певні мови, що відображаються у перемикачі мови. Наприклад, у вас може бути обмежена версія вашого веб-сайту кількома мовами, і ви хочете відображати лише ці мови у перемикачі мови. Налаштувавши перемикач мови, ви можете вибрати, які мови відображатимуться, що дасть вам більше контролю над доступним контентом.
- Оптимізований досвід користувача: Налаштувавши перемикач мови, ви можете створити оптимізований досвід користувача. Наприклад, ви можете налаштувати розташування або позицію перемикача мови, щоб зробити його легко знайденим для користувачів. Ви також можете додати функції, такі як сповіщення або інструкції зі зміни мови, які допоможуть користувачам зрозуміти, як використовувати цю функцію легко.
- Задовольнити різні потреби користувачів: Кожен користувач має різні мовні уподобання. Налаштувавши перемикання мови, ви зможете задовольнити потреби користувачів з різним мовним середовищем. Це можуть бути місцеві користувачі, міжнародні відвідувачі або користувачі, яким зручніше користуватися іншою мовою.
- Збільшення конверсії продажів: належне налаштування перемикача мови також може забезпечити перевагу у збільшенні конверсії продажів. Тому що ефективний перемикач мови може забезпечити комфорт користувача під час взаємодії з вашим веб-сайтом. За даними дослідження CSA, 72,4% споживачів заявили, що вони швидше купують продукти, які містять інформацію їх рідною мовою. Тому неможливо, щоб рівень ваших продажів також не збільшився.
Різні типи вибору мови
Кожен власник веб-сайту обов'язково ретельно подумає, як виглядатиме його селектор мови, кожен веб-сайт, звичайно, матиме різні уподобання. Для тих із вас, хто шукає тип селектора мови, який можна використовувати, ось деякі з них.
Кнопка мови
Це один із найбільш часто використовуваних типів перемикача мови. Кнопка мови зазвичай є значком або текстом, що вказує на мову, яка відображається, наприклад, «UK» для української або прапор країни для представлення певної мови. Коли користувачі натискають кнопку мови, вони будуть перенаправлені на версію веб-сайту відповідною мовою.
Для кнопок мови рекомендується відображати обмежену кількість мов, щоб уникнути захаращеного відображення. Зазвичай наявність більше ніж 4-5 мов може створити зайве візуальне навантаження. Важливо розташувати кнопку в помітному місці, щоб користувачі могли легко її знайти. Ми обговоримо ці аспекти докладніше в наступному розділі цієї статті.
Кнопки мови можуть бути підходящими для бізнесу, який орієнтується на конкретні ринки або обслуговує міжнародні спільноти в певних місцях. Приклад використання кнопки мови на веб-сайті ВООЗ наведено нижче.
Текстове посилання
Текстові посилання - це тип перемикача мови, який використовує текст у формі назви мови як посилання. Наприклад, ви можете відображати текстові посилання, такі як “Українська,” “Англійська,” або “Іспанська”, які переведуть користувачів на версію веб-сайту вибраною мовою. Це текстове посилання зазвичай розміщується у списку або випадаючому меню, щоб користувачам було легше вибрати потрібну мову.
Один із типів селектора мови посилань використовується великою компанією 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: Налаштування головного дисплея
Щоб налаштувати перемикач мови або відобразити прапори мов, кроки виконуються через панель управління в меню Налаштування > Відображення прапорів мов.
Під час початкового налаштування ми будемо вносити корективи до основного відображення, враховуючи різні компоненти.
Початковим моментом є конфігурація формату відображення списку мов, який пропонує три варіанти на вибір: поруч, спадне меню або спливаюче вікно. Зліва є попередній перегляд для кожного формату.
Перший формат, як показано нижче, являє собою розташування поруч.
Наступний формат використовує стиль випадаючого списку, як показано на зображенні нижче.
Нарешті, у нас є формат спливаючого вікна як остаточний варіант.
Далі ми переходимо до наступного кроку, який включає в себе налаштування позиції перемикача мови. У вас є гнучкість вибору з різних варіантів позиціонування, тому важливо вибрати позицію, яка легко помітна відвідувачам.
Нарешті, вам потрібно визначитися з комбінацією для відображення варіантів мови. Ви можете вибрати між такими варіантами, як прапор + назва мови, прапор + коротка назва або просто відображення прапора окремо. Це рішення залежатиме від ваших конкретних дизайнерських уподобань та вподобань вашої цільової аудиторії.
Крок 5: Встановіть дизайн прапора
Після цього нижче основної секції відображення ви знайдете конфігурації дизайну спеціально для прапора. Наведене нижче зображення демонструє деякі доступні параметри налаштування.
- Відображення назви мови: У вас є можливість відображати назву мови на основі країни або самої мови. Наприклад, ви можете вибрати відображення “Німецька” або “Deutsch.”
- Тип прапора англійської мови: Цей варіант застосовується при роботі з мовами, які мають кілька варіацій, наприклад “Англійська США” або “Англійська Британія.” Аналогічні вибори можна зробити для таких мов, як іспанська, тайванська, німецька та португальська.
- Стиль прапора: Цей параметр дозволяє визначити форму значка прапора, чи повинен він бути круглим або квадратним (прямокутним).
Крок 6: Встановіть колір і розмір прапора
Щойно дизайн прапора налаштовано, наступний крок передбачає коригування кольорів, розміру та різних інших елементів. У наступному інтерфейсі ви знайдете численні налаштування, зокрема:
- Радіус рамки прапора: Це дозволяє вам налаштувати радіус рамки в пікселях при використанні прямокутного прапора.
- Колір назви мови: Ви можете вибрати колір тексту за замовчуванням для назви мови.
- Колір мови у спливаючому вікні: Це налаштування визначає колір назви мови у спливаючому вікні або випадаючому списку.
- Розмір прапора: У вас є можливість змінити розмір прапора відповідно до ваших уподобань.
- Колір наведення на назву мови: Цей параметр керує кольором тексту при наведенні миші на назви мов.
- Колір наведення на мову у спливаючому вікні: Подібним чином, цей параметр визначає колір тексту при наведенні миші на назву мови у спливаючому вікні або випадаючому списку.
Крок 7: Встановіть тінь прапора
На останньому етапі у вас є можливість налаштувати параметри тіні для прапора. Початкове налаштування дозволяє вказати тінь для кожного прапора, відображеного на вашому веб-сайті, тоді як наступне налаштування стосується ефекту тіні при наведенні на прапор мови.
Не забудьте натиснути кнопку Зберегти, щоб зберегти налаштування, які ви зробили для перемикача мови. Це забезпечить те, що ваші вибрані конфігурації для ефектів тіні будуть застосовані та збережені для майбутнього використання.
Після того, як усі конфігурації були виконані, ось приклад відображення селектора мови з використанням спливаючого вікна, розташованого у верхньому правому куті та з використанням ініціалів. Це лише приклад, ви можете налаштувати решту відповідно до ваших побажань та потреб веб-сайту.
Окрім WordPress CMS, ви також можете використовувати інші платформи веб-сайтів і дотримуватися докладного керівництва, такого як налаштування перемикача для OpenCart, перемикач мови для Drupal, і налаштування перемикача для PrestaShop.
Створіть свій вибір мови для безперебійної багатомовної взаємодії з Linguise!
Тут ви отримали інформацію про найкращі практики створення вибору мови та те, як це зробити за допомогою Linguise! Повірте мені, створення перемикача мови може забезпечити багато переваг і гарантувати оптимізацію на основі вищезазначених пунктів.
Створюючи селектор мови, переконайтеся, що дотримуєтеся порад і найкращих практик, які ми пояснили вище, починаючи з використання піктограм, вибору відповідних мов і закінчуючи позиціонуванням.
Тепер зареєструйте обліковий запис Linguise, додайте свій веб-сайт і точно налаштуйте вибір мови, щоб забезпечити кращий користувацький досвід. Не забудьте спробувати 1-місячну безкоштовну пробну версію, щоб скористатися вищими функціями Linguise.
