Multi-Language Website Design Tips with ConveyThis

Multi-Language Website Design Tips with ConveyThis: Enhance user experience and global reach with practical design strategies.
Truyền đạt bản trình diễn này
Truyền đạt bản trình diễn này
mẹo thiết kế đa ngôn ngữ

Nhiều trang web hiện nay có nhiều tùy chọn ngôn ngữ để khách truy cập từ khắp nơi trên thế giới có thể thoải mái duyệt qua. Internet đã giúp thị trường trở thành một trải nghiệm toàn cầu, do đó, khi có một trang web, bạn đã mở ra cánh cửa kinh doanh của mình cho tất cả mọi người có kết nối Internet. Tuy nhiên, nếu họ không hiểu ngôn ngữ, họ sẽ không ở lại. Trang web đa ngôn ngữ thật dễ dàng.

Luckily, the process of turning your website multilingual is fairly simple. ConveyThis can create a translated version of your site in minutes and then you can customize the appearance and placement of you language switcher, make some layout changes to accomodate for wordier or Right To Left languages and change colors and images in those cases where the originals are unsuitable for the target culture.

Quá trình này không hoàn toàn tự động, bạn sẽ cần thực hiện một số nghiên cứu trước. Hướng dẫn này giải thích một số khía cạnh của thiết kế trang web để giúp bạn thoải mái bước vào thế giới của các trang web đa ngôn ngữ và thiết kế tuyệt vời.

Thương hiệu nhất quán

Trải nghiệm người dùng cần nhất quán bất kể phiên bản ngôn ngữ họ đang truy cập. Giao diện phải rất giống nhau trong tất cả các phiên bản, một số khác biệt có thể cần thiết do sự khác biệt về ngôn ngữ hoặc văn hóa, nhưng nếu bạn chuyển đổi giữa các ngôn ngữ, bạn sẽ không cảm thấy như mình đã được chuyển hướng đến một trang web hoàn toàn khác.

Do đó, các yếu tố thiết kế như bố cục và phong cách xây dựng thương hiệu cụ thể của doanh nghiệp bạn phải giống nhau trên tất cả các ngôn ngữ.

This is super easy to do in WordPress with ConveyThis, that perfectly identifies text regardless of the theme you have chosen (even if it’s customized!) and automatically translates it, even if you are working with other plugins. 

Điều này sẽ giúp bạn có một mẫu toàn cầu có cùng chủ đề cho tất cả các ngôn ngữ và do đó, trải nghiệm người dùng giống nhau.

Trang chủ của Airbnb hoạt động rất tốt là một ví dụ, chúng ta hãy xem phiên bản Úc:

Đa ngôn ngữ

Và đây là bản tiếng Nhật:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

Không còn nghi ngờ gì nữa, đây là cùng một trang web. Nền là như nhau và chức năng tìm kiếm cũng vậy. Có một thiết kế thống nhất giúp nhận dạng thương hiệu của bạn, đồng thời tiết kiệm thời gian và công sức khi thêm ngôn ngữ mới hoặc cập nhật.

Xóa trình chuyển đổi ngôn ngữ

Chọn một vị trí nổi bật cho trình chuyển đổi ngôn ngữ, chẳng hạn như bất kỳ góc nào trong bốn góc của trang web của bạn và đặt nó trên mọi trang, không chỉ trang chủ. Nó phải dễ tìm, không ai muốn tìm một nút ẩn.

Rất nên đặt tên ngôn ngữ bằng ngôn ngữ riêng của họ. Ví dụ: “Español” thay vì “Spanish” sẽ rất hiệu quả. Asana làm điều này, trang web của họ có hộp thả xuống với các tùy chọn ngôn ngữ có sẵn.

Không có tiêu đề3

Bằng cách này, nó giúp du khách cảm thấy được chào đón. Nếu trang web của bạn được dịch, thì danh sách ngôn ngữ sẽ phản ánh điều đó. Đọc “Đức, Pháp, Nhật” trên một trang web tiếng Anh không giúp mọi người điều hướng dễ dàng hơn và nó tạo ấn tượng rằng phiên bản tiếng Anh là phiên bản quan trọng nhất.

