'UE專欄' 類別所有文章

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

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

語系與地理概念的選擇

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

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

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

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]

受開拓文教基金會之邀，到「98年身障團體資訊運用座談會」 ，分享網站企劃的方法跟技巧。其中部分內容介紹自己熟悉的軟體工具，得到還不錯的迴響，也許這些資訊對其他網站企劃工作者也是有用的。

【為什麼軟體工具對網站企劃工作是重要的？】

網站企劃工作過程，很少人討論應該使用什麼工具來提高產值跟效率。

看看我們身邊的網頁設計師，網站工程師，如果今天不准他們使用軟體工具來進行他們的工作，大家還有辦法做事嗎？視覺設計師能夠在紙張上手繪畫面嗎？網頁設計能夠一行行寫html tag嗎？工程師如果不懂得用一些好用的文字編輯軟體(比如 以notepad++寫程式，或者採用Visual Studio開發)，要他們一行行寫code應該會很慘吧！?

工具就像是武器，就算你只有三腳貓的功夫，一旦拿到絕世好劍，就可以耀武揚威。如果拿到臥虎藏龍中周潤發的青冥劍，或者拿到周星馳功夫電影中的如來佛掌秘笈，恭喜你，功力瞬間提昇數倍。

工具就像是汽車，你就算跑不贏劉翔，但只要你有車或搭高鐵，肯定可以比劉翔用跑的更快抵達終點。

軟體工具對網站企劃工作是重要的！好的工具帶你上天堂，不好用的工具帶你住套房，記住！

【有哪些好用的軟體呢？】

》 Microsoft Office是首選，不是因為它特別好用，而是大家幾乎都會操作Word, PowerPoint, Excel。

但你只會Office 軟體是不夠的，因為老闆/客戶都會，這使得他們會看不起你的企劃文件 (誰不會用 PowerPoint畫網站sitemap啊！) 如果習慣使用Microsoft軟體，那麼建議至少使用Visio。

網站企劃工作在策略階段，進行分析/研究/訪談，還是應該使用Office軟體。但是在其他不同階段，還有一些軟體可以讓你的企劃速度跟品質更好。

1. 資料及概念整理

》 Excel – 製作網頁清單Excel檔(Content List)。拆解網站的網頁內容或項目，整理在Excel中，這是很基本的專案管理工作。

》 Google – 蒐集資訊最好用。試試輸入關鍵字 “網站企劃書 filetype:ppt”。別人寫好的網站企劃文件都可以拿來參考。 filetype:doc 找Word文件，filetype:pdf 找PDF文件。

》 Freemind – 畫Mindmap ，用來腦力激盪/蒐集點子最好用。很容易調整資訊項目的分類跟層級或歸屬。

2. 概念具體化

》 Faststone– “借”畫面最快。畫面擷取軟體很多，我喜歡FastStone的輕便跟捲動擷圖功能(幫你把長長的網頁，一次到底抓成一張圖)。

》 Axure PR– 快速畫出示意圖/架構圖，如果Visio是機關槍，Axure RP就是大砲了。

3. 團隊溝通

》 Freemind – 開會時直接當場修改Mindmap，會議結束立刻形成共識。嘗試過簡報時以Mindmap來呈現嗎？試試看，會有意想不到的效果。

》 Axure RP – 輸出成 HTML Prototype + Spec Word文件，還有誰敢說你不是專業的網站企劃，多數客戶跟老闆看到所有的畫面跟規格文字都整理在Word裡頭，都會佩服你的細心。網頁設計師或工程師看到 HTML Prototype，而且還可以在瀏覽器上點來點去，應該沒有理由說看不懂了。

》 Excel – 這不用多說了，沒有工作清單，誰能知道要做多少事情？

4. 網站經營 (流量分析)

》 Google Analytics

【還有哪些好用的軟體呢？】

以下這些我沒使用，但聽過有些用過的朋友覺得還不錯：

》Balsamiq Mockups – 手繪風格的wireframe，開會討論時會議氣氛特別好，因為實在太可愛了，看到這些畫面很難生氣的。

》 Firefox 的plug-in Pencil Project，畫質媲美Visio，竟然是免費下載。

》 Excel 。你沒看錯，Excel可以做出很棒的網站企劃，包括架構跟畫面。

你呢？
你使用什麼軟體來幫助你做網站企劃，別藏私，好東西拿出來分享一下吧！

[文章出處：悠識 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]