一、表單結(jié)構(gòu)

1 表單的設(shè)計

由內(nèi)而外設(shè)計： 根據(jù)數(shù)據(jù)庫內(nèi)部設(shè)計，直接請求“給我需要的信息”以便更新或創(chuàng)建記錄，該請求就以表單形式出現(xiàn)在人們面前。
由外而內(nèi)設(shè)計： 以組織會網(wǎng)站外部人的角度看待事物。

表單阻礙著用戶需求(人們想從產(chǎn)品或服務(wù)得到東西)和商業(yè)目標(運營這些服務(wù)的公司希望基業(yè)長青)，表單設(shè)計的重要性不言而喻。

衡量表單設(shè)計影響的方式

可用性測試：在可用性實驗室中觀察人們與表單如何交互，得到寶貴的定性和定量信息。

• 錯誤或問題的數(shù)量和位置；
• 錯誤或問題的嚴重程度；
• 完成率；
• 完成整個或部分表單的時間；
• 滿意度評分；
• 任務(wù)主觀評論。

實地測試：從人種學角度觀察人們在家中或辦公室中與表單的互動情況。

• 訪問表單，要求填寫信息的來源：文檔、軟件和人等；
• 表單的填寫環(huán)境：吵鬧的辦公室和小監(jiān)視器等；
• 任何說明表單完成或錯誤率的額外情境。

客戶支持：了解用戶填寫表單時碰到的問題，有利于分離和解決問題。

• 報告最多的問題；
• 解決報告問題的常見方法；
• 問題報告人的統(tǒng)計信息；
• 問題報告人所使用的操作系統(tǒng)及其瀏覽器設(shè)置。

網(wǎng)站追蹤：表單可用于追蹤任意數(shù)量的有用量化指標。

• 完成率；
• 如果表單未完成，人們是在哪個位置放棄填寫的；
• 人們訪問表單的方式；
• 已使用哪些表單元素；
• 已輸入哪些數(shù)據(jù)；
• 瀏覽器和操作系統(tǒng)信息。

眼動追蹤：記錄人們?nèi)绾卫斫獗韱蔚谋憩F(xiàn)形式，用于解釋復(fù)雜的地方。

• 人們在表單上看到了什么；
• 眼球固定次數(shù)：解析表單所畫的努力；
• 眼球固定時間長度：看每個元素所花費的時間。

Web慣例：調(diào)查表單設(shè)計問題的共同解決方案，可提供寶貴見解。

• 設(shè)計問題的獨特解決方案；
• 網(wǎng)上通用的模式。

設(shè)計原則

• 盡量減少痛苦：填寫過程應(yīng)盡量簡潔、容易；
• 說明填寫完成的路徑：應(yīng)清晰告訴人們?nèi)绾翁钔瓯韱危?/li>
• 考慮情境：情境決定了如何使用表單；
• 確保一致溝通：表單是用戶和公司間的中間人，多個團隊(市場部、技術(shù)部等)參與對話，但表單只能用一種聲音說話。

2 表單的組織

用戶需要分析每個問題、想出答案、填空，加速該過程的最好方法是完全不要提問，因此應(yīng)當測試每個問題：一定要問嗎？能自動獲得資料嗎？有沒有更合適的時間或場所能得到答案？你也許會恍然大悟表單中的問題原來是可以刪除的。

保留、刪減、延遲、解釋四大策略選取問題

用戶真正關(guān)心的是問題內(nèi)容和所問原因，并且是否符合情境，是否與用戶希望填完能獲得的東西匹配。
思考人和關(guān)系，再思考在什么位置加入問題。例如為什么用戶會填？用戶和公司是什么關(guān)系？用戶覺得這種關(guān)系是好是壞？表單能否進一步激發(fā)用戶對產(chǎn)品、服務(wù)的持續(xù)熱情？表單只是阻礙用戶實現(xiàn)目的的可怕障礙？
以地址為例，如果在瀏覽前必須把地址告訴網(wǎng)站，用戶會反感，可能會使用虛假回答，但如果決定購買，而網(wǎng)站問你地址，你會小心、準確的填寫。

• 保留：問題與用戶渴望給出的答案匹配，那么留下并開始考慮設(shè)計細節(jié)；
• 刪減：問題不需要得到答案，或能自動獲得答案，那么刪掉，減少用戶工作；
• 延遲：問題不需要馬上就問，延遲到不會讓人感覺多余或有侵略性；
• 解釋：用戶不想回答、需要研究思考的問題，但對公司有價值，并有重要理由必須問，那么解釋編寫簡短但清晰的理由，要確保能為用戶帶來好處。如果想不出，從頭思考是否需要該問題，否則你將失去用戶。