'Ngôn ngữ' tốt hơn 'Khu vực'

Nhiều thương hiệu quốc tế lớn yêu cầu bạn chuyển vùng để có thể đọc trang web bằng ngôn ngữ của bạn. Đây là một ý tưởng tồi tệ khiến cho việc duyệt web trở nên khó khăn hơn đối với khách truy cập. Các trang web này đang hoạt động với giả định rằng bạn đang duyệt ở khu vực sử dụng ngôn ngữ đó, vì vậy bạn nhận được văn bản bằng ngôn ngữ của mình nhưng bạn có thể không nhận được nội dung cho khu vực mà bạn quan tâm.

Hình ảnh sau đây được lấy từ trang web Adobe:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LarZbXFsMD9AiSX mEzsJilUu4a

Ngôn ngữ không nên tách rời khỏi khu vực của họ. Lấy ví dụ tất cả những thành phố quốc tế như New York, London và Paris. Có thể một người Bỉ sống ở Vương quốc Anh muốn mua hàng từ trang web của Vương quốc Anh nhưng duyệt bằng tiếng Pháp. Họ phải lựa chọn giữa việc mua hàng từ trang web của Bỉ bằng ngôn ngữ của họ hoặc mua hàng từ trang web của Vương quốc Anh bằng tiếng Anh và họ không muốn làm như vậy. Do đó, bạn đã vô tình tạo ra một rào cản. Chúng ta hãy xem một trang web cho phép bạn chỉ định ngôn ngữ và khu vực riêng biệt, trang web Uber.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

Đây là thiết kế tuyệt vời. Trong trường hợp này, tùy chọn chuyển đổi ngôn ngữ đã được đặt ở chân trang bên trái và thay vì hộp thả xuống, bạn có một phương thức do có nhiều tùy chọn. Tên ngôn ngữ cũng được gọi bằng ngôn ngữ riêng của họ.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

Như một phần thưởng, bạn có thể “nhớ” ngôn ngữ mà người dùng đã chọn để từ lần truy cập đầu tiên trở đi, họ không phải chuyển đổi nữa.

Tự động phát hiện vị trí

Tính năng này cực kỳ hữu ích để khách truy cập của bạn không truy cập sai ngôn ngữ. Và để tiết kiệm thời gian cho người dùng để họ không phải tìm kiếm trình chuyển đổi ngôn ngữ. Đây là cách nó hoạt động: trang web xác định ngôn ngữ của trình duyệt hoặc vị trí của chúng.

Nhưng hãy cẩn thận trong trường hợp người dùng là khách du lịch và không quen với ngôn ngữ địa phương vì họ sẽ cần nút ngôn ngữ để họ có thể chuyển đổi, vì lý do này, công cụ không phải lúc nào cũng chính xác.

Khi thiết kế trang web đa ngôn ngữ của bạn, đừng chọn giữa ngôn ngữ tự động phát hiện và trình chuyển đổi ngôn ngữ, ngôn ngữ sau là bắt buộc trong khi ngôn ngữ trước là tùy chọn.

Cờ không phải là sự thay thế phù hợp cho tên ngôn ngữ

Có 21 quốc gia nói tiếng Tây Ban Nha và 18 quốc gia nói tiếng Anh và ở Trung Quốc, có 8 phương ngữ chính, vì vậy cờ không phải là sự thay thế tuyệt vời cho tên ngôn ngữ. Ngoài ra, cờ có thể không phải là chỉ báo hữu ích vì chúng có thể gây nhầm lẫn cho những người không nhận ra chúng.

Hãy linh hoạt với không gian văn bản

Đây có thể là một thách thức, nhưng không thể phủ nhận rằng các bản dịch không chiếm cùng một không gian với văn bản gốc, một số có thể ngắn hơn, một số khác có thể dài hơn, một số thậm chí có thể cần thêm không gian theo chiều dọc!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

