Embed Size (px)
Citation preview
Ch1 表單的設計
• 表單很討厭！
– 是『由內而外』，而非『由外而內』的過程
• 表單的角色
– 表單代替了店員、朋友、銀行櫃員、政府辦事員
– 付款、分享、註冊
– 表單是網站和使用者的溝通之門，卻也成了雙方的阻礙
• 表單設計的影響
– 經過改善的表單，完成率提高10%~40%
– 這個百分比可能代表新客戶、利潤與KPI
– 對話
Ch1 表單的設計YouTube 上載表單-每天有70000支影片上載
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch1 表單的設計
• 成功案例一：2004 eBay UX 團隊 –註冊表單再設計
– 發現問題與機會
– 該用什麼方法？收集哪些數據？
· 可用性測試：列出錯誤或問題、完成率、花費時間
· 實地測試：觀察人們在辦公室和家中與表單互動
· 客戶支援：統計OS與browser、問題類型與數量、解決方法
· 網站追蹤：完成率、放棄點、已填和未填的資料(tracking & log)
· 眼動追蹤：眼球固定的位置與時間長度
· Web慣例：從網路上歸納普遍的模式、針對問題的獨特解法
Ch1 表單的設計2004 eBay 註冊表單再設計
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch1 表單的設計
• 成功案例二：電子商務網站，應該要求User註冊嗎？
– 只有5個元素的表單也能阻礙購買行為！在結帳前出現登錄，75%放棄購買Email, Password, Login, Register, Forget password
– User只想填付款與收到貨物的必要資訊姓名, 信用卡, 地址, 電話
– 把『註冊(Register)』改為『繼續(Continue)』購買行為增加45%也就是不需立即開帳戶Email, Password, Login, Continue
– 當User成為常客後可再補註冊
Ch1 表單的設計
• 如何設計優秀表單
– 考慮商業目標、用戶需求、表單情境
• 設計原則
– 減少痛苦
– 說明填寫完成路徑 (e.g.步驟1,2,3; 對齊方式)
– 考慮情境
– 確保一致溝通 (e.g.必填/選填 )
• 設計模式(Design Pattern)
解決方案因目標、制約因素而變化
Ch2 表單的組織
• 選取問題
– 想謹慎優化表單，應當測試每個問題
『還有沒有可以刪掉的問題？』
– 紙本表單電子化時，應刪掉已過時的問題
– 所有有關團隊要共同選取表單上的問題，統一口徑- 整合Stakeholder的需求
• 先考慮人，再考慮像素
– User關心的是，在此情境下，為何要回答這些問題
Ch2 表單的組織
• 形成更好問題的四大策略：『保留、刪減、延遲、解釋』
– 保留好問題 – User想回答，並網站的目標一致
– 刪減不需馬上得到答案，或可用其他方法得到答案的問題
– 延遲發問，直到問題不多餘、沒有侵略性
– 解釋對公司有價值，但User不想回答的問題
Ch2 表單的組織
• 構建對話
– 對話，而不是盤問
– 標籤(label)是表單提出問題的要素，盡量用自然的語言
– 要使用句子或是簡短名詞，端看哪一種比較清晰明瞭
Wroblewski, Luke. 2008. Web Form Design:
Filling In the Blanks. New York: Rosenfeld Media.
美國Yahoo註冊表單
Ch2 表單的組織
• 內容的組織
群組與頁數
– 可將問題分成有意義的群組
– 可以單頁或多頁
· 如果表單問題不多，且自然分成若干主題 --> 一頁
· 如果表單包含大量問題，同時有若干主題 --> 多頁
· 如果表單包含大量問題，但只有一個主題 --> 較長的一頁
– 主題之間要有適當的間斷與解釋
Wroblewski, Luke. 2008. Web Form Design:
Filling In the Blanks. New York: Rosenfeld Media.
Redfin購屋表單
這份表單共有8頁，每個段落都有
適當的說明與回應。
Ch2 表單的組織
• 內容的組織
問題的順序
– 較具侵略性的問題放在最後
– 透過Web慣例調查，來學習特定領域優良網站的設計模式
(如電子商務)
舉例
· 第一頁：登錄
· 第二頁：個人資料
· 第三頁：送貨方式偏好
– 不要完全複製
Ch2 表單的組織
• 歸納區別
用適量的視覺元素來區別問題群組
– 表單的表現形式，要與內容相符
框線 底色 對齊 字體 標註
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
eBay Express 付款
問題與討論http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/
