為什么表單設(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)，輸入的容錯(cuò)性
    - 清晰的完成路徑
    - 考慮用戶的背景和使用情景
        - 用戶的熟練程度
        - 用戶使用的頻繁度
    - 確保交流的連續(xù)性
        - 錯(cuò)誤，幫助和成功
        - 單一聲音，減少噪音

對效果的分析
    - 易用性測試
        - 錯(cuò)誤，提示，幫助，完成率，每次任務(wù)花費(fèi)時(shí)間，滿意度分值
    - 眼球跟蹤
        - 完成時(shí)間，關(guān)注點(diǎn),掃視路徑
    - 用戶幫助
        - 最重要的問題，事故次數(shù)
    - 最好的體驗(yàn)
        - 常用解決方案，獨(dú)特的方法
    - 在線跟蹤
        - 完成率，進(jìn)入點(diǎn)，退出點(diǎn)，頁面元素的使用,輸入的數(shù)據(jù)

設(shè)計(jì)模式
    信息+互動(dòng)+反饋
   
信息
    - 布局
        - 標(biāo)簽位置
        - 內(nèi)容分組
    - 輸入
        - 格式，必填項(xiàng)目
    - 動(dòng)作
        - 首要?jiǎng)幼骱痛我獎(jiǎng)幼?br/>    - 幫助和提示
    - 視覺層級

標(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)識(shí)和標(biāo)簽連在一起
   
輸入域長度
    - 輸入域長度可以提供有價(jià)值的affordances
    - 適當(dāng)?shù)挠蜷L度為輸入提供足夠的空間
    - 混亂的域長度可能給表單增加視覺噪音

最好的體驗(yàn)
    - 如果可能，use field length as an affordance
    - 否則，考慮一個(gè)一致的長度提供足夠的輸入空間
   
內(nèi)容分組
    - 內(nèi)容關(guān)系提供了結(jié)構(gòu)化組織表單的方式
    - 分組提供了
        - 一種在高層次上掃描必需信息的方式
        - 表單內(nèi)信息關(guān)系的聯(lián)系

太多的內(nèi)容分組會(huì)導(dǎo)致額外的視覺噪音，降低可讀性
最小化分組的好處：減少視覺噪音，更直接的完成路徑

最好的體驗(yàn)
    - 將表單內(nèi)關(guān)聯(lián)的內(nèi)容進(jìn)行分組
    - 使用最少數(shù)量的視覺元素來表達(dá)關(guān)系
   
動(dòng)作
    - 不是所有的表單動(dòng)作是平等的
        - 重置、取消、返回一般來說是次要的操作，很多時(shí)候不是必須的
        - 保存、下一步、提交是首要的操作：對于表單的完成起直接作用
    - 動(dòng)作的視覺呈現(xiàn)需要與他們的重要性相匹配

最好的體驗(yàn)
    - 如果可能，避免次要?jiǎng)幼?br/>    - 否則，用清晰的視覺識(shí)別來區(qū)分主要和次要?jiǎng)幼?br/>   
幫助和提示
    - 在下面的情況下，幫助提示是有用的：
        - 要求用戶輸入不熟悉的數(shù)據(jù)時(shí)
        - 用戶對于為什么數(shù)據(jù)被要求填寫可能有疑問
        - 推薦用戶使用某種提供數(shù)據(jù)的方式
        - 某些數(shù)據(jù)是選填的
    - 然而，過度使用幫助和提示會(huì)很快overwhelm表單
    - 在下面的情況下，你也許需要考慮動(dòng)態(tài)提示
        - 自動(dòng)的內(nèi)文提醒
        - 用戶觸發(fā)的內(nèi)文提醒
        - 用戶觸發(fā)的段落提醒
       
最好的體驗(yàn)
    - 除非必要，盡量少的使用幫助、提示
    - 明顯和與數(shù)據(jù)輸入?yún)^(qū)最相鄰的幫助是最有效的
    - 當(dāng)收集很多用戶不熟悉的數(shù)據(jù)時(shí)，考慮使用動(dòng)態(tài)提示系統(tǒng)

交互
    - 用戶完成的路徑
    - 使用鍵盤的tab鍵進(jìn)行控制
    - 逐步出現(xiàn)
    - 依賴性出現(xiàn)

完成路徑
    - 每個(gè)表單的首要目標(biāo)都是希望用戶填完
    - 每一個(gè)輸入項(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í)候一個(gè)數(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)
        - 一致性
    - 錯(cuò)誤
        - 提示形式和解決方案
    - 進(jìn)度
        - 提示形式
    - 成功
        - 校驗(yàn)
       
文中校驗(yàn)
    - 當(dāng)數(shù)據(jù)輸入時(shí)提供直接的反饋
        - 輸入校驗(yàn)
        - 建議正確的輸入
        - 幫助用戶不超出限制
    - 如：
        - 密碼提示
        - 用戶名選取
        - 正確輸入下拉提示
        - 最大允許字符計(jì)算

最佳體驗(yàn)
    - 當(dāng)輸入項(xiàng)的出錯(cuò)率很高時(shí)考慮文中校驗(yàn)
    - 使用建議輸入來減少歧義
    - 溝通界限
   
報(bào)錯(cuò)
    - 錯(cuò)誤被用來保證所有數(shù)據(jù)項(xiàng)被正確提供
        - 清晰的標(biāo)簽，affordances，幫助提示和校驗(yàn)可以幫助減少錯(cuò)誤
    - 但一些錯(cuò)誤仍然會(huì)出現(xiàn)
    - 用盡量少的步驟提供清晰的解決方案

最佳體驗(yàn)
    - 當(dāng)錯(cuò)誤發(fā)生時(shí)提供清楚地交流：優(yōu)先的位置和視覺反差
    - 提供修正錯(cuò)誤的方法
    - 將錯(cuò)誤信息與相關(guān)輸入項(xiàng)關(guān)聯(lián)起來
    - 當(dāng)錯(cuò)誤發(fā)生時(shí)用視覺語言來double

進(jìn)度
    - 一些時(shí)候動(dòng)作需要有執(zhí)行的時(shí)間
        - 表單提交
        - 數(shù)據(jù)計(jì)算
        - 上傳
    - 當(dāng)動(dòng)作進(jìn)行中時(shí)提供反饋
        - 例如：將提交按鈕disable
       
最佳體驗(yàn)
    - 提供任務(wù)的進(jìn)度提示
    - 當(dāng)用戶點(diǎn)擊提交后，將其disable以避免重復(fù)的提交

成功
    - 當(dāng)成功完成表單時(shí)，在上下文中確認(rèn)數(shù)據(jù)輸入
        - 在一個(gè)新頁面中
        - 在一個(gè)更新的表單中
    - 通過以下形式提供反饋
        - 消息（可移除）
        - 動(dòng)畫的形式
       
最佳體驗(yàn)
    - 當(dāng)數(shù)據(jù)提交成功后給與清晰的交流
    - 在數(shù)據(jù)提交的情境中提供反饋。
       
額外補(bǔ)充
    - 避免改變用戶提供的輸入
        - 用后來的輸入
        - 當(dāng)錯(cuò)誤發(fā)生時(shí)
    - 如果獲取信息是困難的，那么讓用戶知道比直接給用戶一個(gè)表單更優(yōu)先

可用性和標(biāo)簽形式
    - 使用label標(biāo)簽將數(shù)據(jù)與標(biāo)簽關(guān)聯(lián)
        - 能夠被screen reader正確識(shí)別
        - 多數(shù)瀏覽器將帶標(biāo)簽的文字處理為可點(diǎn)擊：更大的動(dòng)作
    - 使用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