Các ký tự tiếng Trung chứa nhiều thông tin nên không cần nhiều khoảng trống, trong khi tiếng Ý và tiếng Hy Lạp dài dòng hơn và cần gấp đôi số dòng. Một nguyên tắc chung là giả định rằng một số bản dịch có thể cần thêm hơn 30% không gian, vì vậy hãy linh hoạt với bố cục và chỉ định nhiều khoảng trống cho văn bản. Những chỗ chật hẹp đó trong trang web gốc có thể không có đủ chỗ cho bản dịch, tiếng Anh là một ngôn ngữ đặc biệt nhỏ gọn và nếu bạn thấy cần phải viết tắt bằng tiếng Anh để nội dung phù hợp, chắc chắn bạn sẽ gặp một số rắc rối khi nó thời gian để dịch.

Bên cạnh việc có khoảng trống để kéo dài văn bản, bạn cũng nên có các phần tử giao diện người dùng thích ứng để các nút và trường nhập liệu cũng có thể phát triển, bạn cũng có thể giảm kích thước phông chữ, nhưng không quá nhiều.

Trang web Flickr đa ngôn ngữ, chúng ta hãy xem nút “lượt xem” ban đầu:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

Nó trông tuyệt vời, mọi thứ đều tuyệt vời, nhưng 'lượt xem' hóa ra lại là một từ dài hơn trong các ngôn ngữ khác, cần nhiều không gian hơn.

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

Trong tiếng Ý, nó cần nhiều không gian gấp ba lần!

Nhiều chữ viết không phải tiếng Latinh, chẳng hạn như tiếng Ả Rập, yêu cầu độ cao cao hơn để bản dịch phù hợp. Vì vậy, tóm lại, bố cục trang web của bạn phải đủ linh hoạt để thích ứng với các yêu cầu ngôn ngữ khác nhau để khi chuyển đổi, giao diện bóng bẩy của bản gốc không bị mất đi.

Khả năng tương thích phông chữ web và mã hóa trang web

Theo W3C, bạn nên mã hóa trang web của mình bằng UTF-8 , cho phép các ký tự đặc biệt.

Nó khá đơn giản, khai báo UTF trông như thế này

fbnRHXPPyY2OPijzOvFkH0y Kế

Ngoài ra, hãy đảm bảo rằng các phông chữ tương thích với các ngôn ngữ khác nhau, nếu không, văn bản có thể trông không đọc được. Về cơ bản, trước khi quyết định chọn bất kỳ phông chữ nào, hãy kiểm tra khả năng tương thích của nó với tất cả các tập lệnh bạn cần. Nếu bạn muốn thâm nhập thị trường Nga, hãy kiểm tra xem tập lệnh Cyrillic có được hỗ trợ hay không.

Hình ảnh sau đây được lấy từ Google Fonts và như bạn có thể thấy, bạn có thể chọn tải xuống bất kỳ phiên bản tập lệnh nào bạn cần. Những ngôn ngữ có số lượng ký tự lớn hơn sẽ tạo ra các tệp phông chữ lớn hơn, vì vậy hãy tính đến điều đó khi chọn và trộn các phông chữ.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

Về các ngôn ngữ từ phải sang trái

Khi thị trường Trung Đông phát triển, bạn có thể xem xét việc tạo một phiên bản trang web của mình để thu hút khách truy cập từ khu vực này, điều này có nghĩa là điều chỉnh bố cục sao cho tương thích với ngôn ngữ của họ. Một tính năng đặc trưng của hầu hết các ngôn ngữ Trung Đông là chúng được đọc từ phải sang trái! Đây là một thách thức lớn và giải pháp bắt đầu bằng việc phản chiếu giao diện.

Đây là thiết kế của Facebook dành cho các ngôn ngữ từ trái sang phải, chẳng hạn như tiếng Anh.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

Và đây là thiết kế lộn ngược cho các ngôn ngữ từ phải sang trái, chẳng hạn như tiếng Ả Rập.

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

Nhìn kỹ, vị trí của mọi thứ trong thiết kế đã được nhân đôi.

Xem bài viết của Robert Dodis về thiết kế cho ngôn ngữ Right to Left để biết thêm thông tin về cách thực hiện việc này.

Some Right To Left languages are Arabic, Hebrew, Persian and Urdu and ConveyThis has no trouble adapting your website to accommodate for their language requirements and ensure a great user experience. And the best thing is you can customize the look of each language and make changes to the type of font or its size, and if necessary, edit the line height. 

