Sunday, June 22, 2008

網頁 Usability

網頁應用程式 Usability 筆記

原則一:思考服務的對象

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

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

購物網站是大家熟悉的例子,大家都見多了。但是如果換個 domain 就要多花心思去了解了。比方說我的工作是服務醫院醫學相關的研究,涉及到的人員有護士、醫生、研究員、實驗室、計畫負責人...等等。服務內容則有病人收樣管理、實驗管理、秏材進銷存、問卷調查...等等。遇到這類不熟悉的 domain 時,記得談需求時要多尋問:分辨他在這個功能上屬於 end user 還是 power user?他多久用一次這個功能?每天用還是一個月用一次?先替這些用戶簡單歸個類,大方向捉對了,未來做出的網站用戶用的就順手。
原則二:第一頁要放用戶最想做,最常做的事

這個原則乍聽之下很自然、也很直覺... 但我們 team 的大多數成員 (包含我自己) 就是沒有辦法做到這一點。我們的專案多屬內部使用,而開發部門並沒有設立專人設計網頁,所以從網頁設計到後端資料全都工程師自己來。工程師拿到案子,頭腦就開始直覺思考後端流程怎麼設計,然後由後端往前端推,網頁的流程就會和後端呈現一比一的關係。比方說要做一個管理稽核案的功能,有新增修改查詢等等功能。依典型的工程師思維,第一頁就做了個查詢案子的表單和新增案子的連結,下了查詢條件後再列出相關案子的網頁。這種 "第一頁" 也不能說工程師沒按需求來做... 只是剛進去時除了表單,就是一片空白,什麼都沒有。使用者一進來就得去想、得去回憶要下什麼查詢條件,才能找到他要的東西。這樣還真有點難用...

要提升 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 技術發達,也可以考慮用 "即時預覽" 取代掉舊的換頁預覽,這樣既方便又不會出錯。
最後,我們來看一個客製元件提升 usability 的實際例子

需求:用戶需替病人的樣本做稽核 (有無漏收或誤收),一個稽核案約含 100 個病人。每個病人的稽核狀態分別為 未稽核、已稽核、稽核不過。

用戶 profile:用戶為稽核員,是內部的使用者,可以被訓練。因此屬 power user

使用頻率:約每週使用,一次約稽核數十人,屬例行性作業。

按上面的需求,如果用傳統的 html 元件設計,我們會得到:

上圖用表格的方式呈現 100 個病人資料。而最右邊稽核的狀態則採下拉式選單表示 (當然這裡也能用 Radio Button,但是三個選項會太寬,版面擠不下)。在下拉式選單中挑選欲變更的狀態時,背後會用 ajax 的方式直接更新後端的資料。一般來說寫到這樣已經算很方便了,最少用戶不用為了切換狀態而 submit 一個個的 html form。

雖然不錯,但是還有兩個缺點:第一,每次切換下拉式選單都需要兩次的 click。第二,當 100 個 病人直直排下來,狀態用文字表示時,要分辨出 未稽核、已稽核 等狀態其實還蠻花的。

由於稽核員屬 power user,因此我們不一定要使用簡單的 html 基本元件,我們可以客製元件:

上圖稽核的狀態改用兩個圖示表示,兩個都是灰的表示尚未稽核,綠色表示已稽核,紅色則表示稽核不過。這樣一來,即使 table 上排滿滿了 100 個病人,也可以很快看出哪些病人還沒稽核,哪些是稽核有問題的。要切換狀態,只要在欲切換的圖示上點擊一次就行了 (有點類似常見的評比星星),而背後也是直接用 ajax 更新後端的資料。

當然,這樣的元件用戶第一次看到會傻眼... 無從下手,不過只要稍微 demo 一下,之後作業就很順暢囉。

至於要製作這樣的客製元件... 呃... 要看各位用什麼技術寫了... 用 Wicket 的話,一個幾十行的 .java 就搞定了,也不用寫什麼 javascript 或是 xml。其他的技術就得慢慢磨了吧... 採用容易寫客製元件的 framework 真的好處很多,寫元件不僅快又簡單,也讓你有更多的時間和精力花在構思更好的 usability 上。

來源
http://www.javaworld.com.tw/roller/ingramchen/entry/2007_11_18_WebAppUsabilityNotes