26
Web表單設計讀書會 基於選擇的輸入 Ch12/ 循序漸進 Ch13 / 表單的未來 Ch14 2011.3.14 鄒心瑜 Hsinyu Chou [email protected] #3530

Web Form Design 讀書會 Ch12-14

  • Upload
    -

  • View
    434

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Web Form Design 讀書會 Ch12-14

Web表單設計讀書會基於選擇的輸入 Ch12/ 循序漸進 Ch13 / 表單的未來 Ch14

2011.3.14

鄒心瑜 Hsinyu Chou

[email protected] #3530

Page 2: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

Page 3: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

• 彈性輸入允許人們按照希望的方式回答問題

額外輸入允許人們補充想回答的問題

基於選擇的輸入根據對初始問題的回答,決定後續回答的問題

Page 4: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

• 八大解決方案

1. 頁面級選項(換頁)

2. 水平選項卡

3. 垂直選項卡

4. 下拉列表

5. 單選按鈕(radio button)下方顯示

6. 單選按鈕內顯示

7. 顯示未啟動選項

8. 分組顯示

Page 5: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

1. 頁面級選項(Page Level Selection)

– 把過程明確分為兩步,第一頁選完再換第二頁

Pros

– 很明確,錯誤少

– 眼動儀測試結果與體驗滿意度

表現平均

– 不爭取時間的表單適用

Cons

– 換頁可能丟失第一頁的情境

– 速度較慢

P.1

P.2

Page 6: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

2. 水平選項卡(Horizontal Tabs)Pros

– 易瀏覽

– Tab有暗示全部選項的作用

Cons

– 填表路徑多為由上而下,水平

選項易被忽略

– *水平選項間的關係不明:

是只要填一個?還是全部要填?

或是互斥?

– 如果submit,是submit哪一個

Tab下的內容?

– 眼球需左右移動

*本方案使用性測試與眼動儀結果似有矛盾,使用性測試user滿意度高,且對tab間的關係

疑惑不大,但眼動儀顯示視線偏離了填表常見的直線掃描。

Page 7: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入一般的填表路徑

Page 8: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

3. 垂直選項卡(Vertical Tabs)Pros

– 直接由上而下掃描,具有順暢

的瀏覽線

– 費時最短

– 體驗滿意度高,眼球無需大幅

移動

– 隱藏當下無關的表單元件,對

舒適度和完成度至關重要

Cons

– 少數user對tab間是全部要填還

是互斥有疑惑

Page 9: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

3. 垂直選項卡(Vertical Tabs)Pros

– 直接由上而下掃描,具有順暢

的瀏覽線

– 費時最短

– 體驗滿意度高,眼球無需大幅

移動

– 隱藏當下無關的表單元件,對

舒適度和完成度至關重要

Cons

– 少數user對tab間是全部要填還

是互斥有疑惑

Page 10: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

3. 垂直選項卡(Vertical Tabs)

Page 11: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

4. 下拉選單Pros

– 隱藏無關的元件,需要時才

顯示

– 比垂直選項卡省空間

Cons

– 缺點少

Page 12: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

5. 單選按鈕(組)下方顯示 6.單選按鈕內顯示

Page 13: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

5. 單選按鈕(組)下方顯示 6.單選按鈕內顯示

Pros

– 有助於揭示選項與後續內容的連動

– 類似垂直選項卡

– 按鈕內顯示是速度最快的解決方案

Cons

– 頁面較長

– 跳動時引起混淆,這一點在使用性測試時得到證實

• 若後續內容直接顯示在單一選項下方,頁面跳動會阻隔其他選項

• 若後續內容置於整組選項下方,關連性又不夠

(兩難)

– 題目數量多時更突顯以上問題,show/hide使user不確定自己觸動了

哪個選項

Page 14: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

7. 顯示未啟動選項

– 所有選項均可見,但只有一組

可操作,其他顯示灰白色

Pros

– 保留所有初始選項的情境

Cons

– 可見元件太多,嚇跑user

– 如果子選項很多,數個初始

選項之間的關係就消失

– 滿意度最低,費時最長

– 不建議使用

Page 15: Web Form Design 讀書會 Ch12-14

Ch12 基於選擇的輸入

8. 分組顯示(未啟動選項可見)

– 用視覺綁定初始選項及子選項

Pros

– 保留所有初始選項的情境

Cons

– 成功率最低,錯誤最多

– 眼球固定時間最長

(最難理解)

– 不建議使用

Page 16: Web Form Design 讀書會 Ch12-14
Page 17: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來

Page 18: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來

• 擺脫枯燥註冊

2007Google Video

Page 19: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來Jumpcut - 線上video編輯

Page 20: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來Jumpcut - 線上video編輯

先體驗,再註冊。

Page 21: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來Geni - 線上創建家族族譜

當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料

確保user回訪時能夠取用帳戶訊息。

Page 22: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來Geni - 線上創建家族族譜

當填入e-mail 的同時,Geni系統會發送e-mail 給user,以便日後返回取出前次的資料

確保user回訪時能夠取用帳戶訊息。

Page 23: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來

http://4fidelity.wwwins.com.tw/investment/myplan.shtml

Page 24: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來

• 表單的未來 - 表單逐漸消失!

– 由外而內的思考

– 遊戲般的互動

– Open ID – 減少重複註冊

– 個人化默認

Page 25: Web Form Design 讀書會 Ch12-14

Ch13 循序漸進 / Ch14 表單的未來

http://www.themindcanvas.com/demos/

Page 26: Web Form Design 讀書會 Ch12-14

問題與討論

http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/