Чи знали ви, що 3 з 4 онлайн-покупців віддають перевагу купівлі товарів з інформацією їхньою рідною мовою? (Джерело). Багатомовний вебсайт має свої переваги, зокрема:
- Пропонуйте персоналізований досвід користувача.
- Підвищуйте продажі завдяки локалізованій інформації.
- Досягайте ширшої аудиторії без географічних обмежень.
- Покращуйте імідж бренду, показуючи себе як глобальну компанію.
- Спостерігайте зростання конверсій та зниження показників відмов.
Багато компаній не знають, як правильно створювати багатомовні веб-сайти!
Тому тут є 18 практичних порад щодо UX, які ми рекомендуємо вам мати на увазі при створенні вашого багатомовного веб-сайту.
18 порад щодо UX для багатомовного веб-сайту
Під час розробки багатомовного вебсайту важливо враховувати різні фактори, щоб забезпечити безперебійний досвід користувачів різними мовами та культурами. Ось 18 найкращих порад щодо UX для багатомовних вебсайтів.
Планування та структура
Перш ніж розпочати проектування вашого багатоязычного веб-сайту, вам потрібно спланувати та визначити декілька речей.
1. Визначте цільові мови
Щоб вибрати найкращі мови для вашого багатоязычного веб-сайту, почніть з аналізу розташування та демографії вашої аудиторії. Подивіться на поточний трафік вашого веб-сайту та дані про клієнтів, щоб побачити, які мови та розташування є найбільш поширеними.
Досліджуйте мови, якими говорять на ваших цільових ринках, використовуючи дані перепису, ринкові звіти та аналіз конкурентів.
Наприклад, згідно з даними Бюро перепису населення США, іспанська є другою за поширеністю мовою в Сполучених Штатах. Тож якщо ваша цільова аудиторія — американські клієнти, цілком логічно мати іспанську версію вашого сайту поряд з англійською.
Почніть з найбільш поширених мов та розширюйте, коли ваш веб-сайт зростає. Аналізуючи дані вашої аудиторії та узгоджуючи вибір мови з вашими бізнес-цілями, ви можете вибрати найбільш релевантні мови для вашого багатоязычного веб-сайту.
Подолайте мовні бар'єри
Попросіть бути мовним бар'єрам і привітайте безмежне зростання! Спробуйте наш сервіс автоматичного перекладу вже сьогодні.
2. Використовуйте чітку структуру URL-адрес
Чітка структура URL-адреси є важливою для багатомовного веб-сайту. Вона покращує SEO, оскільки пошукові системи можуть легко індексувати та ранжувати різні мовні версії вашого сайту, підвищуючи видимість у локальних пошуках.
Структура підкаталогу є найпоширенішим і рекомендованим методом. Кожна мова отримує свій власний підкаталог під основним доменом, наприклад www.example.com/uk/ для української, www.example.com/es/ для іспанської та www.example.com/fr/ для французької.
Виберіть структуру, яку ви можете послідовно підтримувати на своєму веб-сайті. Уникайте змішування різних структур. Використовуйте коди мов ISO 639-1 (наприклад, “uk” для української та “es” для іспанської), щоб забезпечити ясність і стандартизацію.
Використовуйте канонічні теги, щоб вказати бажану версію сторінки для пошукових систем, особливо якщо у вас є подібний контент різними мовами. Реалізуйте теги hreflang у вашому HTML-коді, щоб допомогти пошуковим системам зрозуміти мову та регіональну спрямованість ваших сторінок.
3. Використовуйте глобальні шаблони
Коли відвідувач веб-сайту вибирає іншу мову, він не повинен потрапляти на зовсім інший веб-сайт. Використовуйте той самий шаблон веб-сайту для всіх ваших перекладених веб-сторінок.
Ось приклад Canva. Коли веб-сайт перекладається з англійської на іспанську, простір між заголовками та абзацами, розташування кнопок, меню та іконки, формат плану ціноутворення та все інше залишаються незмінними.
Глобальний шаблон допомагає підтримувати послідовний брендинг і забезпечує безперебійний користувацький досвід, незалежно від мови, на яку вони переключаються. Переконайтеся, що ваші користувачі бачать той самий макет, елементи дизайну, брендинг і кольори при переключенні зі стандартної мови.
Якщо ви використовуєте систему керування вмістом (CMS), таку як WordPress, разом із Linguise, створення брендованого багатомовного вебсайту — це простіше простого. Linguise глибоко інтегрується з темою вашого вебсайту та автоматично перекладає ваш вміст без додаткових запитів до бази даних або надмірного навантаження на сервер. Таким чином, продуктивність вашого вебсайту не страждає.
Якщо ви використовуєте плагін для електронної комерції , такий як WooCommerce, Linguise автоматично оновлює головну сторінку та перекладені сторінки з кожним оновленням продукту.
4. Враховуйте проміжки для розширення тексту
Одне з найважливіших порад щодо UX при створенні багатомовного веб-сайту - враховувати розширення тексту. Кожна мова має різні стилі письма та довжину слів, які потрібно брати до уваги.
Подивіться на цей приклад Etsy. Зліва ви можете побачити зміст веб-сайту японською мовою, а справа - той самий зміст німецькою мовою.
Деякі мови займатимуть більше місця, тоді як інші - менше. Ваша розкладка веб-сайту повинна бути здатною адаптувати інтервали, щоб забезпечити читаність перекладеного змісту.
Ось демонстрація того, як текст розширюється або скорочується різними мовами. Згідно з W3C, слово «view» має 300% розширення з англійської на італійську!
Також враховуйте висоту рядка та стиль символів. Деякі мови мають вищі символи, ніж інші, тоді як деякі шрифти потребують більше простору, ніж інші.
Наприклад, арабський шрифт потребує більше вертикального простору між рядками, ніж латинський.
5. Тримайте контент окремо від дизайну
Тримайте текст окремо від мультимедійних елементів для легшого оновлення та перекладу.
Тримайте текстовий вміст у HTML-елементах як-от
Це дозволяє легко оновлювати та перекладати без зміни основної кодової бази. Використовуйте бібліотеки локалізації, такі як i18next для JavaScript, щоб керувати перекладами динамічно.
Тримайте дизайн і зміст окремо, і макет менш ймовірно буде зіпсовано після перекладу.
6. Надайте опції перемикання мови
Надання чітких і доступних опцій перемикання мови є важливим для багатомовного веб-сайту. Розмістіть перемикач у верхньому правому куті для легкого доступу та використовуйте контрастні кольори й чітку типографіку, щоб він виділявся. Для ясності вкажіть назву мови рідною мовою (наприклад, “Español” для іспанської).
Випадаюче меню може ефективно відображати кілька варіантів мови, не займаючи багато місця. Використання прапорів може надати візуальну підказку, але будьте обережні, оскільки прапори іноді можуть бути оманливими.
Наприклад, прапор може представляти мову, якою розмовляють у кількох країнах. Часто краще поєднувати прапори з назвами мов для ясності.
Чітко показуйте вибрану мову за допомогою іншого кольору або жирного шрифту. Використовуючи такі технології, як AJAX, переконайтеся, що вибір мови негайно змінює вміст без перезавантаження сторінки. Зробіть перемикач мови адаптивним для мобільних пристроїв і протестуйте його зручність із носіями мови.
Вміст і переклад
Ось кілька порад щодо контенту та перекладу для кращого досвіду користувачів.
7. Уникайте ідіом і сленгу
Не весь сленг є загальноприйнятим. Насправді, деякий сленг вважається прийнятним у деяких країнах і дуже образливим в інших. Ви повинні завжди використовувати чітку і просту мову, яка добре перекладається між культурами.
Наприклад, ось популярний російський ідіом – Хоть кол на голове теши. Цей ідіом російською означає «Він дуже вперта людина».
Однак дослівний переклад цього ідіому звучить так: “Можна загострити сокиру на цій голові.” 😂
Ось ще один приклад того, як звичайне англійське слово може бути катастрофічним при автоматичному перекладі з поміркованістю. Англійське слово Salsa звучить як 설사 (seolsa) в корейській мові, що означає «діарея».
Саме тому ми рекомендуємо уникати сленгу або ідіом, які стосуються лише певної культури чи демографічної групи. Натомість використовуйте просту мову, яку можна легко перекласти іншими мовами.
8. Використовуйте культурно доречні зображення та іконки
Адаптація контенту, зображень, іконок та іншого мультимедійного контенту для відображення місцевих звичаїв та культурних посилань.
Наприклад, Clarins, бренд догляду за шкірою, який обслуговує глобальну аудиторію, показує жінок європеоїдної раси у своїх європейських версіях веб-сайту.
Однак на японській версії свого веб-сайту вони показують японських жінок, щоб краще налагодити зв’язок з місцевими клієнтами.
Для іконок, особливо для іконки перемикача мови, використовуйте іконку глобуса, яка виглядає універсально. Наприклад, на зображенні нижче перша іконка може зацікавити південноамериканську та північноамериканську аудиторію, але не африканську та азійську.
Друга іконка може зацікавити африканську аудиторію, але не інших.
Щоб уникнути цієї плутанини, використовуйте універсальну іконку глобуса, яка зрозуміла всім – третю. Вона не виділяє конкретний регіон чи країну і краще підходить для багатомовного вебсайту.
9. Надання субтитрів для мультимедійного контенту
Для мультимедіа використовуйте файли субтитрів для перекладу відео без зміни самого відео. Переконайтеся, що зображення та мультимедійні елементи мають описовий альтернативний текст, який можна перекласти окремо від візуального вмісту.
Ось ще один приклад того, як переклад може допомогти вам охопити ширшу аудиторію. Ми є запеклими глядачами каналу Project Happiness на YouTube, який веде італійський мандрівник на ім'я Джузеппе.
Творець є італійцем. Він записує відео італійською та дублює їх англійською, але його канал переглядають у всьому світі завдяки широкому різноманіттю субтитрів, які він надає.
Готові дослідити нові ринки? Спробуйте наш автоматичний сервіс перекладу безкоштовно з нашим 1-місячним безризиковим пробним періодом. Номер кредитної картки не потрібен!
10. Регулярно оновлюйте переклади
Linguise дозволяє вам редагувати перекладені сторінки на фронтенді за допомогою зручного інтерфейсу. Ви можете самостійно оцінити переклади та внести зміни, якщо відчуваєте потребу.
Веб-сайти електронної комерції мають багато частих змін — товари закінчуються, обмежені за часом розпродажі, зміни в інформації про товар тощо.
Але використання Linguise робить оновлення перекладеного контенту легким. Його спеціальний сервер перекладу та система кешування прискорюють процес перекладу та відображають перекладену сторінку для вашої аудиторії.
11. Розгляньте мови з написанням справа наліво
