web form design 讀書會 ch9-11
TRANSCRIPT
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, 填寫的同時得到回應
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch9 即時驗證
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
密碼強度 每一項都驗證
Ch9 即時驗證
• 驗證的時機與密集程度 - 是否需要每個欄位都驗證？
確定User已完成當下的動作再驗證。
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch9 即時驗證
• 建議有效的答案
– 當答案太多無法做成下拉選單或單選鈕
– 智慧型輸入、自動完成
– 將輸入轉換成正確格式 例:555-123-1234 →(555)123-1234
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch9 即時驗證
• 限制答案範圍
例：自動計算尚可填字數的留言框
需即時更新
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
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/