搞企劃

Xexex’s Java 和其他二三事

原則一：思考服務的對象

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

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

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

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

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

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

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

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

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

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

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

原則五：慎防預覽頁面

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

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

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