SlideShare a Scribd company logo
1 of 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]

More Related Content

Viewers also liked

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

Viewers also liked (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