Chọn biểu tượng và hình ảnh phù hợp

Hình ảnh có một thành phần văn hóa rất nặng nề và là yếu tố chính của thiết kế trang web phù hợp. Mỗi nền văn hóa gán ý nghĩa cho các hình ảnh và biểu tượng khác nhau, một số cách giải thích là tích cực và một số hoàn toàn ngược lại. Một số hình ảnh phản ánh những trải nghiệm về lý tưởng của một nền văn hóa nhưng trong một bối cảnh khác sẽ khiến người dùng cảm thấy xa lạ.

Đây là một ví dụ về một hình ảnh phải được thay thế vì nó không phù hợp về mặt văn hóa. Xin lưu ý, không phải hình ảnh nào cũng gây phản cảm cho người khác, có thể nó chỉ tạo ra sự thờ ơ khi bạn muốn mọi người tò mò và quan tâm đến sản phẩm của mình.

Đây là trang chủ của Clarin bằng tiếng Pháp, có hình một phụ nữ da trắng. Và đây là phiên bản Hàn Quốc, với một phụ nữ Hàn Quốc làm đại sứ thương hiệu.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

Loại hình ảnh có thể gây khó chịu là những hình ảnh có vẻ vô tội đối với một số nền văn hóa, nhưng trong mắt của một nền văn hóa khác, chúng đang thể hiện những hành vi bất hợp pháp hoặc cấm kỵ, chẳng hạn như mô tả về đồng tính luyến ái hoặc trao quyền cho phụ nữ.

Điều này cũng áp dụng cho các biểu tượng, trong khi ở Hoa Kỳ, biểu tượng có hai ly rượu sâm panh đang nâng cốc thể hiện lễ kỷ niệm, ở Ả Rập Xê Út, việc uống rượu là bất hợp pháp nên biểu tượng đó sẽ phải được thay thế bằng biểu tượng phù hợp với văn hóa.

TsA5aPbhznm2N vv qL
(Nguồn ảnh:Ăn cắpKiwi)

Do đó, cần phải nghiên cứu để đảm bảo rằng các biểu tượng bạn đã chọn phù hợp với thị trường mục tiêu. Nếu bạn không chắc chắn, bạn luôn có thể chơi an toàn.

Ví dụ: ba biểu tượng này có Trái đất, biểu tượng đầu tiên được thiết kế cho khán giả Úc; cái thứ hai, dành cho khán giả châu Phi; và cái cuối cùng phù hợp với lượng khán giả lớn hơn và toàn cầu vì không có khu vực cụ thể nào được giới thiệu.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

Last but not least, ConveyThis can translate any text, as long as it is not embedded in an image. The software will not be able to identify what it’s written on it so it will remain in the original language, so avoid embedding text.

Lựa chọn màu sắc

Như đã đề cập trong phần trước, các nền văn hóa diễn giải hình ảnh theo cách khác nhau và điều tương tự cũng xảy ra với màu sắc. Ý nghĩa của chúng là chủ quan.

Ví dụ, ở một số nền văn hóa, màu trắng là màu của sự ngây thơ, nhưng những nền văn hóa khác sẽ không đồng ý, đó là màu của cái chết. Điều tương tự cũng xảy ra với màu đỏ, ở các nền văn hóa châu Á, nó được sử dụng trong các lễ kỷ niệm nhưng đối với một số quốc gia châu Phi, nó không mang ý nghĩa tích cực vì nó có liên quan đến bạo lực.

Tuy nhiên, có vẻ như màu xanh lam là màu an toàn nhất trong tất cả các màu, thường được gắn với những ý nghĩa tích cực như bình tĩnh và hòa bình. Nhiều ngân hàng sử dụng màu xanh lam trong logo của họ vì nó cũng có thể có nghĩa là sự tin cậy và an toàn.

Bài viết này chỉ ra sự khác biệt về ý nghĩa màu sắc trên toàn thế giới , rất hữu ích để bạn bắt đầu nghiên cứu về màu sắc tốt nhất cho trang web đa ngôn ngữ của mình.

Điều chỉnh định dạng

