選擇語言:

打造優質多語言網站設計:9 個最佳做法與範例

如何讓您的企業從競爭中脫穎而出,提供一流的全球使用者體驗?以下舉出智慧型多語言網站設計 9 大基本要素。

打造優質多語言網站設計:9 個最佳做法與範例


為何全球行銷人員要不遺餘力,打造方便好用的高品質網站?

 

雖然大家的出發點不同,目標卻大同小異:打造優質的使用者體驗 (UX),能將更多潛在客戶變為客戶,進而提高銷售業績、增加獲利。

這該怎麼做呢?提供簡易的導覽體驗、實用的功能,以及經專業網站翻譯公司本地化的智慧型多語言網站,就能勝券在握。

透過一致性強化品牌形象,放大全球訊息曝光效益


開發與管理多語言網站時,落實一致性是最大關鍵,這樣才能確保使用者無論來自哪裡、使用什麼語言,都享有同樣順暢直覺的使用者體驗。畢竟在大多數市場中,您的目標始終是推廣同一個品牌、傳達相同的訊息、營造一樣的氛圍、勾起一樣的情感,並激發同樣的行動。

 

只要妥善規劃、結合跨部門的專業能力,採用智慧型多語言網站設計,就能在全球各個網站呈現一致的外觀和質感,為客戶提供最卓越的體驗。

利用智慧型多語言網站設計,超越全球競爭對手、脫穎而出


如何讓您的企業從競爭中脫穎而出,提供一流的全球使用者體驗?以下舉出智慧型多語言網站設計 9 大基本要素。

運用全球範本,為所有網站打造一致的品牌呈現方式


您雖然可以提供一些指引,但無法控制全球使用者會造訪哪一個網站。德語使用者可能會查看您的英國網站,荷蘭語使用者也可能無意間造訪您的法文網站。

 

品牌必須保持一致的全球形象,而各地區的網站就是品牌在當地的主要代言人。不過,為了滿足並迎合在地客群的需求,我們也建議網站應該要因地制宜,進行客製化。

為了成功做到這一點,請盡可能使用全球範本來建立您的多語言網站。許多全球知名的多語言網站,都採用全球一致的設計與版型範本,接著分別針對桌上型電腦和行動裝置,將範本最佳化。這個做法有助於提高效率、管理文字擴充空間,並協助本地化團隊掌控視覺呈現方式,包括使用者介面 (UI) 和品牌元素。

IKEA 的網站便是出色的全球範本使用範例。從下方的螢幕截圖可以看出,兩個語言的網站都採用簡潔、乾淨的版型,沒有使用過多的色彩。雖然水平空間可以自訂,但兩個網站呈現一致的 IKEA 品牌形象,都使用顯眼的「IKEA」一字。

IKEA global template Croatia

IKEA global template Israel

全球範本可讓地區團隊各自推展廣告活動和內容,滿足當地使用者的需求與偏好。此外,全球範本也能簡化多網站管理作業,並壓低設計與開發費用,省下程式碼錯誤、品質控制和維護的相關成本。

一個靈活的範本,能應用在各種語言上,包括西歐語言 (由左至右閱讀)、亞洲語言或多位元語言、業界所謂的「雙向語言」或由右至左閱讀的語言(包括希伯來語、阿拉伯語),以及使用阿拉伯字母的語言 (例如波斯語、普什圖語和烏爾都語)。若是雙向語言,範本應使用由右至左的方向。

全球通道設計應考量使用者需求


建立全球範本時,請格外注意全球通道 (Global gateway) 的設計。全球通道是一種導覽系統,能引導使用者前往特定的本地化網站版本,它們通常會在多語言網站的最下方或最上方。

 

全球通道的設計和配置方式也是重點。如果通道很難找到,或只用使用者看不懂的來源語言顯示,使用者就有可能會放棄並轉向他處搜尋資訊。在各語言的網站中,都應該能輕鬆並直覺地找出全球通道。

全球通道有幾種常見的設計。最常見的可能就是下拉式方塊,讓使用者透過捲動清單來選擇語言。Airbnb 全球網站採用的就是這種設計。

global gateway AIRBNB

或者,您也可以像 Philips 網站一樣,建立專屬的登陸頁面,引導使用者前往自己的母語網站。

