一、表單結(jié)構(gòu)
1、表單的設(shè)計
－設(shè)計原則
? ?盡量減少痛苦
? ?說明填寫完成途徑
? ?考慮情境
? ?確保一致溝通
2抛杨、表單的組織
－應(yīng)當采用“保留、刪減荐类、延遲怖现、解釋”策略評估表單問題
－表單標簽應(yīng)當盡量簡潔，如果簡潔容易造成誤解玉罐，那么最好使用自然語言
－可以利用主題間的自然間斷將表單內(nèi)容分組或分頁
－如果表單可自然分成若干主題屈嗤，一個網(wǎng)頁可能就足夠組織表單
－如果表單包含大量問題潘拨，同時有若干主題，可能需要多個網(wǎng)頁來組織表單
－如果表單包含大量問題恢共，而只和一個主題相關(guān)战秋，一般需要一個較長網(wǎng)頁來組織表單
－可以考慮在表單填完之后提出可選問題
－應(yīng)當采用最少的必要視覺信息來區(qū)分內(nèi)容組
3、完成之路
－確保表單名稱符合人們的期望
－如果表單需要時間或者需要查詢信息才能填寫讨韭，可以采用起始頁來設(shè)定人們的期望
－由始至終采用清晰瀏覽線和有效視覺步伐來引導人們
－對于關(guān)鍵任務(wù)表單脂信，比如結(jié)算或注冊表單，應(yīng)當去除一切可能分散人們注意力的內(nèi)容
－如果表單分為多個已知的有序網(wǎng)頁透硝，可以采用進程指示來傳達范圍狰闪、狀態(tài)和位置等信息
－如果表單沒有清晰的有序網(wǎng)頁，應(yīng)當采用更籠統(tǒng)的進程指示來避免設(shè)置錯誤期望
－設(shè)計表單布局時濒生，應(yīng)當考慮使用Tab鍵的跳轉(zhuǎn)體驗
－可以采用“tabindex”HTML屬性來控制表單的跳轉(zhuǎn)順序
二埋泵、表單元素
1、標簽
－每個表單都至少有三個基本元素：標簽罪治、輸入框和動作
－標簽負責提出問題丽声，輸入框給予空間填寫信息，動作允許人們提交答案
－標簽要盡量對齊觉义，采用何種對齊方式應(yīng)考慮具體目標和制約因素
－頂對齊 優(yōu)點：標簽和相關(guān)輸入框相鄰／能夠快速填寫
? ? ? ? ? ? ? 缺點：占用垂直空間增加
－右對齊 優(yōu)點：標簽和相關(guān)輸入框相鄰／占用垂直空間較少
? ? ? ? ? ? ? 缺點：可讀性降低
－左對齊 優(yōu)點：容易瀏覽標簽／占用垂直空間較少
? ? ? ? ? ? ? 缺點：標簽和相關(guān)輸入框間距增大
－如果要減少填寫時間雁社，或者出于本地化原因，標簽長度靈活多變晒骇，可采用頂對齊標簽
－如果要減少填寫時間霉撵，但屏幕垂直空間有限，可采用右對齊標簽
－如果需要人們仔細瀏覽標簽洪囤，可采用左對齊標簽
－如果表單非常短徒坡，標簽問題比較簡單，可采用輸入框內(nèi)標簽
2瘤缩、輸入框
－應(yīng)當為所提問題提供合適輸入框：單選按鈕／復(fù)選框／文本框／下拉菜單…
－如有可能喇完，應(yīng)當確保輸入框長度能提供有意義的暗示
－如果不是上述情況，輸入框長度應(yīng)當保持一致
－盡量避免出現(xiàn)可選輸入框
－如果表單大部分輸入是必填項剥啤，標明必填項即可何暮，如果是選填項，標明選填項即可
－標明必填或選填铐殃，文字是最清晰的辦法
－“ * ”代表必填項比較容易理解海洼，但最好采用圖例解釋其含義
－將選項標識器與標簽相關(guān)聯(lián)，便于人們知道需要回答哪些問題
－如果輸入框存在自然結(jié)構(gòu)富腊，應(yīng)當通過視覺方式將輸入框進行分組
3坏逢、動作
－盡量避免表單中出現(xiàn)次動作，應(yīng)當向人們提供完成表單的單一路徑
－如果需要次動作，應(yīng)當確保主動作和次動作視覺差異清晰
－區(qū)別主動作和次動作的方式包括不同按鈕風格是整、按鈕和文字組合以及不同文字風格
－主動作應(yīng)當盡量與輸入框?qū)R
－應(yīng)當通過禁用主動作按鈕來提醒人們重復(fù)點擊主動作
－可以嘗試把服務(wù)條款和主動作整合成單一動作
4肖揣、幫助文字
－盡量減少表單中的幫助文字
－幫助文字最適合解釋人們不熟悉的數(shù)據(jù)：為何要問這問題、安全和隱私浮入、建議回答問題的方式及說明可選項
－簡潔的幫助文字毗鄰問題是最清晰的方式
－輸入框內(nèi)的幫助文字只能用于建議回答問題的方式
－如果人們知道表單問題答案龙优，但不確定如何回答或者為何回答，可以考慮自動即時幫助
－如果不熟悉的用戶需要訪問所有幫助而高級用戶只需偶爾觸發(fā)一些幫助來喚醒記憶或者快速回答問題事秀，可以考慮用戶激活的即時幫助
－如果幫助內(nèi)容過多彤断，可以使用一致的幫助區(qū)域
－圖標、鏈接或按鈕用于用戶激活的幫助文字觸發(fā)器易迹，應(yīng)該放在標簽旁而不是輸入框旁
5宰衙、錯誤與成功消息
－有錯誤發(fā)生時，應(yīng)當用錯誤消息明確告知
－應(yīng)當在情境中顯示錯誤消息睹欲，以便快速解決
－應(yīng)當提供可操作的補救措施供炼，幫助人們能夠輕松解決錯誤
－如果發(fā)生多個錯誤，可以考慮頂部錯誤消息窘疮，用來說明有錯誤發(fā)生以及相應(yīng)解決方案
－如果輸入框發(fā)生錯誤袋哼，應(yīng)當采用雙重視覺強調(diào)清晰標示
－從視覺上將表單出錯元素與頂部錯誤消息聯(lián)系起來，清晰傳達錯誤
－紅色文字和警告圖標適用于錯誤消息
－短表單可不采用頂部錯誤或者標明發(fā)生錯誤的輸入框
－表單填寫成功時闸衫，應(yīng)當用成功消息顯示結(jié)果
－應(yīng)當在情境中顯示成功消息涛贯，不要阻止進程
－避免成功消息頁面成為死胡同
三、表單交互
1楚堤、即時驗證
－考慮使用即時驗證以確認或者建議有效答案，幫助人們在限制范圍內(nèi)輸入
－即時確認適用于錯誤率高或者有特定格式要求的問題
－即時建議適用于有大量可供選擇有效答案的情況
－即時密碼強度指示條能實時反映人們所設(shè)密碼的強度
－如果需要即時驗證答案含懊，應(yīng)當在人們輸完答案之后而不是在輸入過程中進行
－如果有輸入限制身冬，應(yīng)當采用實時、動態(tài)更新的方法傳遞輸入限制
2岔乔、多余輸入
－檢查表單問題酥筝，去除多余問題
－通過智能默認設(shè)置滿足多數(shù)人需要的默認選擇
－設(shè)置個性化默認選擇，使人們能更快完成表單
3雏门、額外輸入
－額外輸入可以提供更多選項或高級選項嘿歌，滿足有需要的用戶，同時不妨礙不需要的用戶
－根據(jù)人們需求的優(yōu)先次序安排額外輸入：主要用例總是可見茁影，次要用例點擊添加可見
－確保觸發(fā)額外選項的操作措辭明確宙帝，如果自動觸發(fā)，應(yīng)當提供線索（圖標和文字）來預(yù)設(shè)期望
－如果需要顯示大量額外輸入募闲，可以考慮采用疊層方式代替即時顯示方式步脓，避免表單跳動
－確保疊層不會遮住幫助人們填寫的輸入框，確保人們?nèi)匀豢梢宰孕刑顚?/p>
－如果額外選項需要單獨考慮，應(yīng)當使用彈出式疊層
4靴患、基于選擇的輸入
－如果每個初始選項的額外輸入選項數(shù)量較多，那么網(wǎng)頁級別的基于選擇輸入可能最好
－垂直選項卡和水平選項卡都能較好地進行初始選項的選擇
－如果初始選項列表較長农渊，最好能針對額外選項采用下拉列表和視覺分組
－如果每個初始選項只有幾個額外的輸入選項饭宾，單選按鈕下方顯示或者按鈕內(nèi)顯示最好
－應(yīng)當保持初始選項之間的聯(lián)系清晰以及初始選項與相關(guān)額外選項之間的聯(lián)系清晰
5徽鼎、循序漸進
－可以考慮采用循序漸進的方式避免出現(xiàn)注冊表單或者讓人們不會意識到正在填寫表單