構(gòu)建對話

以對話方式組織表單結(jié)構(gòu)將有助于思考問題。標簽負責提出問題，輸入框負責收集用戶答案。在構(gòu)建對話時，需要留意以下問題：

• 考慮如何以對話形式而不是盤問形式組織表單；
• 標簽是否通俗易懂，是否使用客戶能理解的語言而非專業(yè)術(shù)語，如發(fā)卡行與哪家銀行簽發(fā)此文件，與哪家銀行給的文件；
• 標簽是否平易近人；
• 清晰明確的對話語言往往將有助于將問題解釋清楚。

組織內(nèi)容

根據(jù)問題數(shù)量和情景，將問題分成有意義的組，并分到多個或單個網(wǎng)頁的不同部分。
理解每個表單的情境，誰要填？為什么要填？幫助我們將表單看作是與特定的人對話，主題之間就會自然出現(xiàn)間斷。如果主題鮮明簡短，一個網(wǎng)頁就能組織；如果每部分都變長，可能需要多個網(wǎng)頁把對話變成若干有意義的、可理解的主題。

Web慣例調(diào)查，比較相似網(wǎng)站的設(shè)計方案，觀察特定領(lǐng)域中表現(xiàn)最佳的網(wǎng)站，以確保進行對比的網(wǎng)站采用共同成功措施。應(yīng)當從發(fā)現(xiàn)的模式開始工作，而不僅僅停留于賦值競爭對手網(wǎng)站的做法。

歸納區(qū)別

內(nèi)容組之間的差別不需要大量視覺差異。事實上，內(nèi)容組之間對比太多往往造成過多視覺污染，會阻礙人們?yōu)g覽表單，無法聚焦在表單內(nèi)容上，花費時間更長。
信息由產(chǎn)生作用的差異構(gòu)成，任何無助于布局的視覺元素都會損害布局。因此，在考慮區(qū)分內(nèi)容組時，應(yīng)采用最少的視覺信息。

3 填寫路徑

命名表單

告訴人們，在填什么表單，填完之后能干什么。要求用戶采取的行動保持一致至關(guān)重要，即表單名稱與進入的子頁面名稱需要一致。

起始頁

如果表單要求用戶提供大量信息，而用戶不可能有現(xiàn)成或大量時間來填寫，起始頁就能提供寶貴的情境信息：填寫需要哪些信息、分幾個主題步驟、整個過程大概多久。
只有需要花費大量時間的表單才考慮使用起始頁說明路徑。

瀏覽線

標簽、輸入框及主要動作按鈕構(gòu)成垂直軸，提供貫穿表單的單一路徑。設(shè)計良好的瀏覽線能恰當設(shè)置問題之間的視覺空間，不會錯過任何重要信息。一般，采用輸入框高度的50%~75%作為問題之間的間隔。

圖3.4 雖然第一個表單內(nèi)容組之間采用有意義的區(qū)分，但第二個提供了清晰路徑，用戶只需遵循向下的直線.jpeg

最少分散注意力

剔除與表單沒有直接關(guān)系的界面元素，有助于用戶完成填寫表單任務(wù)。額外元素對關(guān)鍵表單而言，最好的情況也會分散注意力，最壞時候造成用戶不填寫表單了。

進程指示

如果完成表單之前要回答的問題分散在多個網(wǎng)頁，那么通過表單顯示填表進展情況是很有用的。

圖3.7 顯示范圍、當前位置和狀態(tài)的信息.jpeg

表單范圍：總頁數(shù)列表來說明，填完需要多長時間？每塊內(nèi)容與每步之間有何區(qū)別？
當前位置：相對于整個表單，用戶所處位置。
表單狀態(tài)：說明表單是否已提交以及上次保存時間，如果表單較長，提供保存或系統(tǒng)自動保存功能是保證用戶填完表單的好辦法。

如果表單沒有清晰的有序網(wǎng)頁，采用籠統(tǒng)、沒有明確設(shè)置期望值的進程指示。

Tab鍵跳轉(zhuǎn)

利用HTML的tabindex屬性明確指定表單順序。
大多數(shù)用戶會使用Tab鍵在輸入框間移動，混亂不堪的順序會給用戶很糟糕的體驗。

二、表單元素

4 標簽

圖4.1 左對齊、右對齊、頂對齊.jpeg

混合對齊
應(yīng)當避免改變同一表單中的標簽對齊方式，減輕一致性問題，因為不同對齊方式會模糊用戶尋找完成表單的明確路徑。