global gateway Philips

另外,也可以直接在網頁上列出所有語言,例如 Amazon 就在網站最下方採用這種做法。

Amazon localized alphabetized FR

常見的全球通道設計錯誤,就是用國旗來表示語言。萬一某個國家/地區使用多種語言,該怎麼辦?如果多個國家/地區使用相同語言,又如何是好?除非您希望能標示特定國家/地區 (例如網站在特定國家/地區銷售特定產品),否則請避免使用國旗。

建議您改用「地區」做標示。有時最理想的做法,就是直接寫出語言名稱。如要採用這個方式,請務必以本地化名稱寫出語言名稱,也就是使用「English、Français、Italiano」,而非「英語、法語、義大利語」。

此外,也應該指出每個國家/地區使用的不同語言組合 (例如瑞士法語、瑞士德語和瑞士義大利語)。

YouTube 採用較為複雜的全球通道,因為他們要分別因應語言和地區的選擇需求。在下圖中,紅色圈起的部分為國家/地區選項,而藍色圈起的部分則為語言選項。

Youtube global gateway FR

Youtube global gateway France AR

 

建置可因應全球各種網際網路速度的網站


在使用者查看網站內容前,勢必要先等待網站載入。建議您不要加入過多的圖片或文字,以免讓使用者久候。

 

世界各地的網際網路速度差異很大。Akamai Technologies 於 2015 年網際網路現況報告中,詳細列出了全球不同 IP 位址的取樣連線速度 (以 Mbps 為單位,又稱為「每秒百萬位元」,這是常見的資料傳輸速度測量單位)。

從中可以明顯看出,各地的網際網路速度差異有多大。專為愛爾蘭網速設計的網站,在委內瑞拉開啟的速度就很慢。

請移除、最佳化或修改圖片與其他拖慢國際使用者載速的大型檔案,讓網站能配合目標地區的網速。

實現內容國際化,確保優質的購買和運送體驗


翻譯電子商務網站時,必須留意幾個額外步驟。請詳細了解當地的線上購物和運送法規,接著依據不同貨幣與送貨地址格式調整網站。執行網站國際化時,請盡早在網站開發過程中加入這些功能,以因應眾多的變數。您的電子商務供應商或許能提供相關協助。

 

以歐盟地區為例,雖然多數國家/地區都使用歐元,仍然有些國家/地區未採用。捷克使用克朗、英國使用英鎊、波蘭使用茲羅提,而匈牙利則使用福林。

當網站訪客看到他們使用的貨幣時,購買意願會大幅提升。這樣一來,他們就會接著提供送貨地址。有鑑於各地的地址格式不盡相同,您也需要使用額外的變數集以便因應。

各個市場有各自不同的慣例,來呈現街道編號與名稱、郵遞區號,以及電話號碼等資訊。

Address Formats US

Address Formats Asia

Address Formats Europe

雖然這些資訊看來不是很重要,但請切記:多語言網站設計的宗旨,是打造簡單易用又優質的使用者體驗。正因如此,最好能在網站開發初期,就盡早預測到並解決這些問題,避免網站訪客感到困惑或備受挫折,最終錯失商機。若能謹慎建立多語言網站的表單功能和其他電子商務功能,就能避免訪客遇到上述的類似問題。

時間和日期應採用慣用格式,以因應各地的差異


在時間和日期方面,請留意當地使用的格式。美國、英國和過去的英國殖民地通常會使用 12 小時制,而多數歐洲國家 (以及世界各地的其他許多國家) 則會使用 24 小時制。

 

月曆的日期格式也有不同之處。舉例來說,美國會使用「月/日/年」的順序,並將週日視為每週的第一天。但法國則會使用「日/月/年」的順序,並將週一視為每週的第一天。

Calendar time US

Calendar time FR

 

使用符合當地文化、內容具有相關性的影像、圖示和其他項目


藝術是一門相當主觀的學問,商業圖片、相片、圖示和標誌也一樣 (特別是在網站翻譯完成後)。

 

歐美人士眼中單純或時尚的設計,可能會冒犯到其他文化的使用者。請避免使用手部、動物或宗教符號等影像。相片中的人物應符合當地文化。請力求謹慎,進行充分的研究,如有任何疑慮,請徵詢當地員工的意見。

 

