分類: Planning

"Xexex's Java 和其他二三事":http://www.javaworld.com.tw/roller/page/ingramchen?entry=2007_11_18_WebAppUsabilityNotes

原則一：思考服務的對象

首先要先了解你的用戶是哪一種類型：若按用戶功力可分為 end user 和 power user。若按網頁使用頻率來分，可分為例行性作業和一次性作業。用例子說明好了，比方說大家熟悉的購物網站，包含產品瀏覽、購物車、下單等等功能。首先，這類網站的使用者功力大多屬於 end user，因此介面上越簡單越好 (即使你有很好的創意，也要小心發揮，因為 end user 可能會看不懂你新穎的介面)。若從使用頻率來看，產品瀏覽屬於例行性作業，下單則屬於一次性作業 (因為久久才下單一次)。因此產品瀏覽的網頁不能拖泥帶水，步驟要越少越好，不然用戶逛了老半天找不到想買的東西就跑掉了。另一方面，下單的網頁到是不怕步驟多，就怕使用者不會用，或是抗拒使用 (要付錢的地方總是會小心翼翼的)。所以一般下單都會設計成 wizard 的方式，一步一步導引使用者完成下單。

那如果是購物網站的後台呢？後台的使用者屬於 power user (可能一開始就是，或是之後會被訓練)。他每天的工作就是產品上架，處理訂單...等等例行性的作業。這樣的網頁以快速為最優先考量：可以運用 減少 popup、不用 wizard、多功能客製化元件、一頁內放多一點資訊、增設 hotkey... 等等技巧。總之讓用戶可以在最少的點擊、最少的思考完成他的工作就是了。

原則二：第一頁要放用戶最想做，最常做的事

要提升 usability，就是去思考用戶最想做或是最常做的事，比方說，第一頁除了查詢表單之外，還列出他最近處理過的10個案子；或者，用戶比較關心那些稽核不過的案子，那一開始就先列出這些有問題的案子；或者，可以提供查詢條件 history 的功能，讓用戶可以調出最近下的查詢條件... 等等。

決定要做那方面的事，要透過談需求時了解。而且，要注意很少有使用者會自覺得想到這一塊，必需由開發者主動尋問和了解使用者的作業才行。

原則三：重要的內容放在 1024x768 內

這個原則很基本，許多人都了解 (還不知道的人要打屁屁！)。問題是出在難遵守.... 開發人員通常都用很大的營幕、開高解析度、然後字型用的小小的，希望一次看多點資訊，方便開發。這樣的習慣長期下來，一不小心就會發生設計的網頁常常需要 scroll (甚至是左右 scroll)。

除非你的網頁是設計給 power user，而且是配備比較好的營幕。不然開發時建議固定開個 1024x748 的 browser 來檢視網頁的呈現，比較符合一般使用者的畫面大小。(安裝 firefox 的 web developer plugin，然後大小設 1024x748 (不是 768，因為要扣掉 toobar和 menu 的高度)) 瀏覽器的大小有了，接下來就是將重要的內容、用戶最關心的事情，盡量放在網頁上半段，一般來說，左上角是人瀏覽的起點，從那裡開始最好。目的就是讓用戶最少的力氣找到他要的東西，而不是 scroll 老半天才看的到。

原則四：改變資料狀態用按鈕，瀏覽資料用連結

當你做的功能是 改變資料狀態時，網頁上要用按鈕來呈現。如果是資料間瀏覽，則用連結來呈現。什麼是改變資料狀態？比方說刪除資料、送出表單、移動位置、切換...等等功能。這些功能用按鈕比較洽當，因為按鈕有 "動作" 的感覺 (按下後再彈上)、有視覺上的 feedback。當然在 ajax 的風潮之下，按鈕漸漸越用越少了，不少地方開始用連結來替代。不過重點還是一樣，要有視覺上的 feedback，例如加些 animation, yellow fade out之類的都可以。

另一方面，瀏覽資料則一定是用連結，千萬不要用按鈕替代。這聽起來很白吃吧？但就是有新手會犯這種錯 (三年前我自個兒也常犯...)

原則五：慎防預覽頁面

當設計多步驟網頁時，例如結帳的功能，中間多半會夾一個預覽的頁面。預覽的網頁原本是好意，讓使用者可以再完成前，再確認、考慮一番。但偏偏很多用戶會把他當做 "已完成" 的網頁，造成常會有客戶來電，抱怨明明已經完成了，卻沒成交。

為避免這類常犯的錯誤，建議預覽的畫面正上方要加上大剌剌的 "完成按鈕" (可用顏色/大小/字型來醒目) 提醒使用者，要按了才會生效。如果版面許可，可以再加上 process train (另一說法是 process funnel) 就是常見的按順序導引：(1) -> (2) -> (3) -> done，這樣就更穩了。現在 Ajax 技術發達，也可以考慮用 "即時預覽" 取代掉舊的換頁預覽，這樣既方便又不會出錯。

簡單易懂的說明，受教了~

"UCDChina.com - 白鴉":http://ucdchina.com/blog/?p=351

界面的文字就好像一個人的談吐，文字給用戶的感覺不單單只是一個「信息」的傳達，他還關乎用戶對於產品的情感印象和「產品氣質」的理解。

能否系統化的把「內容優化」像「體驗」一樣分層次的理解？

首先，界面上的文字應該做到：清楚而準確的向用戶傳達信息。
接下來，界面上的文字應該便於用戶閱讀並快速理解其含義。
然後，整個產品不同位置的文字應該統一
最後，界面上的文字應該具備該產品需要傳達給用戶的氣質。
還有，文字的視覺設計應該完整的融入整個產品視覺中。
再有，儘量讓文字自身可以起到「推銷」產品的作用，而且「推銷」的不只是產品氣質。

界面上的文字看似是一個很細小的東西，實際上他蘊藏著很多的價值並且在潛移默化為產品帶來好的或者不好的利益。中國人說「察言觀色」，我想「言語」的表達對於中國用戶的觸動應該會更加的明顯。

用字遣詞，是一門學問。

■ 延伸閱讀

* "創業產品的界面文字優化":http://uicom.net/blog/?p=653
* "像聰明女孩穿衣服那樣設計網頁文字":http://ucdchina.com/blog/?p=335
* "有多少文字可以胡來？！":http://uicom.net/blog/?p=600

"白鴉，以用戶為中心的設計":http://uicom.net/blog/?p=675

4、UED是在作品牌內功，SEO是在作品牌營銷。得分清。

5、品牌不只是靠營銷作出來的，品牌體驗非常關鍵。 品牌的基礎是用戶體驗，營銷需要建立在用戶體驗的基礎上。

6、所以：SEO需要建立在用戶體驗的基礎上，破壞用戶體驗的SEO一定是不好的。
所謂「SEO需要建立在用戶體驗的基礎上」是指：沒有好的用戶體驗再SEO也白搭；也指：產品有多少seo就作多少，不要越界。別把搜索「小姐包夜」的網民帶到一個淑女培訓網站上去。

7、UED可以並且應該幫助SEO，但不能是損失用戶體驗去幫助SEO.

這個道理就跟「產品 vs. 行銷」一樣：

老王賣瓜，自賣自誇，不甜的瓜，再怎麼自誇，消費者只會上當一次。