Вибір мови є важливим елементом, якому слід приділяти пильну увагу при створенні багатомовного веб-сайту, оскільки перемикач мови - це те, що користувачі часто відвідують, коли хочуть змінити мову.
Ефективна кнопка перемикання мови може забезпечити кілька переваг для сайту, від підвищення оптимізації веб-сайту до збільшення продажів.
У цій статті ми обговоримо найкращі практики проектування мовних селекторів. Давайте обговоримо це далі в наступній статті.
Що таке селектор мови?
Селектор мови - це елемент інтерфейсу користувача або функція, яка дозволяє користувачам вибрати мову, якою вони хочуть взаємодіяти з веб-сайтом, додатком або будь-якою цифровою платформою. Він зазвичай зустрічається на веб-сайтах, програмних додатках та інших цифрових інтерфейсах, щоб задовольнити користувачів, які говорять різними мовами.
Вибір мови зазвичай відображає список доступних мов, і користувач може вибрати потрібну мову зі списку. Після вибору вміст інтерфейсу, включаючи текст, мітки та іноді зображення, відображатиметься вибраною мовою. Це особливо важливо для веб-сайтів та додатків, які обслуговують глобальну аудиторію або різноманітну базу користувачів.
Вибір мови сприяє покращенню користувацького досвіду, роблячи цифровий контент доступним для ширшої аудиторії, незалежно від рівня володіння мовою. Вони є ключовим компонентом зусиль з локалізації, дозволяючи розробникам і дизайнерам адаптувати свої продукти до різних мовних і культурних контекстів.
Чому потрібно налаштувати перемикач мови?
Налаштування перемикача мови на багатомовному веб-сайті має кілька важливих переваг.
- Відповідність бренду та візуальний стиль: Налаштовуючи перемикач мови, ви можете забезпечити відповідність вигляду та стилю використовуваної мови брендингу та візуальному стилю вашого веб-сайту. Ви можете налаштувати кнопки або меню перемикання мови відповідно до загального дизайну вашого веб-сайту, створюючи узгодженість у користувацькому досвіді.
- Більший контроль над відображуваними мовами: Іноді ви можете захотіти обмежити певні мови, що відображаються у перемикачі мови. Наприклад, у вас може бути обмежена версія вашого веб-сайту кількома мовами, і ви хочете відображати лише ці мови у перемикачі мови. Налаштувавши перемикач мови, ви можете вибрати, які мови відображатимуться, що дасть вам більше контролю над доступним контентом.
- Оптимізований досвід користувача: Налаштувавши перемикач мови, ви можете створити оптимізований досвід користувача. Наприклад, ви можете налаштувати розташування або позицію перемикача мови, щоб зробити його легко знайденим для користувачів. Ви також можете додати функції, такі як сповіщення або інструкції зі зміни мови, які допомагають користувачам зрозуміти, як використовувати цю функцію легко.
- Задоволення різних потреб користувачів: Кожен користувач має різні мовні уподобання. Налаштувавши перемикання мови, ви можете задовольнити потреби користувачів з різних мовних середовищ. Це може включати місцевих користувачів, міжнародних відвідувачів або користувачів, які більш комфортно почуваються іншою мовою.
- Збільшення конверсії продажів: належне налаштування перемикача мови також може забезпечити перевагу у збільшенні конверсії продажів. Оскільки ефективний перемикач мови може забезпечити комфорт користувача під час взаємодії з вашим веб-сайтом. За даними дослідження CSA, 72,4% споживачів заявили, що вони з більшою ймовірністю купують продукти, які містять інформацію їхньою рідною мовою. Тому неможливо, щоб рівень ваших продажів також не збільшився.
Різні типи селектора мови
Кожен власник веб-сайту обов'язково ретельно подумає, як виглядатиме його селектор мови, кожен веб-сайт, звичайно, матиме різні уподобання. Для тих із вас, хто шукає тип селектора мови, який можна використовувати, ось деякі з них.
Кнопка мови
Це один із поширених типів перемикача мови. Кнопка мови зазвичай є значком або текстом, що вказує на мову, яка відображається, наприклад, «UK» для української або прапор країни, що представляє певну мову. Коли користувачі натискають кнопку мови, вони будуть перенаправлені на версію веб-сайту відповідною мовою.
Для кнопок мови рекомендується відображати обмежену кількість мов, щоб уникнути захаращеного відображення. Зазвичай наявність більше ніж 4-5 мов може створити зайнятий візуальний ефект. Важливо розташувати кнопку в помітному місці, щоб користувачі могли легко її знайти. Ми обговоримо ці аспекти далі в наступному розділі цієї статті.
Кнопки мови можуть бути підходящими для бізнесу, який націлений на конкретні ринки або обслуговує міжнародні спільноти у певних місцях. Прикладом використання кнопки мови на веб-сайті ВООЗ є нижче.
Текстове посилання
Текстові посилання - це тип мовного перемикача, який використовує текст у формі назви мови як посилання. Наприклад, ви можете відображати текстові посилання на кшталт «Українська», «Français», або «Español», які переведуть користувачів на версію веб-сайту вибраною мовою. Це текстове посилання зазвичай розміщується у списку або випадаючому меню, щоб користувачам було легше вибрати потрібну мову.
Один із типів мовних селекторів посилань використовується великою компанією Facebook; крім перелічених мов, ви також можете натиснути значок (+), щоб знайти більше мов.
Після цього сторінка буде негайно перекладена на попередньо вибрану мову.
Меню вибору
Меню вибору є типом перемикача мови, який використовує спадне меню або відкрите меню для вибору мови. Коли користувачі натискають на меню опцій, вони побачать список доступних мов і зможуть вибрати потрібну мову. Меню опцій може містити значки країн або прапори як індикатори мови, а також назви мов у тексті.
Меню вибору суттєво відрізняється від кнопки мови, цей тип є складнішим, ніж просто кнопка. Як у прикладі нижче, який походить із веб-сайту Porsche.
Вони надають веб-сайт вибору мови, де користувачі можуть безпосередньо вказати свою мову або країну призначення.
Випадаючий список проти списку проти спливаючого вікна: що працює найкраще?
Вибір правильної моделі взаємодії для вашого селектора мови має вирішальне значення для забезпечення безшовного та інтуїтивно зрозумілого користувацького досвіду. Кожен метод — чи то спадне меню, внутрішній список або спливаюче вікно — пропонує різні переваги залежно від макета вашого веб-сайту, кількості підтримуваних мов та поведінки користувачів. Нижче наведено порівняння трьох основних моделей взаємодії для вибору мови, зосереджуючи увагу на UX, доступності та контексті реалізації.
Тип | Переваги | Обмеження | Найкращий варіант використання |
Випадаючий список | Компактний, чистий, масштабований, з багатьма мовами | Вимагає взаємодії (клацання/торкання), може бути не очевидним для всіх користувачів | Багатомовні сайти з обмеженим простором |
Текстовий список | Видимий без взаємодії, швидший доступ до ключових мов | Може засмічувати інтерфейс користувача, не масштабований для багатьох мов | Сайти з 2–4 основними мовними варіантами |
спливаюче вікно | Може містити поле пошуку, гнучкий дизайн інтерфейсу | Може порушити потік користувача, потребує чіткої кнопки закриття та доступності | Глобальні сайти з 10+ мовами |
Найкращі практики та поради щодо вибору мови
Розробка ефективного селектора мови передбачає забезпечення безшовного досвіду на всіх пристроях та гарантування доступності для користувачів різного походження. Зі зростанням глобальної аудиторії ваш перемикач мови має бути інтуїтивно зрозумілим, доступним та адаптивним, щоб забезпечити користувачам можливість взаємодіяти комфортно їхньою бажаною мовою.
Нижче наведено найкращі практики, які ви можете застосувати, щоб забезпечити, щоб ваш селектор мови був зрозумілим, зручним та доступним для всіх користувачів.
Приділіть пріоритет адаптивному дизайну
Більшість користувачів отримують доступ до веб-сайтів із мобільних пристроїв, тому ваш селектор мови має бути адаптивним і дружнім до мобільних пристроїв. Переконайтеся, що кнопка або меню легко натискаються, не закривають важливий контент і залишаються видимими на менших екранах.
Наприклад, веб-сайт селектора мови виглядає так.
Потім, при перегляді з мобільної сторони, селектор мови все ще можна легко отримати і він не рухається і не зникає.
Використовуйте випадаючі списки або розширювані меню, щоб зберегти акуратність макета та забезпечити достатній простір для комфортної взаємодії. Це допомагає користувачам легко вибрати потрібну мову без розчарувань через тісноту або елементи, які важко натискати.
Дбайливе розміщення в інтерфейсі
Розмістіть селектор мови у високо видимих, очікуваних областях, таких як верхній правий кут заголовка або нижній колонтитул. Це інтуїтивно зрозумілі місця, де користувачі зазвичай шукають варіанти мови.
Уникайте приховувати селектор всередині неоднозначних іконок або вторинних меню. Зберігайте його розташування послідовним на всіх сторінках, щоб користувачі, які часто змінюють мови, могли легко знайти його у будь-який час.
Використовуйте атрибути доступності (ARIA)
Щоб забезпечити доступність вашого селектора мови для користувачів з обмеженими можливостями, використовуйте атрибути ARIA (Доступні багаті інтернет-застосунки), такі як aria-label, aria-haspopup та aria-expanded. Вони допомагають допоміжним технологіям, таким як зчитувачі екрана, зрозуміти роль та функціональність елемента.
Впровадження доступності відповідає стандартам WCAG та забезпечує, щоб ваш сайт був інклюзивним та придатним для використання ширшою аудиторією. Інклюзивний дизайн приносить користь всім, а не лише користувачам з особливими потребами.
Використовуйте чіткі та розпізнавані мітки мови
Відображайте кожен варіант мови з використанням рідної назви, наприклад, “Español” замість “Іспанська” або “Deutsch” замість “Німецька”. Це дозволяє користувачам швидко розпізнавати бажану мову, навіть якщо вони не розуміють поточної мови сайту.
Нативні мітки є більш інклюзивними та зменшують когнітивне навантаження, особливо для міжнародних користувачів. Уникайте використання незрозумілих скорочень або кодів мов, якщо ваша аудиторія їх не знає.
Уникайте перевантаження занадто великою кількістю опцій
Відображення занадто великої кількості варіантів мови одночасно може засмітити інтерфейс та заплутати користувачів. Відображайте лише найбільш релевантні або часто використовувані мови спочатку, а решту розміщуйте у спадному меню або під розділом “Більше мов”.
Це зберігає інтерфейс чистим і покращує зручність використання, особливо на мобільних пристроях. Використовуйте аналітику трафіку веб-сайту, щоб вирішити, які мови слід пріоритизувати або приховати.
Використовуйте відповідні іконки та візуальні сигнали (без використання прапорів)
Візуальні сигнали на зразок значків глобуса (🌐), стрілок вниз (▾) або підсвічування активного стану допомагають користувачам зрозуміти, що елемент можна натиснути. Однак слід уникати використання національних прапорів для представлення мов, оскільки одна мова може бути розповсюджена у кількох країнах.
Прапори також можуть нести культурні або політичні наслідки. Якщо ви використовуєте візуальні елементи, поєднуйте їх із текстовими мітками для забезпечення ясності та зберігайте значки послідовними та культурно нейтральними у вашому дизайні.
Залишайтеся послідовними у дизайні та брендингу веб-сайту
Ваш селектор мови повинен візуально відповідати загальному стилю вашого веб-сайту. Незалежно від того, чи використовуєте ви кнопки, текстові посилання чи іконки, переконайтеся, що типографіка, кольори та стани наведення відповідають вашому брендингу. Це підвищує довіру та зміцнює користувацький досвід.
Якщо ви створюєте власний селектор, протестуйте його на різних браузерах та пристроях, щоб переконатися, що він працює належним чином. Послідовний дизайн та надійна функціональність сприяють безперебійному мультилінгвальному досвіду користувача.
Налаштування селектора мови за допомогою 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: Встановіть дизайн прапора
Після цього нижче основної секції відображення ви натрапите на конфігурації дизайну спеціально для прапора. Наведене нижче зображення демонструє деякі доступні параметри налаштування.
- Відображення назви мови: У вас є можливість відображати назву мови на основі країни або самої мови. Наприклад, ви можете вибрати відображення «німецька» або «Deutsch».
- Тип прапора англійської мови: Ця опція застосовується при роботі з мовами, які мають кілька варіацій, наприклад, «англійська США» або «англійська Британія». Схожі вибори можна зробити для таких мов, як іспанська, тайванська, німецька та португальська.
- Стиль прапора: Цей параметр дозволяє визначити форму значка прапора, чи повинен він бути круглим або квадратним (прямокутним).
Крок 6: Встановіть колір та розмір прапорця
Щойно буде налаштовано дизайн прапора, наступний крок передбачає коригування кольорів, розміру та інших різних елементів. У наступному інтерфейсі ви знайдете численні настроювані параметри, включаючи:
- Радіус рамки прапора: Це дозволяє вам налаштувати радіус рамки в пікселях при використанні прямокутного прапора.
- Колір назви мови: Ви можете вибрати колір тексту за замовчуванням для назви мови.
- Колір мови спливаючого вікна: Цей параметр визначає колір назви мови у спливаючому вікні або випадаючих областях.
- Розмір прапора: Ви маєте можливість змінити розмір прапора відповідно до ваших уподобань.
- Колір наведення на назву мови: Цей параметр керує кольором тексту при наведенні миші на назви мов.
- Колір наведення на мову у спливаючому вікні: Подібно, це налаштування визначає колір тексту при наведенні миші на назву мови у спливаючому вікні або випадаючому списку.
Крок 7: Встановіть тінь прапорця
На останньому етапі у вас є можливість налаштувати параметри тіні для прапора. Початкове налаштування дозволяє вказати тінь для кожного прапора, що відображається на вашому веб-сайті, тоді як наступне налаштування стосується ефекту тіні при наведенні на прапор мови.
Не забудьте натиснути кнопку Зберегти, щоб зберегти налаштування, які ви зробили для перемикача мов. Це забезпечить те, що ваші вибрані конфігурації для ефектів тіні будуть застосовані та збережені для майбутнього використання.
Після виконання всіх налаштувань, ось приклад відображення вибору мови за допомогою спливаючого вікна, розташованого у верхньому правому куті, з використанням ініціалів. Це лише приклад, ви можете налаштувати решту відповідно до потреб веб-сайту.
Окрім WordPress CMS, ви також можете використовувати інші платформи веб-сайтів і дотримуватися докладного посібника, такого як налаштування перемикача для OpenCart, перемикач мови для Drupal, і налаштування перемикача для PrestaShop.
Розробіть свій селектор мови для безперебійного багатомовного досвіду з Linguise!
Тут ви отримали уявлення про найкращі практики проектування селекторів мови та про те, як це зробити за допомогою Linguise! Повірте, створення перемикача мови може забезпечити багато переваг та оптимізацію на основі вищезазначених пунктів.
Під час створення селектора мови обов'язково дотримуйтесь порад та найкращих практик, які ми пояснили вище, починаючи від використання піктограм і вибору відповідних мов до позиціонування.
Тепер зареєструйте Linguise обліковий запис, додайте свій веб-сайт і налаштуйте перемикач мов, щоб забезпечити кращий користувацький досвід. Не забудьте спробувати 1-місячну безкоштовну пробну версію, щоб скористатися передовими функціями Linguise.