Lenovo website localized for India

針對印度本地化的 Lenovo 網站。

 

 

 

Lenovo website localized for Singapore

針對新加坡本地化的 Lenovo 網站。

 

 

 

Lenovo website localized for US

針對美國本地化的 Lenovo 網站。

 


舉例來說,地球圖示通常會用來表示「國際性」內容。然而,即使是地球圖示,也可能隱含偏見。從下圖中可以看出,幾個不同的地球圖示分別突顯了特定地區。那麼,您應該選擇哪個地球圖示?

 

Globe icon

最保險的方式,就是使用右上角完全未突顯任何地區的圖示。還是要再次提醒您,在多語言網站上,再微不足道的小事,都有可能大幅影響訪客的使用體驗。

研究不同顏色的隱含文化意義,並採用適當的顏色


不同文化對顏色所代表的象徵意義,解讀可能也不同。部分專家認為:藍色是全球接受度最高的顏色。背後的原因可能包括:藍色讓人聯想到大自然,通常具有正面意義,並能讓人感到平靜。然而在伊朗,藍色則與追悼有關。

 

由於顏色產生的觀感極為主觀,建議您在網站上謹慎使用,如果不確定色彩有沒有隱含的文化意義,請先多加研究。

製作可進行本地化的圖片,並避免使用嵌入式文字


使用圖片時,請避免在設計檔案中嵌入文字。嵌入式文字通常難以取用,造成翻譯的困難,除去嵌入式文字,就能避免需要再重新建置圖片檔案,簡化程序。

 

建議您可以請網站開發人員在 HTML 中將文字覆疊在圖片上 (如果這個做法能達到所需的品質和掌控程度)。

就多語言網站來說,以下圖片是個不太好的範例。不僅嵌入影像內的標題是英文,筆記型電腦圖示中也嵌入了英文的 Dictionary 一字。

Embedded text image

若能請圖形設計人員在 Adobe Photoshop 或 Illustrator 原始檔案中,建立個別的文字圖層,即可省下更多時間和成本。而且,由於搜尋引擎網路爬蟲無法讀取影像中的嵌入式文字,這個做法還能符合搜尋引擎最佳化 (SEO) 的最佳實務作法。

訣竅:Adobe PDF 檔會提高取得內容並翻譯的難度。PDF 無法在某些程式中進行編輯,將它轉換成可翻譯的格式,格式可能會跑掉,導致內容遺失、編輯不易、成本上漲和時程延誤。因此,和語言服務供應商合作時,最好能提供原始設計的原始檔案,確保最理想的翻譯品質。

建立彈性的使用者介面,並交由桌面排版專業人員審查


將英文翻譯成其他語言後,有些西歐語言的長度可能會增加 35% 以上。因此請務必做好規畫;為網路應用程式介面、網站導覽功能表,或行動呼籲按鈕等其他項目進行本地化時,更要這麼做。

 

基於本地化最佳實務作法,請將您的使用者介面交由多語言桌面排版本地化專家審查和/或編輯,以避免發生文字長度過長和其他相關問題。下面簡單說明避免文字過長的方式:

AirBNB ES text expansion

Airbnb FR text expansion

Airbnb GR text expansion

Airbnb ZH-CN text expansion

如上所述,您可以像 Airbnb 在這個範例中的作法一樣,建立彈性使用者介面來解決問題。如果您仔細看,就會發現搜尋表單和按鈕會隨文字長度延伸或縮減。

或者,也可以設計一個使用者介面,來容納變長的文字內容。以此處的 Amazon 為例:建立 “add to cart” (加入購物車) 按鈕時,文字周邊就已納入許多額外空間。即使文字變多,空間也不會超過黃色方塊,如同下方所示。

Kindle text expansion DE

Kindle text expansion EN

Kindle text expansion FR

 

更多資訊……

這份清單重點列出了多語言網站設計的幾個關鍵要素,但還有許多要項未詳盡列出。建議您與了解目標市場文化和細微語言差異的語言服務供應商合作,以兼顧設計期間涉及的各項細節,創造簡單易用又卓越的使用者體驗。

  • #blog_posts
  • #translation_localization

Lionbridge
AUTHOR
Lionbridge