web form design 讀書會 ch12-14
TRANSCRIPT
Ch12 基於選擇的輸入
Ch12 基於選擇的輸入
• 彈性輸入允許人們按照希望的方式回答問題
額外輸入允許人們補充想回答的問題
基於選擇的輸入根據對初始問題的回答,決定後續回答的問題
Ch12 基於選擇的輸入
• 八大解決方案
1. 頁面級選項(換頁)
2. 水平選項卡
3. 垂直選項卡
4. 下拉列表
5. 單選按鈕(radio button)下方顯示
6. 單選按鈕內顯示
7. 顯示未啟動選項
8. 分組顯示
Ch12 基於選擇的輸入
1. 頁面級選項(Page Level Selection)
– 把過程明確分為兩步,第一頁選完再換第二頁
Pros
– 很明確,錯誤少
– 眼動儀測試結果與體驗滿意度
表現平均
– 不爭取時間的表單適用
Cons
– 換頁可能丟失第一頁的情境
– 速度較慢
P.1
P.2
Ch12 基於選擇的輸入
2. 水平選項卡(Horizontal Tabs)Pros
– 易瀏覽
– Tab有暗示全部選項的作用
Cons
– 填表路徑多為由上而下,水平
選項易被忽略
– *水平選項間的關係不明:
是只要填一個?還是全部要填?
或是互斥?
– 如果submit,是submit哪一個
Tab下的內容?
– 眼球需左右移動
*本方案使用性測試與眼動儀結果似有矛盾,使用性測試user滿意度高,且對tab間的關係
疑惑不大,但眼動儀顯示視線偏離了填表常見的直線掃描。
Ch12 基於選擇的輸入一般的填表路徑
Ch12 基於選擇的輸入
3. 垂直選項卡(Vertical Tabs)Pros
– 直接由上而下掃描,具有順暢
的瀏覽線
– 費時最短
– 體驗滿意度高,眼球無需大幅
移動
– 隱藏當下無關的表單元件,對
舒適度和完成度至關重要
Cons
– 少數user對tab間是全部要填還
是互斥有疑惑
Ch12 基於選擇的輸入
3. 垂直選項卡(Vertical Tabs)Pros
– 直接由上而下掃描,具有順暢
的瀏覽線
– 費時最短
– 體驗滿意度高,眼球無需大幅
移動
– 隱藏當下無關的表單元件,對
舒適度和完成度至關重要
Cons
– 少數user對tab間是全部要填還
是互斥有疑惑
Ch12 基於選擇的輸入
3. 垂直選項卡(Vertical Tabs)
Ch12 基於選擇的輸入
4. 下拉選單Pros
– 隱藏無關的元件,需要時才
顯示
– 比垂直選項卡省空間
Cons
– 缺點少
Ch12 基於選擇的輸入
5. 單選按鈕(組)下方顯示 6.單選按鈕內顯示
Ch12 基於選擇的輸入
5. 單選按鈕(組)下方顯示 6.單選按鈕內顯示
Pros
– 有助於揭示選項與後續內容的連動
– 類似垂直選項卡
– 按鈕內顯示是速度最快的解決方案
Cons
– 頁面較長
– 跳動時引起混淆,這一點在使用性測試時得到證實
• 若後續內容直接顯示在單一選項下方,頁面跳動會阻隔其他選項
• 若後續內容置於整組選項下方,關連性又不夠
(兩難)
– 題目數量多時更突顯以上問題,show/hide使user不確定自己觸動了
哪個選項
Ch12 基於選擇的輸入
7. 顯示未啟動選項
– 所有選項均可見,但只有一組
可操作,其他顯示灰白色
Pros
– 保留所有初始選項的情境
Cons
– 可見元件太多,嚇跑user
– 如果子選項很多,數個初始
選項之間的關係就消失
– 滿意度最低,費時最長
– 不建議使用
Ch12 基於選擇的輸入
8. 分組顯示(未啟動選項可見)
– 用視覺綁定初始選項及子選項
Pros
– 保留所有初始選項的情境
Cons
– 成功率最低,錯誤最多
– 眼球固定時間最長
(最難理解)
– 不建議使用
Ch13 循序漸進 / Ch14 表單的未來
Ch13 循序漸進 / Ch14 表單的未來
• 擺脫枯燥註冊
2007Google 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 – 減少重複註冊
– 個人化默認
問題與討論
http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/