SlideShare a Scribd company logo
1 of 18
Download to read offline
網站易用性分享

Web 表單設計

            Miya 張湘綺
           2012/04/18


                        1
Web 表單設計:點石成金的藝術

(美)
Web Form Design Filling in the Blanks




                                        2
   漫長旅途的最後一步也是最重要的一步
   主宰著電子商務如何達成交易
   註冊表單是會員資格的守門人
   通過資料輸入, user 可以貢獻或是分享訊息以增
    加網站內容




                                3
讓人不知不覺、很輕鬆
無壓力的填寫並完成




             4
太多框線 or 交替背景組成的表格
帶來大量視覺噪音,分散注意力




               5
太多框線 or 交替背景組成的表格
帶來大量視覺噪音,分散注意力




               6
7
   許多表單經過再設計,完成率往往提高 10~40%


    如果表單填寫完成代表著「完成
    新銷售」、「獲得新用戶」

    → 改善表單設計 =     提高利潤


                               8
   研究方法:                             異動:
    a.   可用性測試                             a. 引導登入註冊文字說明
    b.   實地測試
    c.   顧客支持
    d.   眼動追蹤
    e.   Web 慣例 (Design Pattern)
                                          效益:
                                           a. 網站年收增加 3 億美元




                                                             9
   結合商業目標、用戶需求、表單情境
   評估是否優異:
    透過可用性測試、各項網站關鍵指標




                       10
•   保持簡單慣性的視覺動向
•   輸入框間距要能呼吸不鬆散
    margin: .75em 0

•   有步驟指引是好事,但不要騙人 。
    可使用籠統的、沒有明確期待的步驟表示

•   降低干擾與噪音
•   增加填寫用戶體驗
    表單順序 tabindex 、點選範圍 包 label




                                  11
