Web Form Design 讀書會 Ch12-14
Upcoming SlideShare
Loading in...5
×
 

Web Form Design 讀書會 Ch12-14

on

  • 510 views

 

Statistics

Views

Total Views
510
Views on SlideShare
510
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

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 讀書會 Ch12-14 Web Form Design 讀書會 Ch12-14 Presentation Transcript

  • Web表單設計讀書會
    基於選擇的輸入 Ch12/循序漸進 Ch13 / 表單的未來 Ch14
    2011.3.14
    鄒心瑜Hsinyu Chou
    hsinyu.chou@isobar.com#3530
  • Ch12 基於選擇的輸入
  • Ch12 基於選擇的輸入
    彈性輸入允許人們按照希望的方式回答問題額外輸入允許人們補充想回答的問題基於選擇的輸入根據對初始問題的回答,決定後續回答的問題
    View slide
  • Ch12 基於選擇的輸入
    八大解決方案
    頁面級選項(換頁)
    水平選項卡
    垂直選項卡
    下拉列表
    單選按鈕(radio button)下方顯示
    單選按鈕內顯示
    顯示未啟動選項
    分組顯示
    View slide
  • Ch12 基於選擇的輸入
    頁面級選項(Page Level Selection)
    把過程明確分為兩步,第一頁選完再換第二頁
    Pros
    • 很明確,錯誤少
    • 眼動儀測試結果與體驗滿意度表現平均
    • 不爭取時間的表單適用
    Cons
    • 換頁可能丟失第一頁的情境
    • 速度較慢
    P.1
    P.2
  • Ch12 基於選擇的輸入
    水平選項卡(Horizontal Tabs)
    Pros
    • 易瀏覽
    • Tab有暗示全部選項的作用
    Cons
    • 填表路徑多為由上而下,水平選項易被忽略
    • *水平選項間的關係不明:是只要填一個?還是全部要填?或是互斥?
    • 如果submit,是submit哪一個Tab下的內容?
    • 眼球需左右移動
    *本方案使用性測試與眼動儀結果似有矛盾,使用性測試user滿意度高,且對tab間的關係疑惑不大,但眼動儀顯示視線偏離了填表常見的直線掃描。
  • Ch12 基於選擇的輸入
    一般的填表路徑
  • Ch12 基於選擇的輸入
    垂直選項卡(Vertical Tabs)
    Pros
    • 直接由上而下掃描,具有順暢的瀏覽線
    • 費時最短
    • 體驗滿意度高,眼球無需大幅移動
    • 隱藏當下無關的表單元件,對舒適度和完成度至關重要
    Cons
    • 少數user對tab間是全部要填還是互斥有疑惑
  • Ch12 基於選擇的輸入
    垂直選項卡(Vertical Tabs)
    Pros
    • 直接由上而下掃描,具有順暢的瀏覽線
    • 費時最短
    • 體驗滿意度高,眼球無需大幅移動
    • 隱藏當下無關的表單元件,對舒適度和完成度至關重要
    Cons
    • 少數user對tab間是全部要填還是互斥有疑惑
  • Ch12 基於選擇的輸入
    垂直選項卡(Vertical Tabs)
  • Ch12 基於選擇的輸入
    下拉選單
    Pros
    • 隱藏無關的元件,需要時才顯示
    • 比垂直選項卡省空間
    Cons
    • 缺點少
  • Ch12 基於選擇的輸入
    單選按鈕(組)下方顯示 6.單選按鈕內顯示
  • Ch12 基於選擇的輸入
    單選按鈕(組)下方顯示 6.單選按鈕內顯示
    Pros
    • 有助於揭示選項與後續內容的連動
    • 類似垂直選項卡
    • 按鈕內顯示是速度最快的解決方案
    Cons
    • 頁面較長
    • 跳動時引起混淆,這一點在使用性測試時得到證實
    • 若後續內容直接顯示在單一選項下方,頁面跳動會阻隔其他選項
    • 若後續內容置於整組選項下方,關連性又不夠(兩難)
    • 題目數量多時更突顯以上問題,show/hide使user不確定自己觸動了哪個選項
  • Ch12 基於選擇的輸入
    顯示未啟動選項
    • 所有選項均可見,但只有一組可操作,其他顯示灰白色
    Pros
    • 保留所有初始選項的情境
    Cons
    • 可見元件太多,嚇跑user
    • 如果子選項很多,數個初始選項之間的關係就消失
    • 滿意度最低,費時最長
    • 不建議使用
  • Ch12 基於選擇的輸入
    分組顯示(未啟動選項可見)
    • 用視覺綁定初始選項及子選項
    Pros
    • 保留所有初始選項的情境
    Cons
    • 成功率最低,錯誤最多
    • 眼球固定時間最長(最難理解)
    • 不建議使用
  • Ch13 循序漸進 /Ch14 表單的未來
  • Ch13 循序漸進 /Ch14 表單的未來
    擺脫枯燥註冊
    2007
    Google Video
  • Ch13 循序漸進 /Ch14 表單的未來
    Jumpcut - 線上video編輯
  • Ch13 循序漸進 /Ch14 表單的未來
    Jumpcut - 線上video編輯
    先體驗,再註冊。
  • Ch13 循序漸進 /Ch14 表單的未來
    Geni - 線上創建家族族譜
    當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料
    確保user回訪時能夠取用帳戶訊息。
  • Ch13 循序漸進 /Ch14 表單的未來
    Geni - 線上創建家族族譜
    當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料
    確保user回訪時能夠取用帳戶訊息。
  • Ch13 循序漸進 /Ch14 表單的未來
    http://4fidelity.wwwins.com.tw/investment/myplan.shtml
  • Ch13 循序漸進 /Ch14 表單的未來
    表單的未來 - 表單逐漸消失!
    由外而內的思考
    遊戲般的互動
    Open ID – 減少重複註冊
    個人化默認
  • Ch13 循序漸進 /Ch14 表單的未來
    http://www.themindcanvas.com/demos/
  • 問題與討論
    http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/