Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
網站易用性分享Web 表單設計            Miya 張湘綺           2012/04/18                        1
Web 表單設計:點石成金的藝術(美)Web Form Design Filling in the Blanks                                        2
   漫長旅途的最後一步也是最重要的一步   主宰著電子商務如何達成交易   註冊表單是會員資格的守門人   通過資料輸入, user 可以貢獻或是分享訊息以增    加網站內容                             ...
讓人不知不覺、很輕鬆無壓力的填寫並完成             4
太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力               5
太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力               6
7
   許多表單經過再設計,完成率往往提高 10~40%    如果表單填寫完成代表著「完成    新銷售」、「獲得新用戶」    → 改善表單設計 =     提高利潤                               8
   研究方法:                             異動:    a.   可用性測試                             a. 引導登入註冊文字說明    b.   實地測試    c.   顧客...
   結合商業目標、用戶需求、表單情境   評估是否優異:    透過可用性測試、各項網站關鍵指標                       10
•   保持簡單慣性的視覺動向•   輸入框間距要能呼吸不鬆散    margin: .75em 0•   有步驟指引是好事,但不要騙人 。    可使用籠統的、沒有明確期待的步驟表示•   降低干擾與噪音•   增加填寫用戶體驗    表單順...
12
   齊左     優:     缺:時間長 ( 眼動時間 500 毫秒、次數多         完成率低   齊右      優:時間中 ( 眼動時間 170~240 毫秒 )       缺:畫面過長,資料欄位多不適用   齊頂...
   輸入框長度,暗示了人們如何回答問題    ex: 郵遞區號 3 碼、 email 或地址很長   如果無法給予適當暗示,請使用一致的長度   必填項目要使用*標示並且說明,或告知哪個為選填
完成速度最快,但最容易出錯1. 位置要讓 user 快速可操作2. 按鈕樣式要有「主」「從」區分
   眼動追蹤研究出:人們看到表單時,會直接跳到第    一個輸入框而忽略上方提示文案。   提示方法:     只寫簡短最必要少量的文案     更多輔助提示,用「即時檢核」或是「送出後」再提示訊息表示
•   建構對話    用自然的、統一的對話,確保溝通一致性,適時適切的給予回饋。•   內容組織有意義    問題盡量簡潔。    (必填的放主要步驟,選擇性的營銷問題用選填放最後)•   歸納區別    用最少的視覺訊息,保持焦點在表單內容...
[書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks
Upcoming SlideShare
Loading in …5
×

[書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks

3,900 views

Published on

  • Be the first to comment

[書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks

  1. 1. 網站易用性分享Web 表單設計 Miya 張湘綺 2012/04/18 1
  2. 2. Web 表單設計:點石成金的藝術(美)Web Form Design Filling in the Blanks 2
  3. 3.  漫長旅途的最後一步也是最重要的一步 主宰著電子商務如何達成交易 註冊表單是會員資格的守門人 通過資料輸入, user 可以貢獻或是分享訊息以增 加網站內容 3
  4. 4. 讓人不知不覺、很輕鬆無壓力的填寫並完成 4
  5. 5. 太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力 5
  6. 6. 太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力 6
  7. 7. 7
  8. 8.  許多表單經過再設計,完成率往往提高 10~40% 如果表單填寫完成代表著「完成 新銷售」、「獲得新用戶」 → 改善表單設計 = 提高利潤 8
  9. 9.  研究方法:  異動: a. 可用性測試 a. 引導登入註冊文字說明 b. 實地測試 c. 顧客支持 d. 眼動追蹤 e. Web 慣例 (Design Pattern)  效益: a. 網站年收增加 3 億美元 9
  10. 10.  結合商業目標、用戶需求、表單情境 評估是否優異: 透過可用性測試、各項網站關鍵指標 10
  11. 11. • 保持簡單慣性的視覺動向• 輸入框間距要能呼吸不鬆散 margin: .75em 0• 有步驟指引是好事,但不要騙人 。 可使用籠統的、沒有明確期待的步驟表示• 降低干擾與噪音• 增加填寫用戶體驗 表單順序 tabindex 、點選範圍 包 label 11
  12. 12. 12
  13. 13.  齊左  優:  缺:時間長 ( 眼動時間 500 毫秒、次數多 完成率低 齊右  優:時間中 ( 眼動時間 170~240 毫秒 ) 缺:畫面過長,資料欄位多不適用 齊頂  優:時間短 ( 眼動時間 50 毫秒 ) 完成率高 ( 超過 10%)  缺:畫面過長,資料欄位多不適用 13
  14. 14.  輸入框長度,暗示了人們如何回答問題 ex: 郵遞區號 3 碼、 email 或地址很長 如果無法給予適當暗示,請使用一致的長度 必填項目要使用*標示並且說明,或告知哪個為選填
  15. 15. 完成速度最快,但最容易出錯1. 位置要讓 user 快速可操作2. 按鈕樣式要有「主」「從」區分
  16. 16.  眼動追蹤研究出:人們看到表單時,會直接跳到第 一個輸入框而忽略上方提示文案。 提示方法:  只寫簡短最必要少量的文案  更多輔助提示,用「即時檢核」或是「送出後」再提示訊息表示
  17. 17. • 建構對話 用自然的、統一的對話,確保溝通一致性,適時適切的給予回饋。• 內容組織有意義 問題盡量簡潔。 (必填的放主要步驟,選擇性的營銷問題用選填放最後)• 歸納區別 用最少的視覺訊息,保持焦點在表單內容而不是形式。• 清晰的視覺動線• 別的表單 / 流程,不一定適合自己 17

×