Suche senden
Hochladen
Web Form Design 讀書會 Ch9-11
•
Als PPTX, PDF herunterladen
•
1 gefällt mir
•
473 views
知世‧安索帕 台北 (使用經驗設計中心)
Folgen
Design
Business
Melden
Teilen
Melden
Teilen
1 von 27
Jetzt herunterladen
Empfohlen
Web Form Design 讀書會 Ch7-8
Web Form Design 讀書會 Ch7-8
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch5-6
Web Form Design 讀書會 Ch5-6
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch3-4
Web Form Design 讀書會 Ch3-4
知世‧安索帕 台北 (使用經驗設計中心)
Rocket Surgery Made Easy 讀書會: Ch1~4
Rocket Surgery Made Easy 讀書會: Ch1~4
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch12-14
Web Form Design 讀書會 Ch12-14
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch1-2
Web Form Design 讀書會 Ch1-2
知世‧安索帕 台北 (使用經驗設計中心)
偷呷步的網站快速入門
偷呷步的網站快速入門
Anna Su
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Empfohlen
Web Form Design 讀書會 Ch7-8
Web Form Design 讀書會 Ch7-8
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch5-6
Web Form Design 讀書會 Ch5-6
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch3-4
Web Form Design 讀書會 Ch3-4
知世‧安索帕 台北 (使用經驗設計中心)
Rocket Surgery Made Easy 讀書會: Ch1~4
Rocket Surgery Made Easy 讀書會: Ch1~4
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch12-14
Web Form Design 讀書會 Ch12-14
知世‧安索帕 台北 (使用經驗設計中心)
Web Form Design 讀書會 Ch1-2
Web Form Design 讀書會 Ch1-2
知世‧安索帕 台北 (使用經驗設計中心)
偷呷步的網站快速入門
偷呷步的網站快速入門
Anna Su
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas
Anna Su
前端界流傳的神奇招式
前端界流傳的神奇招式
Anna Su
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
Anna Su
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Kuro Hsu
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Sublime text 極速應用教學
Sublime text 極速應用教學
Amos Lee
Weitere ähnliche Inhalte
Andere mochten auch
從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas
Anna Su
前端界流傳的神奇招式
前端界流傳的神奇招式
Anna Su
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
Anna Su
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Kuro Hsu
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Sublime text 極速應用教學
Sublime text 極速應用教學
Amos Lee
Andere mochten auch
(7)
從一個超簡單範例開始學習 Canvas
從一個超簡單範例開始學習 Canvas
前端界流傳的神奇招式
前端界流傳的神奇招式
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
Sublime Text 入門
Sublime Text 入門
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Sublime text 極速應用教學
Sublime text 極速應用教學
Web Form Design 讀書會 Ch9-11
1.
Web表單設計讀書會 即時驗證 Ch9/多餘輸入
Ch10 / 額外輸入 Ch11 2011.3.7 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com#3530
2.
Ch9 即時驗證
3.
Ch9 即時驗證 功能
確認答案是否合適 建議有效答案 以即時更新幫助人們控制答案在可接受的範圍內 使用情境: 需要依照user的回答來提供幫助 答案範圍太廣,無法做成一般介面來防呆 驗證時機: user在輸入框中開始時 繼續下一項輸入時 停止輸入(放棄或完成) User 不用等到送出表單才知道自己填錯了。
4.
Ch9 即時驗證 確認user的答案
例:新帳戶的使用者名稱系統無法事先提示,user也無法憑常識判斷,需等使用者輸入後,才能知道此帳號是否已經被使用 例:新帳戶的密碼,有多種不同的安全等級(數字、符號、大寫等),需一步步引導user
5.
Submit 後才能得到回應 Wroblewski,
Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
6.
Ch9 即時驗證 設定username,
填寫的同時得到回應 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
7.
Ch9 即時驗證 密碼強度
每一項都驗證 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
8.
Ch9 即時驗證 驗證的時機與密集程度
- 是否需要每個欄位都驗證? 確定User已完成當下的動作再驗證。 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
9.
Ch9 即時驗證 建議有效的答案
當答案太多無法做成下拉選單或單選鈕 智慧型輸入、自動完成 將輸入轉換成正確格式 例:555-123-1234 ->(555)123-1234 Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
10.
Ch9 即時驗證 限制答案範圍例:自動計算尚可填字數的留言框需即時更新
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
11.
Ch10 多餘輸入
12.
13.
去除問題
14.
調整問題順序,在更好的時機提出問題
15.
自動推斷出答案
16.
17.
自動推斷出答案的實例美國運通卡 – 34或37開頭
Master – 51~55開頭 Visa – 4開頭
18.
19.
20.
替user回答複雜的問題
21.
可能考慮商業利益,但儘量為user著想eBay給賣家出貨的表單
22.
23.
或提供”不想回答”的選項,以避免驗証的複雜性
24.
25.
例:自動叫出user上次購買的信用卡號、地址、郵寄方式
26.
27.
28.
也必須讓user可以移除,直到剩下原始的一項專案管理網站: Basecamp http://www.104.com.tw
29.
30.
日曆是最常見的例子
31.
當選項會跨月而非單日時,顯示兩個月以上比單月好
32.
日曆小圖示可預告即將發生的事
33.
以click/mouseover/focus啟動皆可
34.
35.
通常用於進階選項(不常使用的項目)
36.
因為獨佔畫面,必須可以關閉(cancel)
37.
38.
Ch11 額外輸入 eBay:
賣家可自行增減拍賣品表單的輸入項目
39.
40.
太多額外選項時:將選項分子類別YouTube: 選擇影片類別
41.
Ch11 額外輸入 Renkoo:
挑選event類型
42.
問題與討論 http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/
Jetzt herunterladen