SlideShare une entreprise Scribd logo
1  sur  27
Web表單設計讀書會 即時驗證 Ch9/多餘輸入 Ch10 / 額外輸入 Ch11 2011.3.7 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530
Ch9 即時驗證
Ch9 即時驗證 功能 確認答案是否合適 建議有效答案 以即時更新幫助人們控制答案在可接受的範圍內 使用情境: 需要依照user的回答來提供幫助 答案範圍太廣,無法做成一般介面來防呆 驗證時機: user在輸入框中開始時 繼續下一項輸入時 停止輸入(放棄或完成) User 不用等到送出表單才知道自己填錯了。
Ch9 即時驗證 確認user的答案 例:新帳戶的使用者名稱系統無法事先提示,user也無法憑常識判斷,需等使用者輸入後,才能知道此帳號是否已經被使用 例:新帳戶的密碼,有多種不同的安全等級(數字、符號、大寫等),需一步步引導user
Submit 後才能得到回應 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
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 多餘輸入 ,[object Object]
去除問題
調整問題順序,在更好的時機提出問題
自動推斷出答案
需要和相關團隊協商後決定哪些問題可以達成商業目標,不宜省略?,[object Object]
自動推斷出答案的實例美國運通卡 – 34或37開頭 Master – 51~55開頭 Visa – 4開頭
Ch10 多餘輸入 ,[object Object],以郵遞區號推斷程式和州別1.反而需要很多提示2.海外客戶無法使用
Ch10 多餘輸入 ,[object Object]
替user回答複雜的問題
可能考慮商業利益,但儘量為user著想eBay給賣家出貨的表單
Ch10 多餘輸入 ,[object Object]
或提供”不想回答”的選項,以避免驗証的複雜性
如果一定要user回答,需解釋理由,[object Object]
例:自動叫出user上次購買的信用卡號、地址、郵寄方式
可增加user對該網站的『黏性』,[object Object]
Ch11 額外輸入 ,[object Object]

Contenu connexe

En vedette (7)

從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas
 
前端界流傳的神奇招式
前端界流傳的神奇招式前端界流傳的神奇招式
前端界流傳的神奇招式
 
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
 
Sublime Text 入門
Sublime Text 入門Sublime Text 入門
Sublime Text 入門
 
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
 
Sublime text 極速應用教學
Sublime text 極速應用教學Sublime text 極速應用教學
Sublime text 極速應用教學
 

Web Form Design 讀書會 Ch9-11