5 輸入框

輸入框的類型有文本框、單選框、復(fù)選框、下拉框、列表框5種。
輸入框的長度：可以暗示填表時有用的線索，答案長度與輸入框長度是否匹配，但最好不要讓用戶考慮太多，而如果無法受益于暗示，就應(yīng)當采用一致的長度。
必填項：建議在少數(shù)問題可選或必填項上，用文字optional/required來代替*，放在標簽文字的后面，而不是輸入框后面。

6 動作

主動作：完成表單填寫是最主要行為
次動作：與完成表單填寫相悖的行為

如何區(qū)別主動作與次動作？

我們的目標是，減少次動作的視覺表現(xiàn)，潛在出錯率降到最低，并進一步引導用戶成功填完表單。
那么主動作與次動作在表現(xiàn)形式上應(yīng)當有多少差異？
用綠色標識主動作或圖標、紅色標識次動作或圖標，能有效區(qū)別兩者。因為紅色與錯誤密切聯(lián)系，常被用來說明不好的事情。

謹慎放置表單動作，主動作和輸入框?qū)R會減少填寫表單的時間。

如何避免重復(fù)提交？

1、主動作前提醒用戶不要點擊兩次，會加重用戶負擔，可以用動畫和提交中的文本信息代替，過程會變得更清晰。
2、在填寫符合要求前，禁用并可見主動作，但如果表單含有可選問題時，應(yīng)避免該方法。

同意協(xié)議和主動作的處理

大多數(shù)表單都帶法律條款，確保新會員同意。
1、“立即注冊”與“同意并立即注冊”，好處是用戶少回答一個模棱兩可的問題。
2、將協(xié)議和提交分為兩個元素，復(fù)選框確認協(xié)議，按鈕完成表單，復(fù)選框未勾選，禁用主動作。

7 幫助文字

幫助文字，基本上是一套幫助用戶成功填表的信息。
當用戶不懂專業(yè)術(shù)語、質(zhì)疑為什么要填、關(guān)心隱私安全問題、系統(tǒng)推薦填寫方式(如逗號分開標簽)、少數(shù)可選或必填時，需要在毗鄰輸入框處，放置簡潔清晰的幫助文字。

動態(tài)幫助系統(tǒng)，自動觸發(fā)或通過明確的用戶操作進行訪問，解決幫助文字超過表單長度的問題。

• 幫助文字出現(xiàn)在右側(cè)：圖7.4，總是出現(xiàn)在輸入框右側(cè)，但與輸入框完全沒有關(guān)系，是對標簽的說明；
• 幫助文字懸浮出現(xiàn)：圖7.5，很容易與問題產(chǎn)生聯(lián)系，但會遮住其他輸入框；
• 幫助文字用于輸入組：適用于一組相關(guān)輸入框。

圖7.4.jpg

圖7.5.jpg

圖7.6.jpg

但動態(tài)幫助系統(tǒng)有一個潛在缺點，只有開始填表時，用戶才知道是否有幫助文字。而需要幫助的用戶會覺得失望，不愿意嘗試?？梢圆捎幂斎肟騼?nèi)顯示幫助文字的方式(hint)。

用戶激活的動態(tài)幫助系統(tǒng)
1、鼠標指針連續(xù)保持在觸發(fā)熱點500ms，顯示懸浮幫助框，如果指針離開，幫助框消失。幫助框與圖7.5相似。
2、點擊彈出幫助新窗口，但窗口攔截器導致不夠理想。
3、開辟毗鄰相近固定區(qū)域，顯示幫助內(nèi)容，受幫助文字長度和個數(shù)限制較多，不好布局。
4、右側(cè)幫助面板，可隱藏、可更新內(nèi)容。

8 錯誤與成功

錯誤消息：不能被忽略或置之不理，必須要解決錯誤。
成功消息：不能阻礙用戶進程，鼓勵用戶采取更多行動。

雙重視覺強調(diào)

標簽和輸入框置為紅色，同時在輸入框下方增加紅色指導文字。只改變標簽顏色，不足以引起色盲人士的注意。
確定了一種視覺處理方式來表現(xiàn)輸入錯誤，應(yīng)確保該風格匹配表單上任何主要錯誤消息，有助于人們找到相關(guān)點。

多個錯誤或錯誤不是某個特定輸入框產(chǎn)生

1、突出消息，表明發(fā)生錯誤
2、雙重視覺強調(diào)每個產(chǎn)生錯誤的輸入框
3、同時在兩處(頂部和出錯的輸入框處)給出清晰的解釋和操作，幫助用戶迅速解決錯誤
4、當表單較長，發(fā)生錯誤的輸入框在可見區(qū)域之外時，跳到表單的第一個錯誤處。

