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