Web Form Design 讀書會 Ch9-11

Web表單設計讀書會即時驗證 Ch9/ 多餘輸入 Ch10 / 額外輸入 Ch11

2011.3.7

鄒心瑜 Hsinyu Chou

[email protected] #3530

mailto:[email protected]

Ch9 即時驗證

Ch9 即時驗證

• 功能

– 確認答案是否合適

– 建議有效答案

– 以即時更新幫助人們控制答案在可接受的範圍內

• 使用情境：

– 需要依照user的回答來提供幫助

– 答案範圍太廣，無法做成一般介面來防呆

• 驗證時機：

– user在輸入框中開始時

– 繼續下一項輸入時

– 停止輸入(放棄或完成)

User 不用等到送出表單才知道自己填錯了。

Ch9 即時驗證

• 確認user的答案

– 例：新帳戶的使用者名稱

系統無法事先提示，user也無法憑常識判斷，

需等使用者輸入後，才能知道此帳號是否已經被使用

– 例：新帳戶的密碼，有多種不同的安全等級(數字、符號、大

寫等)，需一步步引導user

Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.

Submit 後才能

得到回應

Ch9 即時驗證

設定username, 填寫的同時得到回應


Ch9 即時驗證


密碼強度每一項都驗證

Ch9 即時驗證

• 驗證的時機與密集程度 - 是否需要每個欄位都驗證？

確定User已完成當下的動作再驗證。


Ch9 即時驗證

• 建議有效的答案

– 當答案太多無法做成下拉選單或單選鈕

– 智慧型輸入、自動完成

– 將輸入轉換成正確格式例:555-123-1234 →(555)123-1234


Ch9 即時驗證

• 限制答案範圍

例：自動計算尚可填字數的留言框

需即時更新


Ch10 多餘輸入

Ch10 多餘輸入

• 讓問題更少

– 去除問題

– 調整問題順序，在更好的時機提出問題

– 自動推斷出答案

– 需要和相關團隊協商後決定

哪些問題可以達成商業目標，不宜省略？

Ch10 多餘輸入

• 讓問題更少

– 自動推斷出答案的實例

美國運通卡 – 34或37開頭

Master – 51~55開頭

Visa – 4開頭

Ch10 多餘輸入

– 自動推斷出答案的實例

以郵遞區號推斷程式和州別

1.反而需要很多提示

2.海外客戶無法使用

Ch10 多餘輸入

• 智慧型默認(default)

– 替user回答複雜的問題

– 可能考慮商業利益，但儘量為user著想

eBay給賣家出貨的表單

Ch10 多餘輸入

– 或提供”不想回答”的選項，以避免驗証的複雜性

– 如果一定要user回答，需解釋理由

– 某些問題不設預設答案，避免壓力和爭議

Ch10 多餘輸入

• 個人化默認

– 例：自動叫出user上次購買的信用卡號、地址、郵寄方式

– 可增加user對該網站的『黏性』

Ch11 額外輸入

Ch11 額外輸入

• 即時增加：user自行依需要增加輸入項目

– 也必須讓user可以移除，直到剩下原始的一項

專案管理網站: Basecamp http://www.104.com.tw

Ch11 額外輸入

– 新增的區塊需有良好標示，減低頁面跳動的衝擊(用動態輔助是不錯的方法)

Ch11 額外輸入

• 層疊顯示：大量的額外選項

– 日曆是最常見的例子

•當選項會跨月而非單日時，顯示兩個月以上比單月好

•日曆小圖示可預告即將發生的事

•以click/mouseover/focus啟動皆可

•日曆開放時，其他輸入最好disable

Ch11 額外輸入

• 獨佔user注意力的輸入：燈箱(Modal Overlay Window)

– 通常用於進階選項(不常使用的項目)

– 因為獨佔畫面，必須可以關閉(cancel)

– 最重要的是，燈箱以外的選項禁止輸入

Ch11 額外輸入

行事曆通知信設定

Ch11 額外輸入eBay: 賣家可自行增減拍賣品表單的輸入項目

Ch11 額外輸入

• 循序漸進

– 太多額外選項時：將選項分子類別

YouTube: 選擇影片類別

Ch11 額外輸入

Renkoo: 挑選event類型

問題與討論

http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/