為什么表單設計非常重要？
- 表單是用戶與網(wǎng)站之間進行“對話”的方式
- 從商業(yè)上
- 使用戶能夠實現(xiàn)購買行為
- 使商家實現(xiàn)銷售利潤最大化
- 從交互的角度
- 使用戶能夠參與
- 使商家能夠增加用戶并形成社區(qū)
- 從參與角度
- 使用戶能夠操作和貢獻內(nèi)容
- 使商家可以積累內(nèi)容和數(shù)據(jù)
設計原則
- 使痛苦減少到最小
- 沒有人喜歡填寫表單
- 聰明的默認值，在線校驗，輸入的容錯性
- 清晰的完成路徑
- 考慮用戶的背景和使用情景
- 用戶的熟練程度
- 用戶使用的頻繁度
- 確保交流的連續(xù)性
- 錯誤，幫助和成功
- 單一聲音，減少噪音
對效果的分析
- 易用性測試
- 錯誤，提示，幫助，完成率，每次任務花費時間，滿意度分值
- 眼球跟蹤
- 完成時間，關注點,掃視路徑
- 用戶幫助
- 最重要的問題，事故次數(shù)
- 最好的體驗
- 常用解決方案，獨特的方法
- 在線跟蹤
- 完成率，進入點，退出點，頁面元素的使用,輸入的數(shù)據(jù)
設計模式
信息+互動+反饋
信息
- 布局
- 標簽位置
- 內(nèi)容分組
- 輸入
- 格式，必填項目
- 動作
- 首要動作和次要動作
- 幫助和提示
- 視覺層級
標簽頂端對齊方式
- 當被收集的數(shù)據(jù)是熟悉的
- 最少的完成時間
- 需要更大的垂直空間
- 間距和對比對于有效的視覺掃描很關鍵
- 對于本地化和復雜的輸入有更高的靈活性
標簽右對齊方式
- 標簽和輸入框有清晰的聯(lián)系
- 需要較少的垂直空間
- 由于左側的不對齊，快速掃描所有標簽變得比較困難
- 很快的完成時間
標簽左對齊方式
- 當需要的數(shù)據(jù)不熟悉時
- 標簽的掃描比較容易
- 標簽與輸入框的聯(lián)系不緊密
- 改變標簽長度可能對布局產(chǎn)生破壞和削弱
眼球跟蹤
- 2006年7月matteo panzo的研究
- 左對齊
- 容易將標簽與輸入框聯(lián)系起來
- 標簽和輸入框之間的距離讓用戶花費更多時間
- 右對齊
- 減少了將近一半的注視次數(shù)
- 表單完成時間減少了一半
- 頂端對齊
- 讓用戶一眼捕捉到標簽和輸入框
- 最少的完成時間
最好的體驗
- 減少完成時間以及熟悉的數(shù)據(jù)輸入：上對齊
- 如果希望節(jié)省垂直空間：右對齊
- 對于用戶不熟悉或者高級的數(shù)據(jù)項：左對齊
必填項目
- 必填項的指示在以下情況下最有用：
- 輸入項很多
- 很少是必填項目
- 使用戶能夠通過掃描表單知道什么需要填寫
- 選填項指示在以下情況下最有用：
- 很少的項目是選填項
- 當所有項目都是必填項時指示就沒有用處
最好的體驗
- 盡量避免選填項
- 必填項多，則標明選填項目
- 選填項多，則標明必填項
- 文字最好，但*經(jīng)常被用于必填項目
- 將標識和標簽連在一起
輸入域長度
- 輸入域長度可以提供有價值的affordances
- 適當?shù)挠蜷L度為輸入提供足夠的空間
- 混亂的域長度可能給表單增加視覺噪音
最好的體驗
- 如果可能，use field length as an affordance
- 否則，考慮一個一致的長度提供足夠的輸入空間
內(nèi)容分組
- 內(nèi)容關系提供了結構化組織表單的方式
- 分組提供了
- 一種在高層次上掃描必需信息的方式
- 表單內(nèi)信息關系的聯(lián)系
太多的內(nèi)容分組會導致額外的視覺噪音，降低可讀性
最小化分組的好處：減少視覺噪音，更直接的完成路徑
最好的體驗
- 將表單內(nèi)關聯(lián)的內(nèi)容進行分組
- 使用最少數(shù)量的視覺元素來表達關系
動作
- 不是所有的表單動作是平等的
- 重置、取消、返回一般來說是次要的操作，很多時候不是必須的
- 保存、下一步、提交是首要的操作：對于表單的完成起直接作用
- 動作的視覺呈現(xiàn)需要與他們的重要性相匹配
最好的體驗
- 如果可能，避免次要動作
- 否則，用清晰的視覺識別來區(qū)分主要和次要動作
幫助和提示
- 在下面的情況下，幫助提示是有用的：
- 要求用戶輸入不熟悉的數(shù)據(jù)時
- 用戶對于為什么數(shù)據(jù)被要求填寫可能有疑問
- 推薦用戶使用某種提供數(shù)據(jù)的方式
- 某些數(shù)據(jù)是選填的
- 然而，過度使用幫助和提示會很快overwhelm表單
- 在下面的情況下，你也許需要考慮動態(tài)提示
- 自動的內(nèi)文提醒
- 用戶觸發(fā)的內(nèi)文提醒
- 用戶觸發(fā)的段落提醒
最好的體驗
- 除非必要，盡量少的使用幫助、提示
- 明顯和與數(shù)據(jù)輸入?yún)^(qū)最相鄰的幫助是最有效的
- 當收集很多用戶不熟悉的數(shù)據(jù)時，考慮使用動態(tài)提示系統(tǒng)
交互
- 用戶完成的路徑
- 使用鍵盤的tab鍵進行控制
- 逐步出現(xiàn)
- 依賴性出現(xiàn)
完成路徑
- 每個表單的首要目標都是希望用戶填完
- 每一個輸入項目需要考慮和操作
- 去掉所有不必要的數(shù)據(jù)輸入要求
- 提供靈活的數(shù)據(jù)輸入
- 提供清晰的路徑
- 提供聰明的默認值
最好的體驗
- 去掉所有不必要的數(shù)據(jù)請求
- 使用聰明的默認值
- 給用戶提供靈活的數(shù)據(jù)輸入選擇
- 清晰的完成路徑
- 對于長表單，提供進度和保存功能
tabbing
- 許多用戶通過tab在表單項目之間跳轉
- 合理的html將保證跳轉正確工作
- 多列式的表單結構可能與tabbing順序相沖突
最好的體驗
- 記得考慮tabbing
- 使用tabindex屬性來控制tabbing順序
- 當設計表單布局時考慮tabbing預期
階段性提醒
- 不是所有用戶一次需要所有可選項
- 合理使用的階段性提醒提供了額外的選項
- 高級選項
- 進階操作
最好的體驗
- 根據(jù)用戶需求的優(yōu)先級來安排階段性提醒
- 最有效的方法是讓用戶來觸發(fā)
- 使用一致的提醒方式
依賴性選擇輸入
- 有時候一個數(shù)據(jù)需要與其他的數(shù)據(jù)輸入相關聯(lián)
- 某項輸入觸發(fā)更多的選項
- 某項輸入觸發(fā)更清楚的需求
依賴型顯現(xiàn)輸入
- 頁面級別
- 需要額外的步驟
- 區(qū)塊標簽
- 通常容易被忽略
- 默認值很重要
- 手指區(qū)塊標簽
- 需要遵循完成路徑
- 區(qū)塊選擇項
- 有效將信息分組
- 隱藏了額外的選項
- 下方暴露和行間暴露
- 有讓用戶迷惑的潛在危險
- 當選擇/選中時激活
- 次要選擇的關聯(lián)性被削弱
最好的體驗
- 在首選項之間保持清晰的關系
- 將額外輸入項與他們的觸發(fā)器之間保持清晰的關聯(lián)
- 避免“跳躍”造成首選項之間關聯(lián)的減弱
反饋
- 文中校驗
- 一致性
- 錯誤
- 提示形式和解決方案
- 進度
- 提示形式
- 成功
- 校驗
文中校驗
- 當數(shù)據(jù)輸入時提供直接的反饋
- 輸入校驗
- 建議正確的輸入
- 幫助用戶不超出限制
- 如：
- 密碼提示
- 用戶名選取
- 正確輸入下拉提示
- 最大允許字符計算
最佳體驗
- 當輸入項的出錯率很高時考慮文中校驗
- 使用建議輸入來減少歧義
- 溝通界限
報錯
- 錯誤被用來保證所有數(shù)據(jù)項被正確提供
- 清晰的標簽，affordances，幫助提示和校驗可以幫助減少錯誤
- 但一些錯誤仍然會出現(xiàn)
- 用盡量少的步驟提供清晰的解決方案
最佳體驗
- 當錯誤發(fā)生時提供清楚地交流：優(yōu)先的位置和視覺反差
- 提供修正錯誤的方法
- 將錯誤信息與相關輸入項關聯(lián)起來
- 當錯誤發(fā)生時用視覺語言來double
進度
- 一些時候動作需要有執(zhí)行的時間
- 表單提交
- 數(shù)據(jù)計算
- 上傳
- 當動作進行中時提供反饋
- 例如：將提交按鈕disable
最佳體驗
- 提供任務的進度提示
- 當用戶點擊提交后，將其disable以避免重復的提交
成功
- 當成功完成表單時，在上下文中確認數(shù)據(jù)輸入
- 在一個新頁面中
- 在一個更新的表單中
- 通過以下形式提供反饋
- 消息（可移除）
- 動畫的形式
最佳體驗
- 當數(shù)據(jù)提交成功后給與清晰的交流
- 在數(shù)據(jù)提交的情境中提供反饋。
額外補充
- 避免改變用戶提供的輸入
- 用后來的輸入
- 當錯誤發(fā)生時
- 如果獲取信息是困難的，那么讓用戶知道比直接給用戶一個表單更優(yōu)先
可用性和標簽形式
- 使用label標簽將數(shù)據(jù)與標簽關聯(lián)
- 能夠被screen reader正確識別
- 多數(shù)瀏覽器將帶<label>標簽的文字處理為可點擊：更大的動作
- 使用tabindex屬性提供tabbing路徑
- 提供tabbing順序的控制
- 使表單可以通過鍵盤來導航
- 考慮為支持鍵盤輸入提供accesskey屬性
- 直接到達相關的輸入項
- 考慮fieldset屬性將內(nèi)容分組
表單創(chuàng)建工具
- wufoo
- www.formassembly.com
- www.icebrrg.com
更多信息
- 功能性表單設計
- www.lukew.com/ff/
- site-seeing：A Visual Approach to Web Usability
- Wiley & Sons
- luke@lukew.com
粵公網(wǎng)安備 44010402000282號