1

網站易用性分享

Web表單設計

Miya 張湘綺 2012/04/18

2

Web 表單設計：點石成金的藝術

( 美 )Web Form Design Filling in the Blanks

3

漫長旅途的最後一步也是最重要的一步 主宰著電子商務如何達成交易 註冊表單是會員資格的守門人 通過資料輸入， user 可以貢獻或是分享訊息以增

加網站內容

4

讓人不知不覺、很輕鬆無壓力的填寫並完成

5

太多框線 or 交替背景組成的表格帶來大量視覺噪音，分散注意力

6

太多框線 or 交替背景組成的表格帶來大量視覺噪音，分散注意力

7

8

許多表單經過再設計，完成率往往提高 10~40%

如果表單填寫完成代表著「完成新銷售」、「獲得新用戶」

→ 改善表單設計 = 提高利潤

9

研究方法：① 可用性測試② 實地測試③ 顧客支持④ 眼動追蹤⑤ Web 慣例 (Design Pattern)

異動：① 引導登入註冊文字說明

效益：① 網站年收增加 3 億美元

10

結合商業目標、用戶需求、表單情境 評估是否優異：

透過可用性測試、各項網站關鍵指標

11

1. 保持簡單慣性的視覺動向2. 輸入框間距要能呼吸不鬆散

margin: .75em 0

3. 有步驟指引是好事，但不要騙人。可使用籠統的、沒有明確期待的步驟表示

4. 降低干擾與噪音5. 增加填寫用戶體驗

表單順序 tabindex 、點選範圍 包 label

12

13

齊左

齊右

齊頂 優：時間短 ( 眼動時間 50 毫秒 )

完成率高 ( 超過 10%) 缺：畫面過長，資料欄位多不適用

優： 缺：時間長 ( 眼動時間 500 毫秒、次數多 )

完成率低

優：時間中 ( 眼動時間 170~240 毫秒 )

缺：畫面過長，資料欄位多不適用

輸入框長度，暗示了人們如何回答問題ex: 郵遞區號 3 碼、 email 或地址很長

如果無法給予適當暗示，請使用一致的長度 必填項目要使用＊標示並且說明，或告知哪個為選填

完成速度最快，但最容易出錯

1. 位置要讓 user 快速可操作2. 按鈕樣式要有「主」「從」區分

眼動追蹤研究出：人們看到表單時，會直接跳到第一個輸入框而忽略上方提示文案。

提示方法： 只寫簡短最必要少量的文案 更多輔助提示，用「即時檢核」或是「送出後」再提示訊息表示

17

1. 建構對話用自然的、統一的對話，確保溝通一致性，適時適切的給予回饋。

2. 內容組織有意義問題盡量簡潔。（必填的放主要步驟，選擇性的營銷問題用選填放最後）

3. 歸納區別用最少的視覺訊息，保持焦點在表單內容而不是形式。

4. 清晰的視覺動線5. 別的表單 / 流程，不一定適合自己