Web Form Design 讀書會 Ch1-2
Upcoming SlideShare
Loading in...5
×
 

Web Form Design 讀書會 Ch1-2

on

  • 777 views

 

Statistics

Views

Total Views
777
Views on SlideShare
777
Embed Views
0

Actions

Likes
1
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Form Design 讀書會 Ch1-2 Web Form Design 讀書會 Ch1-2 Presentation Transcript

    • Web表單設計讀書會
      表單的設計 Ch1/表單的組織 Ch2
      2011.1.17
      鄒心瑜Hsinyu Chou
      hsinyu.chou@isobar.com#3530
    • 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)是表單提出問題的要素,盡量用自然的語言
      要使用句子或是簡短名詞,端看哪一種比較清晰明瞭
    • 美國Yahoo註冊表單
      Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
    • Ch2 表單的組織
      內容的組織
      群組與頁數
      可將問題分成有意義的群組
      可以單頁或多頁
      • 如果表單問題不多,且自然分成若干主題 --> 一頁
      • 如果表單包含大量問題,同時有若干主題 --> 多頁
      • 如果表單包含大量問題,但只有一個主題 --> 較長的一頁
      主題之間要有適當的間斷與解釋
    • Redfin購屋表單這份表單共有8頁,每個段落都有適當的說明與回應。
      Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
    • 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.
    • eBay Express 付款
      Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
    • 問題與討論
      http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/