這兩天看了《web表單設(shè)計(jì)》，根據(jù)自己以前對(duì)表單的理解，寫(xiě)下總結(jié)。
表單的組織
先考慮人，再考慮像素。用戶(hù)真正關(guān)心的是問(wèn)題內(nèi)容和為何要問(wèn)這些問(wèn)題。
好的交互能為表單錦上添花，但是內(nèi)容才是一份表單的核心。選取表單問(wèn)題時(shí)應(yīng)該謹(jǐn)慎，避免重復(fù)和多余的問(wèn)題，盡量保證表單簡(jiǎn)潔精悍；標(biāo)簽表達(dá)意思應(yīng)該自然準(zhǔn)確，避免模糊的描述給用戶(hù)造成困擾；當(dāng)表單涉及用戶(hù)隱私信息比如手機(jī)號(hào)碼時(shí)，應(yīng)當(dāng)向用戶(hù)簡(jiǎn)單解釋為何需要這一信息。
起始頁(yè)。如果表單較長(zhǎng)，涉及問(wèn)題較多或者較復(fù)雜，可以為表單設(shè)計(jì)一個(gè)起始頁(yè)。在起始頁(yè)面中，闡明填寫(xiě)表單所需時(shí)間，羅列出表單中將要涉及的問(wèn)題類(lèi)型，給予用戶(hù)一定的心理預(yù)期，防止用戶(hù)因?yàn)楸韱芜^(guò)長(zhǎng)或者問(wèn)題敏感復(fù)雜而感到失落。
進(jìn)程指示。當(dāng)表單篇幅較長(zhǎng)，分散在多個(gè)網(wǎng)頁(yè)中時(shí)，設(shè)置進(jìn)程指示是一個(gè)明智的決定。進(jìn)程指示表明表單所涉范圍、用戶(hù)當(dāng)前所處位置、表單填寫(xiě)進(jìn)度狀況。超長(zhǎng)的表單如同無(wú)底洞，讓用戶(hù)越填越失落。合適的進(jìn)程指示能夠有效降低用戶(hù)的失落感。
表單篇幅。當(dāng)表單涉及大量問(wèn)題，但是涉及主題單一時(shí)，可以只用一個(gè)較長(zhǎng)的網(wǎng)頁(yè)組織表單。當(dāng)表單涉及大量問(wèn)題，同時(shí)涉及多個(gè)主題時(shí)，可以用多個(gè)網(wǎng)頁(yè)組織表單。
提高表單可用性
第一、清晰的瀏覽線(xiàn)。
由始至終提供清晰的瀏覽線(xiàn)是一份好用表單的基本原則。下面的眼動(dòng)熱點(diǎn)圖能夠清楚的表明清晰瀏覽線(xiàn)的重要性。圖中標(biāo)簽放置在輸入框上方，表單只有從上至下這一條垂直的、單一的完成路徑。能夠有效節(jié)約用戶(hù)時(shí)間，加快完成效率。當(dāng)然瀏覽線(xiàn)也需要考慮用戶(hù)不同的瀏覽習(xí)慣，比如中國(guó)用戶(hù)習(xí)慣從左至右，但是有的地區(qū)的用戶(hù)則習(xí)慣從右至左閱讀。
這里可以引申出另外一個(gè)問(wèn)題：提交（完成）按鈕的位置。提交按鈕的位置一般有三種：左側(cè)、中間、右側(cè)。根據(jù)上面來(lái)看，提交按鈕放在左側(cè)是最合適的。
第二、標(biāo)簽位置。
標(biāo)簽對(duì)齊方式有三種，垂直對(duì)齊、左對(duì)齊、右對(duì)齊。
垂直對(duì)齊。根據(jù)第一條“清晰地瀏覽線(xiàn)”來(lái)看，垂直對(duì)齊方式是最能節(jié)省用戶(hù)時(shí)間、加快表單填寫(xiě)效率的。標(biāo)簽位于輸入框上方，正好能夠提供最標(biāo)準(zhǔn)的垂直視覺(jué)基線(xiàn)。然后垂直對(duì)齊提供給標(biāo)簽的長(zhǎng)度自由度是最大的，不會(huì)因?yàn)闃?biāo)簽過(guò)長(zhǎng)而有損表單的美觀。當(dāng)表單版面有限，比如移動(dòng)端，也可以采用垂直對(duì)齊方式。
左對(duì)齊。左對(duì)齊被認(rèn)為是三種方式中填寫(xiě)速度最慢的。原因是用戶(hù)需要花一定的時(shí)間將標(biāo)簽與對(duì)應(yīng)的輸入框聯(lián)系起來(lái)。但是左對(duì)齊相對(duì)于右對(duì)齊視覺(jué)上更加清晰整齊。當(dāng)你希望用戶(hù)謹(jǐn)慎填寫(xiě)表單、花更多的時(shí)間閱讀表單時(shí)可以采用左對(duì)齊。
右對(duì)齊。右對(duì)齊的填寫(xiě)速度僅次于垂直對(duì)齊。相較于左對(duì)齊，用戶(hù)更容易找到標(biāo)簽對(duì)應(yīng)的輸入框。但是與左對(duì)齊一樣，右對(duì)齊的標(biāo)簽長(zhǎng)度擴(kuò)展性較差。
第三、輸入框。
輸入框的長(zhǎng)度最好與輸入內(nèi)容相匹配，能夠?yàn)橛脩?hù)提供有意義的暗示。如果簡(jiǎn)短的回答配了很長(zhǎng)的輸入框，給了用戶(hù)錯(cuò)誤的暗示，用戶(hù)會(huì)懷疑自己答案的正確性。
必填項(xiàng)與可選項(xiàng)。當(dāng)表單必填項(xiàng)較多時(shí)，標(biāo)注可選項(xiàng)。當(dāng)可選項(xiàng)較多時(shí)，標(biāo)注必填項(xiàng)。標(biāo)注可以用文字也可以用符號(hào)，需要對(duì)標(biāo)注符號(hào)（比如*）做出解釋。
ps：一些研究結(jié)果表明并不是所有用戶(hù)知道*代表可選項(xiàng)，并且用戶(hù)很容易忽視*代表可選項(xiàng)。所以這里推薦使用文字標(biāo)注方式。
彈性輸入框。對(duì)于某些問(wèn)題來(lái)說(shuō)，回答方式不止一種，比如電話(huà)號(hào)碼、銀行卡號(hào)、地址。對(duì)于電話(huà)號(hào)碼與銀行卡號(hào)這種需要特定格式輸入的問(wèn)題，可以讓用戶(hù)按照自己的方式輸入答案，由系統(tǒng)負(fù)責(zé)為用戶(hù)輸入的文本編排格式。再比如地址，地址可以支持用戶(hù)輸入，也可以提供入口讓用戶(hù)在地圖上選擇。但是需要避免因?yàn)閺椥暂斎肟驅(qū)⒑?jiǎn)單問(wèn)題復(fù)雜化。
輸入框內(nèi)的標(biāo)簽。當(dāng)屏幕空間有限時(shí)，將標(biāo)簽放入輸入框內(nèi)是常見(jiàn)做法，可以節(jié)省空間。但是當(dāng)用戶(hù)進(jìn)行輸入時(shí)，標(biāo)簽便會(huì)消失，輸入情景隨即消失，用戶(hù)無(wú)法再次查看標(biāo)簽除非刪除已經(jīng)輸入的內(nèi)容。好在針對(duì)這個(gè)弊端已經(jīng)有了解決方案：當(dāng)用戶(hù)輸入時(shí)，標(biāo)簽字號(hào)變小、位置到輸入框上方。這樣既不會(huì)影響輸入，標(biāo)簽也不會(huì)消失。
第四、主動(dòng)作與次動(dòng)作。
完成表單上最重要行為（完成表單）的動(dòng)作稱(chēng)為主動(dòng)作。與完成表單這一目標(biāo)相悖的動(dòng)作稱(chēng)為次動(dòng)作，比如撤銷(xiāo)、返回、重置、刪除等。
表單中應(yīng)該盡量避免出現(xiàn)次動(dòng)作。次動(dòng)作很容易造成負(fù)面影響，當(dāng)用戶(hù)無(wú)意中誤操作時(shí)很容易造成不可挽回的后果，比如重置、刪除，會(huì)導(dǎo)致數(shù)據(jù)的消失。
當(dāng)表單中不可避免出現(xiàn)次動(dòng)作時(shí)，應(yīng)該盡量弱化次動(dòng)作的視覺(jué)表現(xiàn)，將潛在出錯(cuò)率降到最低。當(dāng)用戶(hù)誤操作時(shí)應(yīng)該提供撤銷(xiāo)功能。
第五、即時(shí)反饋。
沒(méi)有反饋的表單讓用戶(hù)感到迷茫，良好的反饋系統(tǒng)能夠提高表單填寫(xiě)效率。
失敗消息。當(dāng)用戶(hù)填寫(xiě)表單出現(xiàn)錯(cuò)誤時(shí)應(yīng)該及時(shí)提醒，而不是當(dāng)用戶(hù)填完表單點(diǎn)擊提交按鈕時(shí)出現(xiàn)一大堆錯(cuò)誤。失敗消息阻礙“完成表單”這一首要目標(biāo)，因此錯(cuò)誤是表單中最重要的元素，應(yīng)該以最清楚明顯的方式表達(dá)錯(cuò)誤消息。比如當(dāng)輸入框出現(xiàn)錯(cuò)誤時(shí)，可以將輸入框變成紅色，錯(cuò)誤提示字體顏色也采用紅色，確保用戶(hù)能夠第一時(shí)間發(fā)現(xiàn)。
失敗消息不僅要表述準(zhǔn)確，還要明確告訴用戶(hù)解決方案。當(dāng)出現(xiàn)多個(gè)錯(cuò)誤或者系統(tǒng)錯(cuò)誤時(shí)，可以在表頭標(biāo)明錯(cuò)誤情況。
還有一種情況很少見(jiàn)但是有必要提出來(lái)講一下，任何情況下都不要輕易清空表單，即使表單出現(xiàn)錯(cuò)誤，特別是面對(duì)較長(zhǎng)表單時(shí)，這種情況讓人崩潰。
成功消息。成功消息與失敗消息不同，失敗消息不能被忽視或者置之不理——必須解決問(wèn)題，成功消息不能阻礙用戶(hù)進(jìn)程，而是增強(qiáng)用戶(hù)信心，鼓勵(lì)用戶(hù)采取更多行動(dòng)。比如當(dāng)一個(gè)問(wèn)題填寫(xiě)正確時(shí)，輸入框后面出現(xiàn)一個(gè)代表正確的小勾。當(dāng)表單填寫(xiě)成功時(shí)，給予表單填寫(xiě)成功的提示。
進(jìn)程中的動(dòng)作。對(duì)于正處于進(jìn)程中的動(dòng)作也需要給出反饋。比如將輸入框邊框換一個(gè)顏色表示正在進(jìn)行輸入。用戶(hù)點(diǎn)擊提交按鈕后即時(shí)給出反饋，防止用戶(hù)二次誤操作。如果提交表單需要較長(zhǎng)時(shí)間，展示提交進(jìn)度，避免用戶(hù)感到迷惑。
第六、讓表單更加智能。
智能默認(rèn)。設(shè)置滿(mǎn)足多數(shù)人需要的默認(rèn)選擇，能夠幫助用戶(hù)節(jié)省時(shí)間，為用戶(hù)提供參考意見(jiàn)。某些時(shí)候，用戶(hù)可能會(huì)忽視默認(rèn)選擇，所以需要保證默認(rèn)選項(xiàng)符合大多數(shù)用戶(hù)利益，比如默認(rèn)用戶(hù)同意條款。
個(gè)性化默認(rèn)。對(duì)于地址、發(fā)貨方式、電話(huà)號(hào)碼等與個(gè)人相關(guān)的信息多次填寫(xiě)后會(huì)產(chǎn)生“粘性”，可以個(gè)性化默認(rèn)為用戶(hù)之前的選擇。但是某個(gè)選項(xiàng)填寫(xiě)多少次后產(chǎn)生“粘性”需要根據(jù)具體情況來(lái)分析，有表單只需選擇一次就設(shè)置為個(gè)性默認(rèn)選項(xiàng)。
保存表單進(jìn)度。當(dāng)一份表單過(guò)長(zhǎng)時(shí)，用戶(hù)可能因?yàn)橐恍┰驅(qū)е卤韱侮P(guān)閉，比如網(wǎng)頁(yè)崩潰、用戶(hù)誤操作、沒(méi)有時(shí)間填寫(xiě)。可以提供保存表單進(jìn)度功能，若用戶(hù)沒(méi)有完成表單就離開(kāi)，下一次再訪問(wèn)表單時(shí)保留上一次的填寫(xiě)進(jìn)度。
智能補(bǔ)充。一些信息其實(shí)不需要用戶(hù)填寫(xiě)，完全能夠根據(jù)已有信息得出答案，比如根據(jù)地址得到郵編，根據(jù)身份證號(hào)碼推測(cè)出生日。
用戶(hù)填寫(xiě)一些信息時(shí)，比如地址、用戶(hù)名等，可以根據(jù)用戶(hù)已經(jīng)輸入的內(nèi)容智能補(bǔ)充出剩下的內(nèi)容，為用戶(hù)提供參考。