成功消息

應(yīng)當確保用戶知道成功填完表單，并快速給予用戶應(yīng)得的表揚。
成功消息不能阻礙進程，自動移除是合適的做法，最好采用動畫形式，如漸變、融化、滾動等。

消滅死胡同

成功消息，還應(yīng)包括剛完成任務(wù)關(guān)聯(lián)的有用后續(xù)操作，明確告訴用戶下一步該做的事情，永遠不要丟下用戶不管！避免頁面成為死胡同。

三、表單交互

9 即時校驗

即使校驗，在輸入開始、繼續(xù)、停止的時候，直接反饋有助于確保用戶回答有效。

確認答案正確性

在當前輸入框填寫有值并移入下一個輸入框時，對該答案進行驗證，將信息實時更新并反饋給用戶，防止用戶陷入錯誤循環(huán)。同時，也能避免主動作一次性校驗所有輸入框，分散注意力，引起部分用戶的反感。
信息，應(yīng)簡單易懂，甚至告訴用戶修改的方法，起到引導的作用。如“用戶名已被占用，試試加上數(shù)字”、使用密碼強弱尺引導用戶設(shè)置安全性更高、更復(fù)雜的密碼代替“從內(nèi)而外”設(shè)計的移入下一輸入框時的即時校驗。

自動補全提供即時建議

如果有一組特定答案都有效，但范圍太大，無法設(shè)計成簡單的用戶界面，此時，自動補全能確保用戶提供有效答案。
比如，機場代碼，可能知道部分答案，然后輸入“ord”就會出現(xiàn)一組有效答案，用戶選擇即可。

限制輸入框的輸入內(nèi)容

有些問題沒有明確定義的答案，但有明確定義的限制。限制后，有助于避免潛在錯誤。比如限制輸入框字數(shù)、輸入數(shù)據(jù)類型等。

10 多余輸入

要小心設(shè)置每個問題，如果某個問題并非必要，要么可以去除，要么可以在更好的時間或位置提出，要么可以自動推斷出答案。提的問題越少，用戶就能越快越容易填完表單。

策略應(yīng)付無處不在的過多選擇，采用智能默認幫助用戶做出明智選擇，減少必要的選擇次數(shù)。如默認勾選同意捐贈器官、根據(jù)身份證號默認性別、根據(jù)訪問IP默認國家等等。
但智能默認會誘使公司更多考慮商業(yè)，較少為用戶考慮，如有可能，應(yīng)當確保符合用戶利益。

個性化默認，保持用戶之前的選擇。某個選項被選擇多少次后，就設(shè)為個性默認選項，減少用戶操作次數(shù)。

11 額外輸入

高級選項：點擊按鈕，動態(tài)添加刪除視圖，提供給需要的人，同時不阻礙不需要的人。
頁面跳動會導致表單已有內(nèi)容下移，擾亂用戶對所處位置的感知，應(yīng)當減少表單頁面的跳動次數(shù)。

疊層/對話框：額外輸入框出現(xiàn)在表單上方。
靜態(tài)疊層窗口：在額外輸入需要單獨關(guān)注時使用，并確保不會遮住輸入框。彈出時，表單其他部分本質(zhì)都被禁用，只能修改額外輸入框。

類別選擇器：如父子類別的選擇器、省市區(qū)選擇器等。

12 基于選擇的輸入

基于選擇的輸入：根據(jù)用戶的回答，出現(xiàn)一系列要回答的后續(xù)問題。而出現(xiàn)什么問題基于最初的選擇。

圖12.4 水平選項卡.jpg

圖12.6 垂直選項卡.jpg

圖12.8 下拉列表.jpg

圖12.9 單選按鈕下方顯示.jpg

圖12.10 單選按鈕內(nèi)顯示.jpg

圖12.11 顯示非活動選項.jpg

圖12.12 組的顯示.jpg

頁面級選項
采用兩個單獨的網(wǎng)頁，第一頁顯示初始選項，用戶選擇其中一個，就會出現(xiàn)相關(guān)的選擇性輸入，取代初始選擇。

13 循序漸進

循序漸進：在用戶了解產(chǎn)品主打服務(wù)后再注冊。
考慮一系列交互如何向潛在用戶說明如何使用以及為什么要使用你的服務(wù)，來判斷該產(chǎn)品是否適合循序漸進。
但如果只是把注冊的輸入框拆分到不同頁面，就不要使用循序漸進。因為可能會降低效率，也使用戶感覺不快。