'細節放大鏡' 類別所有文章

除了那些走向全球化的知名台灣品牌與企業，多語系網站規劃在國內很少看到。
其餘的類型，不管是商業網站或政府網站，大概不太會遇到多語系網站設計問題。

這一兩年處理過幾個多語系的網站，發現在規劃時，經常與客戶陷在語系與地理位置上的混淆。這裡記錄了一些觀察，分享給大家，提供參考！

語系與地理概念的選擇

英文網站是美國的網站嗎？不一定！
台灣網站就一定是中文網站嗎？不一定！
當本土的企業網站其目標市場是全球，那麼該採用什麼語系或地理位置來分辨呢？

這篇文章目的不在於提供一個快速簡單的答案，因為當企業(或機構)的商業情境不同，就必須採用不同的方式進行規劃。如果你清楚網站的目標使用者，以及商業策略及情境，應該可以做出正確的判斷，採用什麼方式做規劃。

這裡提供幾個知名企業/網站的作法，協助大家思考：

1. Flickr (http://www.flickr.com)

Flickr採用自行判斷訪客地理位置的技術，因此如果你在台灣連上Flickr，會直接看到繁體中文的網站。另外一種作法是判斷瀏覽器的語系參數，來決定拋出什麼語言介面給網站訪客。

透過程式自行判斷地理位置的技術，請自行詢問google大神，關鍵字是 『IP to location』 or 『Geo IP Location service』，就可以找到相關資訊。花點錢買資料庫，技術上是可以做到的。

Flickr的服務是全球性的，使用者不關心是否實際地理上的辦公室或公司，因此變更語系的介面命名是 『請選擇一種語言』，位於Flickr首頁的下方。

Flickr - "請選擇一種語言"，位於Flickr首頁的下方。

2. Acer (http://www.acer.com)

初次進入Acer.com首頁的訪客，會看到一個密密麻麻的畫面，把全世界 Acer分公司所在的國家條列出來，讓訪客自行選擇。然後利用Cookie技術將訪客選擇的分公司網站記住，下次進入 Acer.com的時候，就會直接轉進上次選擇的分公司網站。

由於Acer採用的概念是各地分公司，因此變更到其他地區網站的命名稱為 『WorldWide』(http://www.acer.com/worldwide/)。當企業很在意當地的消費者觀感，就會採用地理位置來設計多語系網站的導覽。

Acer - WorldWide

3. IBM (http://www.ibm.com)

IBM採用的作法是，凡是首次進入IBM網站的訪客，一律先看到美國 IBM，畢竟這裡是IBM的總部。如果使用者想要變更區域或語系，則選擇 『Country/region』。因此IBM的分類主要是採用地理區域的概念。

但有趣的是進入IBM 『Country/region』，其實它的網頁標題是』Select a country/region and language』，也就是說iBM嘗試在這裡提供一個將地理區域與語系選擇的整合作法。因此當你打開它的選單，會看到一組以地理區域開頭 – 語系的下拉式選單。
比如：
United States – English
Taiwan – Chinese (Traditional)

同一個國家區域也可能提供三種語系，以比利時來說：
Belgium – English
Belgium – French
Belgium – Dutch

IBM Select a country/region and language

4. Google (http://www.google.com)

Google也採用自行判斷適合語系的技術(就像是Flickr的作法一樣），幫使用者做了決定。Google同時也提供複雜的Language選擇，由於Google的使用者並不在意實際地理位置，因此 Google的命名是以語系為主，稱為 Language Tool (稱為 Tool，應該是配合 Search功能的關係)。

在Language Tool (http://www.google.com/language_tools)，Google則提供了兩種表列，一種是語系 – 『設定 Google 使用您的語言』 ，另一種則是搭配了各國國旗的地理位置 – 『查看在您網域裡的 Google』 ，提供2個網站索引讓使用者自行選擇。

Google - Language Tool

5. BBC (http://www.bbc.com)

BBC身為一個國際媒體，他們尤其在意的是語言與閱聽眾。

因此BBC設計了一個可以表達多國語系BBC網站的Flash ( http://www.bbc.co.uk/worldservice/languages/ )，提供一目了然的 BBC多國語系服務 (清楚的各地語言與英文對照)，也利用世界地圖顯示的涵蓋範圍，提示了該語系的BBC網站內容服務什麼地理位置的閱聽眾。BBC的這個功能稱為 Languages，講的很清楚了，以語系來做區分。

但是在BBC首頁，你卻不容易找到那個語系變更的選項 (過去的經驗會在右上角，或Footer找到)，因為BBC把它當做首頁的主要內容區域，稱為World Service。必須從 World Service 進入，才找得到變更到其他語系BBC網站的畫面。

BBC- Languages

BBC - World Service (首頁的一個內容區塊)

多語系網站挑戰網站企劃工作者的思維

在台灣甚少有機會接觸多語系的網站規劃，這不知道該說是網站企劃工作者的幸運？還是不幸？

台灣產業受限於島國型態，一定有很多朋友會有同樣的感慨 (關於幸與不幸)。幸運的是網站企劃工作容易多了，不幸的是，少了很多機會去接觸更廣泛的使用者，以及更高難度的挑戰。

推測未來兩岸交流更緊密，至少繁中/簡中/英文，會是比較有機會遇到的多語系網站規劃工作。

還有一個問題，留給你猜猜看？

關於多語系網站的規劃上，還有一個很容易見到的問題，並沒有在文章中提到，你要不要猜猜看是什麼問題呢？ ^_^

[細節放大鏡：一次只看一個細節，從中找到問題/啟發/學習。

文章出處：悠識 UserXper.com

同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]

某樣工作之所以專業，一定在過程中可以發展出很多』專有名詞』 或者 『術語』。專業術語在特定領域中經常出現。會講專業術語，就表示你是「巷子內」的人(台諺)。

比如IT術語：SQL，ERP，物件導向; 行銷廣告術語：TA，CPM，Copy(文案); 平面印刷術語：CMYK，DPI，網路行銷術語：SEO，CTR。使用專有名詞很明顯的好處之一是，同領域的人很容易溝通，且精準理解含意，不會誤解，溝通效率有效提高。另一種特性是，透過術語建立行業障礙，不是同道中人，一律視為外行。

網站企劃之所以專業，必然也要能精準地定義工作本質或工作內容。前幾天看到國外有個非正式的調查 ( http://gadgetopia.com/post/7003 )，調查網頁右上方導覽區域的命名。那個位置一般都會放這些項目：網站地圖，訂閱電子報，聯絡我們，登入，搜尋框，語系選項…。

以這兩家銀行網站的網頁來說明，畫面右上角以紅色矩形框住的位置，就是本文討論的Web UI元素之所在。

玉山銀行網站畫面右上角的Utility Nav

HSBC匯豐銀行網站畫面右上角的Utility Bar

這個UI元素，以英文來說有有這麼多種講法：
- Utilities 或 Utility Menu 或 Utility Nav (最常使用, 我最喜歡的UE顧問公司 Adaptivepath 也是這麼稱呼它)
- Global Nav (會與主選單混淆)
- Static Nav
- Tools
- Eyebrow Nav
- Overhead Nav
- Top Nav
- Tertiary Nav

因為CSS的關係，也有人稱之為
- Corner Nav
- Constant Nav

中文的講法有這些：
- 頁首 (仿自 Word 的講法)
- 工具導覽列
- 輔助導覽棒(Bar)
- 輔助工具列
- 天

[細節放大鏡：一次只看一個細節，從中找到問題/啟發/學習。
文章出處：悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]

搜尋是網路上最常見的行為之一，沒有人會否認站內搜尋功能的必要性。透過良好的站內搜尋功能，網站使用者可以節省點選導覽選單的時間，更快速的找到需要的內容。

好的搜尋功能並不容易開發，有太多搜尋功能上的創意跟想法，必須透過程式技術來完成，也就是說介面的構成很容易，但是程式開發很辛苦！比如 AutoComplete (又稱為Live Search或Smart Search) ，又比如 Search Result Ranking (Google的搜尋結果排名就是了不起的學問)。

搜尋功能的眾多設計要素中，唯一一點跟技術沒有直接關係，跟介面設計有關的部份，就是搜尋框(Search Box)的設計。

搜尋框的設計觀念，至少包含三種元素：
1. 一個標籤文字(Label)，用來說明這裡是搜尋框
2. 一個Text Field（文字輸入框)，讓使用者輸入關鍵字
3. 最後放上搜尋按鈕(Search Button)，讓使用者執行搜尋的動作

因此我們會經常看到這樣子的搜尋框構成：
關鍵字：_________ [搜尋]
查詢：___________ [查詢]
Search：_________ [GO]

然而搜尋已經是非常普遍的網路使用行為，以致於在搜尋框前面那個標籤文字似乎沒有太多作用了。因此許多網站為了節省版面空間，幾乎都不標示搜尋框的前置標籤文字了。

你注意到了嗎？下面這些知名網站，分別是Google, Facebook, Yahoo, CNet的搜尋框都沒有放置標籤文字。

取而代之的是，直接將提示搜尋的文字，放在Text Field裡頭，當滑鼠游標點擊Text Field則自動清除提示文字，這樣的設計可以達到提示效果，又可以節省版面空間，一舉數得。

大家發揮一下想像力，搜尋框的設計三元素可以被精簡到什麼程度呢？

[細節放大鏡：一次只看一個細節，從中找到問題/啟發/學習。
文章出處：悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]

網站介面設計的友善性來自於細心地處理了很多細節。
我們就從熱門的facebook來看FB塗鴉牆的留言文字框(Text Area)的設計。

一般社群網站或BLOG的留言介面，都採用較大區域的文字輸入區域，在UI Pattern的術語稱為 Text Area。常見的Text Area都是固定3行，4行或更多行的高度。

為什麼FB塗鴉牆的Text Area卻只有短短的一行高度？
這個設計應該是從Twitter 的介面學習來的。
只有一行高度的輸入區域，在UI Pattern的術語，稱為 Text Field。

使用者看到Text Field時會自然被制約，直覺認為只要寫入一行文字，不用寫太多。因此在Twitter或FB塗鴉牆上書寫文字，潛意識中比較不會被迫要寫很多文字，沒有了這個壓力，自然就容易書寫。

Text Area高度太高，會佔掉FB畫面的上方空間。因此FB塗鴉牆以精簡的一行高度來解省空間，讓下方的各種留言有更多的機會被閱讀(跟Twitter一樣)。

為了解決使用者留言會寫下較多文字的可能性。FB塗鴉牆的Text Area會因為文字輸入自動換到下一行，而且高度也自動放大，取代一般垂直捲軸(Text Area的Scroll Bar)的介面，這是另一個貼心的設計。這等於是一種Text Field跟Text Area兩種Pattern的整合版。

當然，本文分析FB 塗鴉牆介面的優點是事後諸葛，只是藉著觀察來推測FB設計的用意。令我感到好奇的不是FB採用什麼技術 (複雜的JavaScript+CSS)完成這樣介面，而是什麼樣的過程跟構想，使得設計者最後設計出這樣的介面？

這個介面讓FB的畫面不只提供較佳的閱讀性，更強烈的鼓勵使用者留言。類似的細節很多 (比如，讚一下)。當FB在眾多的細節中，默默地鼓勵使用者進行互動，使用者也就更容易被FB友善的介面黏住。

歡迎你留下更多不同的看法或評論。

[細節放大鏡：一次只看一個細節，從中找到問題/啟發/學習。
文章出處：悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]