web form design 讀書會 ch5-6
TRANSCRIPT
Ch5 輸入框
Ch5 輸入框• 輸入元件的類型
– 不同的問題，需要不同的回答方式
• 文字框 • 單選鈕• 下拉選單• 列表框• 勾選框• 按鈕
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch5 輸入框• 各種輸入元件的特性
元件 特性 Html markup
1. 文字框 •可輸入任意數量的字母、數字、符號•可一行或多行
<input type=“text”>
<textarea>
2. 單選鈕 •允許 user 從所有互斥選項中選一個•除特殊情況外，通常有預設選項
<input type=“radio”>
3. 下拉選單 •允許 user 從所有互斥選項中選一個•不使用時顯示當前選項•如果選項較多，下拉選單比radio button 省空間
<select>
Ch5 輸入框• 各種輸入元件的特性
元件 特性 Html markup
4. 勾選框 •允許 user 從所有選項中選擇一個或多個•只有一個選項時，代表是或否
<input type=“checkbox”>
5. 列表框 •允許 user 從所有選項中選擇一個或多個•單 / 複選的雙重性質容易造成混淆，故 Web 表單較少使用，application 中較常見
<select multiple="multiple“ size=“4”>
6. 按鈕 •第六章中討論 <input type=“button/submit/cancel”>
<button>
Ch5 輸入框《提醒》
單選鈕和複選框的感應區，最好包含標籤
Female
Include me into the survey
感應區
感應區
Ch5 輸入框• 案例：訂購電影票表單
條件：– 三種不同類型 / 票價的票 ( 成人票、兒童票、老人
票 )– 每種票最多買 6 張– 每位 user 約一年造訪一次，
所以應以簡單易學為主
Ch5 輸入框Solution 1
– 輸入框未限制格式，若輸入非數字會跳出 javascript 錯誤訊息
– 打數字用鍵盤，移動到另一輸入框需換成滑鼠，很少 user 知道可用 tab 鍵切換
Ch5 輸入框Solution 2
– 頁面佈局佳 ( 省空間 ) ，可限定輸入格式，防止錯誤
– 用下拉選單有利有弊： user 可能忽略其他數量
Ch5 輸入框Solution 3
– 可限定輸入格式，防止錯誤– User 可看見所有數量選項– 但因而增加了很多元件
Ch5 輸入框• 輸入框的長度
– 是一種暗示 ( 像門把 ) ，提示回答方式
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
郵遞區號及電話號碼都有做長度暗示
Ch5 輸入框
( 這不是美觀問題！ )– 所有輸入框一樣長，無法提供任何暗示
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch5 輸入框
– 每個輸入框都有不同的長度無標準長度的輸入無須暗示， user 反而因此疑惑
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch5 輸入框• 必填項目
– 星號 (*) 是必填？還是可填可不填？– 理論上，數量較少的一方需做標示– ( 台灣可能標示必填項較受歡迎 )
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.
Ch5 輸入框• 不論標示必填或選填，都必須有配套的說明
– 整份表單要有一致性
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Macy’s Wal-Mart
( 圖例 )
Ch5 輸入框• 注意必 / 選填標示 (*) 的位置
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch5 輸入框
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
( 要標在標籤上！ )
Ch5 輸入框• 表單的結構基礎
– 可幫助規劃表單的內容，也可作為視覺風格的參考
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
名稱 資料 動作(Title) (Data) (Action)
Ch5 輸入框• 輸入組
– 必須同時存在才能提供完整資料的數個輸入框– 有因果關係的輸入框– 可提供 user 回答問題的線索
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
eBay 的發貨表單
選擇地址
Ch5 輸入框• 輸入框組的關係
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
(組合輸入框 )
(相關輸入框 )
( 從屬輸入框 )
A 包含 B
A x B
A + B
Ch5 輸入框• 彈性輸入框
– 讓 user 以喜歡的格式填寫答案– 需要額外的 script 做判定或轉換
Ch5 輸入框
最強的彈性輸入框！
Ch6 動作 (Action)
Ch6 動作 (Action)• 主動作和次動作
– 主動作 (primary action) ：完成填表目標的最終動作如 submit, 儲存 , 繼續
– 次動作 (secondary action) ：較少使用，如取消 , reset, 返回若不慎使用可能造成負面結果
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch6 動作 (Action)– 解決：
• 不要次動作• 次動作的視覺表現要能與主動作區別
• 次動作改成其他能幫助 user 前進的行為，或幫 user離開表單
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
修改前
修改後
Ch6 動作 (Action)
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
例：主動作與次動作的區別
Ch6 動作 (Action)• 主動作和次動作的位置
– 眼動儀測試結果：1. 除了 E 以外，成功率均為 100%2. 方案 B 表現最好 (快 )3. 方案 A與 C ，體驗滿意度最高4. 方案 F 比方案 B 多費時 6秒
Action item 對齊的位置 ?
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch6 動作 (Action)• 動作處理中的 feedback
– 系統處理表單需要時間。 User ：我送出成功了嗎？
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch6 動作 (Action)• 動作處理中的 feedback
– User ：我送出成功了嗎？
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
Ch6 動作 (Action)• 同意與提交
– 表單結尾不得不問的問題：促銷訊息、服務條款
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks.New York: Rosenfeld Media.
網站常預設寄送促銷訊息，但 user 也通常會取消
User 必須同意網站條款，但其實只想買東西→ 那就兩步合成一步吧
問題與討論http://www.flickr.com/photos/streetfly_jz/2786919875/in/photostream/