12
   齊左
     優:
     缺:時間長 ( 眼動時間 500 毫秒、次數多
         完成率低

   齊右
      優:時間中 ( 眼動時間 170~240 毫秒 )
       缺:畫面過長,資料欄位多不適用


   齊頂
     優:時間短 ( 眼動時間 50 毫秒 )
        完成率高 ( 超過 10%)
     缺:畫面過長,資料欄位多不適用
                             13
   輸入框長度,暗示了人們如何回答問題
    ex: 郵遞區號 3 碼、 email 或地址很長

   如果無法給予適當暗示,請使用一致的長度
   必填項目要使用*標示並且說明,或告知哪個為選填
完成速度最快,但最容易出錯




1. 位置要讓 user 快速可操作
2. 按鈕樣式要有「主」「從」區
分
   眼動追蹤研究出:人們看到表單時,會直接跳到第
    一個輸入框而忽略上方提示文案。
   提示方法:
     只寫簡短最必要少量的文案
     更多輔助提示,用「即時檢核」或是「送出後」再提示訊息表示
•   建構對話
    用自然的、統一的對話,確保溝通一致性,適時適切的給予回饋。
•   內容組織有意義
    問題盡量簡潔。
    (必填的放主要步驟,選擇性的營銷問題用選填放最後)
•   歸納區別
    用最少的視覺訊息,保持焦點在表單內容而不是形式。
•   清晰的視覺動線
•   別的表單 / 流程,不一定適合自己


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

More Related Content

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

网站用户体验提升研究
网站用户体验提升研究网站用户体验提升研究
网站用户体验提升研究ernestzhong
 
1QPRC_04181
1QPRC_041811QPRC_04181
1QPRC_04181gopro
 
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家悠識學院
 
Startup2.0 a silicon valley story
Startup2.0 a silicon valley storyStartup2.0 a silicon valley story
Startup2.0 a silicon valley storyleanstartupchina
 
VA/VE在半導體業應用
VA/VE在半導體業應用VA/VE在半導體業應用
VA/VE在半導體業應用5045033
 
腾讯大讲堂10 customer engagement
腾讯大讲堂10 customer engagement腾讯大讲堂10 customer engagement
腾讯大讲堂10 customer engagementGeorge Ang
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Sharesuilingbo
 
Ragic 数据库设计入门
Ragic 数据库设计入门Ragic 数据库设计入门
Ragic 数据库设计入门Ragic
 
QM-047-品管圈報告以飛利浦為例
QM-047-品管圈報告以飛利浦為例QM-047-品管圈報告以飛利浦為例
QM-047-品管圈報告以飛利浦為例handbook
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Sharesuilingbo
 
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程Richard Chang
 
資料視覺化與使用者經驗
資料視覺化與使用者經驗資料視覺化與使用者經驗
資料視覺化與使用者經驗彭其捷 Jack
 
Al user guide revised(image) 20111202
Al user guide revised(image) 20111202Al user guide revised(image) 20111202
Al user guide revised(image) 20111202airitilibrary
 
客服管理中心之系統規劃與建構 大葉大學-詹翔霖
客服管理中心之系統規劃與建構 大葉大學-詹翔霖客服管理中心之系統規劃與建構 大葉大學-詹翔霖
客服管理中心之系統規劃與建構 大葉大學-詹翔霖文化大學
 
商業模式創新講座 120406
商業模式創新講座 120406商業模式創新講座 120406
商業模式創新講座 120406CPCRDI
 
商業模式創新講座 120406
商業模式創新講座 120406商業模式創新講座 120406
商業模式創新講座 120406基欽 劉
 
互联网交互设计方法
互联网交互设计方法互联网交互设计方法
互联网交互设计方法loki chen
 
腾讯交互设计方法
腾讯交互设计方法腾讯交互设计方法
腾讯交互设计方法lh4513
 
互联网产品的交互设计方法
互联网产品的交互设计方法互联网产品的交互设计方法
互联网产品的交互设计方法aaronthu
 
互联网产品的交互设计方法
互联网产品的交互设计方法互联网产品的交互设计方法
互联网产品的交互设计方法aaronthu
 

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

网站用户体验提升研究
网站用户体验提升研究网站用户体验提升研究
网站用户体验提升研究
 
1QPRC_04181
1QPRC_041811QPRC_04181
1QPRC_04181
 
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家
[ECX 2015] 數據輔助設計 ─ 大數據的電商使用者體驗研究和方法 ─ 張必勇 / 阿里巴巴 用戶體驗研究專家
 
Startup2.0 a silicon valley story
Startup2.0 a silicon valley storyStartup2.0 a silicon valley story
Startup2.0 a silicon valley story
 
VA/VE在半導體業應用
VA/VE在半導體業應用VA/VE在半導體業應用
VA/VE在半導體業應用
 
腾讯大讲堂10 customer engagement
腾讯大讲堂10 customer engagement腾讯大讲堂10 customer engagement
腾讯大讲堂10 customer engagement
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share
 
Ragic 数据库设计入门
Ragic 数据库设计入门Ragic 数据库设计入门
Ragic 数据库设计入门
 
QM-047-品管圈報告以飛利浦為例
QM-047-品管圈報告以飛利浦為例QM-047-品管圈報告以飛利浦為例
QM-047-品管圈報告以飛利浦為例
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share
 
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
 
資料視覺化與使用者經驗
資料視覺化與使用者經驗資料視覺化與使用者經驗
資料視覺化與使用者經驗
 
Al user guide revised(image) 20111202
Al user guide revised(image) 20111202Al user guide revised(image) 20111202
Al user guide revised(image) 20111202
 
客服管理中心之系統規劃與建構 大葉大學-詹翔霖
客服管理中心之系統規劃與建構 大葉大學-詹翔霖客服管理中心之系統規劃與建構 大葉大學-詹翔霖
客服管理中心之系統規劃與建構 大葉大學-詹翔霖
 
商業模式創新講座 120406
商業模式創新講座 120406商業模式創新講座 120406
商業模式創新講座 120406
 
商業模式創新講座 120406
商業模式創新講座 120406商業模式創新講座 120406
商業模式創新講座 120406
 
互联网交互设计方法
互联网交互设计方法互联网交互设计方法
互联网交互设计方法
 
腾讯交互设计方法
腾讯交互设计方法腾讯交互设计方法
腾讯交互设计方法
 
互联网产品的交互设计方法
互联网产品的交互设计方法互联网产品的交互设计方法
互联网产品的交互设计方法
 
互联网产品的交互设计方法
互联网产品的交互设计方法互联网产品的交互设计方法
互联网产品的交互设计方法
 

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

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