Web Form Design 讀書會 Ch9-11
Transcript of Web Form Design 讀書會 Ch9-11
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.
Ch11 額外輸入
• 層疊顯示:大量的額外選項
– 日曆是最常見的例子
•當選項會跨月而非單日時,顯示兩個月以上比單月好
•日曆小圖示可預告即將發生的事
•以click/mouseover/focus啟動皆可
•日曆開放時,其他輸入最好disable
Ch11 額外輸入
• 獨佔user注意力的輸入:燈箱(Modal Overlay Window)
– 通常用於進階選項(不常使用的項目)
– 因為獨佔畫面,必須可以關閉(cancel)
– 最重要的是,燈箱以外的選項禁止輸入