Your SlideShare is downloading. ×
  • Like
[書摘] Web表單設計:點石成金的藝術 (美)Web Form Design Filling in the Blanks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 3,223 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,223
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 網站易用性分享Web 表單設計 Miya 張湘綺 2012/04/18 1
  • 2. Web 表單設計:點石成金的藝術(美)Web Form Design Filling in the Blanks 2
  • 3.  漫長旅途的最後一步也是最重要的一步 主宰著電子商務如何達成交易 註冊表單是會員資格的守門人 通過資料輸入, user 可以貢獻或是分享訊息以增 加網站內容 3
  • 4. 讓人不知不覺、很輕鬆無壓力的填寫並完成 4
  • 5. 太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力 5
  • 6. 太多框線 or 交替背景組成的表格帶來大量視覺噪音,分散注意力 6
  • 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