SlideShare a Scribd company logo
Web表單設計讀書會基於選擇的輸入 Ch12/循序漸進 Ch13 / 表單的未來 Ch142011.3.14鄒心瑜Hsinyu Chouhsinyu.chou@isobar.com#3530
Ch12 基於選擇的輸入
Ch12 基於選擇的輸入彈性輸入允許人們按照希望的方式回答問題額外輸入允許人們補充想回答的問題基於選擇的輸入根據對初始問題的回答,決定後續回答的問題
Ch12 基於選擇的輸入八大解決方案頁面級選項(換頁)水平選項卡垂直選項卡下拉列表單選按鈕(radio button)下方顯示單選按鈕內顯示顯示未啟動選項分組顯示
Ch12 基於選擇的輸入頁面級選項(Page Level Selection)把過程明確分為兩步,第一頁選完再換第二頁Pros很明確,錯誤少
眼動儀測試結果與體驗滿意度表現平均
不爭取時間的表單適用Cons換頁可能丟失第一頁的情境
速度較慢P.1P.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頁面較長

More Related Content

PDF
Estudo de Requalificacao Urbana Centro Maceió 2001
PPTX
PPTX
PPTX
PPTX
Rocket Surgery Made Easy 讀書會: Ch1~4
PPTX
PPTX
PDF
偷呷步的網站快速入門
Estudo de Requalificacao Urbana Centro Maceió 2001
Rocket Surgery Made Easy 讀書會: Ch1~4
偷呷步的網站快速入門

Viewers also liked (8)

PDF
如何逐步提升CSS的可利用性、模組化
PDF
從一個超簡單範例開始學習 Canvas
PPTX
前端界流傳的神奇招式
PDF
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
PDF
Sublime Text 入門
PDF
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
PDF
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
PDF
Sublime text 極速應用教學
如何逐步提升CSS的可利用性、模組化
從一個超簡單範例開始學習 Canvas
前端界流傳的神奇招式
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
Sublime Text 入門
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Sublime text 極速應用教學
Ad

Web Form Design 讀書會 Ch12-14