Consider avoiding using only numbers when writing dates because there are many different ways to write them, in the US the official format is mm/dd/yyyy and if you can only see the numbers some users from other countries which use different systems (such as dd/mm/yyyy) may get confused. So your options are: making sure that the translated versions have the date format adapted or write the month in letters so that ConveyThis will always write the correct date.

Ngoài ra, trong khi ở Hoa Kỳ sử dụng hệ thống đo lường, hầu hết các quốc gia sử dụng hệ thống số liệu, vì vậy bạn sẽ cần phải quyết định xem trang web của mình có phù hợp để chuyển đổi các phép đo hay không.

Plugin dịch thuật tốt nhất cho WordPress

There are so many options when it comes to adding a translation plugin to your WordPress website and not all of them work in the same way, results will vary. With ConveyThis you are guaranteed a perfect integration no matter your website design.

ConveyThis is the best choice for website translation with 92 languages available. It’s a reliable WordPress plugin that will allow you to have a solid multi language version of your website fast. It can understand the site’s layout, detect all text and translate it. ConveyThis also includes an intuitive editor for text customization.

ConveyThis includes a one-size-fits-all language switcher button that works with any site as default, but you can also edit it as much as you like. We also follow the design principles stated in this article:

  • Thương hiệu nhất quán trên tất cả các phiên bản ngôn ngữ của trang web.
  • Xóa trình chuyển đổi ngôn ngữ và tùy chọn để chọn ngôn ngữ ưu tiên.
  • Các trang web được mã hóa bằng UTF-8 tự động.
  • Giao diện phù hợp cho các ngôn ngữ từ phải sang trái

ConveyThis: a multilanguage website solution you can trust

It is commonly believed that website translation is a complex process. But there is no need to postpone it because you don’t want to deal with the headaches. It’s not daunting at all! With ConveyThis, it becomes a straightforward conversion. It is seamless and fast. 

After a quick installation all your content can now be translated without affecting the formatting, and that includes content generated by other apps and the checkout process. ConveyThis is an easy tool for multi language website translation that won’t make a mess of your code, like others do.

Tùy chọn đặt hàng các bản dịch chuyên nghiệp cho trang web của bạn cũng có sẵn! Họ sẽ giúp bạn chuyển đổi hoàn toàn trang web đa ngôn ngữ thành trang web đa văn hóa, cải thiện đáng kể trải nghiệm của khách hàng. Hãy nhớ rằng nếu bạn dịch một trang web, bạn cũng phải có bộ phận hỗ trợ khách hàng bằng ngôn ngữ của khách hàng mới của bạn. Cân nhắc đầu tư vào bản địa hóa và điều chỉnh nội dung để đảm bảo trải nghiệm người dùng tuyệt vời cho khách truy cập của bạn.

Bình luận (4)

  1. The End in Sight for Google-Translate for Websites! – ConveyThis
    8 Tháng Mười Hai, 2019 Đáp lại

    […] văn bản liên quan đến máy tính bằng tiếng Thụy Điển. Các yếu tố như thế này đã giúp nhóm thiết kế xây dựng lộ trình cho khách hàng truy cập nền tảng, đến trải nghiệm dịch thuật dễ dàng và tránh chỉ mục cuộn xuống như […]

  2. Global Search Engine Optimization for All Language Platforms – ConveyThis
    10 tháng 12, 2019 Đáp lại

    […] các ý tưởng xung quanh nền tảng đa ngôn ngữ và cơ sở khách hàng được hình thành, sau đây sẽ là cái nhìn về thành phần văn bản đối với ngôn ngữ […]

  3. Turn your WooCommerce Multilingual – ConveyThis
    Tháng ba 19, 2020 Đáp lại

    […] and get a linguist from the ConveyThis team to take a look and edit it so you can be sure that the wording and tone are suitable to your store values and […]

  4. How Customizable is WooCommerce? – ConveyThis
    23 tháng 3 năm 2020 Đáp lại

    […] rằng hình ảnh luôn chứa đựng rất nhiều ý nghĩa văn hóa và các đối tượng khác nhau có những kỳ vọng khác nhau về cách các cửa hàng nên hiển thị […]

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu*