您最近填寫過在線表單了嗎？

答案應(yīng)該是肯定的。根據(jù)最近的研究，84% 的人每周至少會(huì)填寫一份線上表單。

雖然你可能沒有感受到，但在線填表單已經(jīng)成為我們生活中不可或缺的一部分了。

其實(shí)，幾乎每個(gè)把用戶由 A 帶向 B 的線上交互都是一個(gè)網(wǎng)絡(luò)表單：與某個(gè)公司聯(lián)系、訂火車票、購物、訂一晚酒店等等。

網(wǎng)絡(luò)表單最早在 1994 年開始用于在線銷售，第一個(gè)拖拽式表單 2006 年在屏幕上出現(xiàn)。從那時(shí)起，表單已經(jīng)成為線上交互的關(guān)鍵。

企業(yè)和客戶之間需要通過網(wǎng)站進(jìn)行聯(lián)系，小到縣城的官網(wǎng)，大到國家政府網(wǎng)站，現(xiàn)在很難想像一個(gè)沒有網(wǎng)絡(luò)的世界。

但為什么線上表單一直備受詬??？

當(dāng)然，確實(shí)沒幾個(gè)人喜歡填表，但大多數(shù)人絕對不會(huì)介意填寫那些清晰、簡潔、設(shè)計(jì)優(yōu)秀的表單。

其實(shí)這也就是癥結(jié)所在。太多的在線表單冗長、令人迷惑或讓人感到有所冒犯（有時(shí)甚至三者同時(shí)出現(xiàn)）。

當(dāng)表單產(chǎn)生讓人迷惑，或提出的要求超出必要范圍時(shí)，用戶的放棄幾率就會(huì)大大增加。 有些用戶可能會(huì)放棄填寫，甚至退訂整個(gè)業(yè)務(wù)。無論是以上哪種情況，您都不會(huì)再有第二次機(jī)會(huì)。

在設(shè)計(jì)一個(gè)表單的時(shí)候，我們怎么保證用戶能填到最后一步？

「創(chuàng)建一個(gè)表單很簡單，難的是讓人填完它?！?

在幫助 420 萬用戶創(chuàng)建線上表單后，我們在 JotForm 發(fā)現(xiàn)了一件重要的事情，就是一些小小的改變會(huì)讓整個(gè)事情大有改觀。通常，這些改變都是從那些被放棄的表單中獲得的靈感。

例子：

• HubSpot 發(fā)現(xiàn)，當(dāng)一份 14 頁的潛在用戶登記表，被放在一個(gè)單獨(dú)的登錄頁上時(shí)，用戶填完的可能性要高出 17%。
• Marketo 發(fā)現(xiàn)，一些非關(guān)鍵的填寫區(qū)域，反而讓每位潛在客戶的線索成本上漲了 25%。

表單設(shè)計(jì)成什么樣呢？應(yīng)該直觀、簡單以及體驗(yàn)友好。以下是一些推薦的參考方法。

第一部分：表單的主要元素

1. 歡迎填表者：標(biāo)題與介紹

無論是誰，歡迎朋友的時(shí)候難道不會(huì)說「你好嗎？」我們都知道禮貌的重要性，但是在線上卻往往忽略了這一點(diǎn)。

歡迎頁和標(biāo)題讓您有機(jī)會(huì)以一種清晰而友好的方式介紹表單和自己，而且還會(huì)留下一個(gè)良好的第一印象。

看看 BettingExpert 的數(shù)據(jù)吧：通過修改表單標(biāo)題來強(qiáng)調(diào)「注冊理由」以后，他們的注冊率提高了31.54%。

標(biāo)題是對下文最短最精的概括。用戶一般都會(huì)跳過表單內(nèi)容，而且?guī)缀醵疾粫?huì)仔細(xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說清楚一個(gè)表單的目的尤其重要。

標(biāo)題可以簡單理解為描述被調(diào)查者對表格的期望。盡可能保持中立：要確保應(yīng)答者誠實(shí)回答，而不是去滿足出題者的設(shè)想。甚至像陳述一個(gè)目標(biāo)這樣簡單的事情，也可能會(huì)不知不覺地誘使應(yīng)答者試圖迎合。

而且現(xiàn)在也需要一份清單，說明應(yīng)答者應(yīng)該事先準(zhǔn)備的外部文件，沒人想中途去滿屋子找納稅證明或者護(hù)照。

如果填表需要很長的時(shí)間去完成，一定要提前告知用戶。不過如果是又快又簡單的？讓用戶感到驚喜吧(但不要冒險(xiǎn)侮辱任何人的智力，以防萬一)。畢竟，他們能夠通過查看進(jìn)度條或字段數(shù)量來推斷出這一點(diǎn)。

2. 放置相關(guān)的標(biāo)題和副標(biāo)題

一個(gè)有趣的事實(shí)：人類會(huì)在 50 毫秒內(nèi)形成第一印象。重點(diǎn)：由于時(shí)間不夠長，他們無法仔細(xì)閱讀你的作品。

表單用戶很可能就是快速瀏覽一小部分內(nèi)容，忽略大部分內(nèi)容。而且有很大可能是他們正在忙著其他事情，無法集中注意力或者幾乎就沒有什么耐心，只想要快點(diǎn)結(jié)束。

顯然，我們無法阻止用戶，所以只能通過簡潔明了的標(biāo)題來引導(dǎo)他們。標(biāo)題絕對是個(gè)得力助手：可以將文本結(jié)構(gòu)化、清晰化、保持用戶的參與度。

用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做，而不是非得把剩下的全部看完。

測試這一點(diǎn)的最好方法是單獨(dú)閱讀標(biāo)題，是否能讓人看懂呢？

3. 問題之間要有分隔符

分隔符很重要。就傳統(tǒng)表單來說，在視覺上把問題隔開以達(dá)到減少干擾的最好方法，就是使用分隔符。并不需要在視覺上做出很大的區(qū)別，區(qū)別太大反而容易分散用戶注意力。

4. 多頁面表單或單頁表單？

這主要取決于表單有幾個(gè)議題。

如果只有1，2個(gè)議題，單頁表單肯定是最佳選擇。但是如果一個(gè)表單有很多議題，那么就需要多頁表單來呈現(xiàn)。想象一下：用戶在面對一個(gè)似乎有成千上百議題的表單時(shí)，得有多心煩。

5. 強(qiáng)調(diào)「行動(dòng)召喚」（CTAs，Calls-to-Actions）

成功的「行動(dòng)召喚」強(qiáng)調(diào)的是「行動(dòng)」部分：單擊這個(gè)按鈕，用戶要執(zhí)行什么操作？類似「發(fā)送」，「注冊」或者「過程」之類的通用標(biāo)簽并不會(huì)削弱召喚機(jī)制。描述越多越好。

為了消除不確定性，試著從用戶的角度回答一下這個(gè)問題「我想干什么？」舉個(gè)例子，如果是某項(xiàng)服務(wù)的調(diào)查表單，那就應(yīng)該是「我需要免費(fèi)咨詢」。

還需要更多證據(jù)嗎？在這類研究中，Unbounce 發(fā)現(xiàn)只是把「開始你的試用」換成「開始我的試用」，就提高了90% 的點(diǎn)擊率。

6. 標(biāo)明表單中的區(qū)域

這并不是說要弄得花里胡哨的……

單選框、挑選區(qū)域和復(fù)選框之所以有效，是因?yàn)樗鼈兗群唵斡殖Ｒ?。表單元素的?biāo)準(zhǔn)格式等同于更好的可用性。

單選框適用于有很多選項(xiàng)而只有一個(gè)可選的情況。復(fù)選框用在多項(xiàng)選擇的情況下最好。

為了更短的認(rèn)知適應(yīng)過程，要盡可能地使用多選框或者單選框而不是下拉菜單。就像 Luke Wroblewski 說的：「下拉菜單應(yīng)該是 UI中的最后選擇。」

7. 別忘了「感謝」頁面

記住用戶是花時(shí)間的。所以千萬不要唐突結(jié)束，要記得說謝謝。

第二部分：怎么寫用戶才愿意看

以下是一些關(guān)于表單書寫藝術(shù)的小建議。

1. 言簡意賅

從形式上來說，我們都更喜歡簡單的語言，尤其是那些學(xué)者，天才和專家。那為什么還有那么多線上對話像是復(fù)讀機(jī)一樣？

「請接受來自我們最誠摯的道歉。即便如此，我們還是希望能知道您的建議。除此之外……」

像一個(gè)老學(xué)院派那樣說話只會(huì)疏遠(yuǎn)用戶，讓他們瞠目結(jié)舌。

簡單不意味愚蠢，而是等于可讀性。這意味著最清晰的平白直述。每個(gè)詞語都應(yīng)該是最短，最直接的版本，能用「不過」就別用「盡管如此」。不用行話，不寫復(fù)雜句。

你可以通過大聲朗讀來檢查連貫性。耳朵能夠聽到眼睛看不到的東西，特別是在描述那些冗長復(fù)雜概念的時(shí)候。

2. 擬人化

一份表單應(yīng)該就像是你和填表者之間的對話。通過用「我」，「你」，「你的」這些代詞來擬人化。

3. 減少被動(dòng)句

主動(dòng)語態(tài)的表達(dá)（比如：約翰寫了一封投訴信）比被動(dòng)語態(tài)（比如：一封投訴信由約翰寫出）更加有力。

被動(dòng)語態(tài)會(huì)更冗長，不夠集中。

（譯者注：以下文章中帶橫線的內(nèi)容適用于英語語法，不感興趣的讀者可自行跳過。）

一個(gè)被動(dòng)語態(tài)句子究竟有多糟？這是兩點(diǎn)教訓(xùn)：

• 動(dòng)作的執(zhí)行者不夠清晰（一封信被寫錯(cuò)了）
• 這個(gè)句子的 Be 動(dòng)詞（to be ,has been,was）后面跟著一個(gè)過去分詞。

還是不確定？你可以去查一下微軟 Word 可讀性標(biāo)準(zhǔn)，或者普渡大學(xué)語句方法。

4. 盡可能地刪減詞語

許多作者都會(huì)陷入這樣的思維誤區(qū)：用的詞越多，就顯得他們越聰明。其實(shí)不是這樣的。在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。

「你刪掉的每一個(gè)詞，都會(huì)為你多增加一個(gè)讀者?！?

在仔細(xì)檢查不必要的詞語后，文章會(huì)更篤實(shí)，更連貫，更吸引人。

刪減重點(diǎn)：

• 副詞（以ly結(jié)尾）。
• 無意義的量詞（很多，大量）。
• 空洞的程度形容（副）詞（非常，特別，尤其）。
• 「that」這個(gè)詞。
• 非必要信息。
• 模糊詞（東西，少量，大量）。

5. 盡可能使用縮寫

比起完整形態(tài)（比如 cannot，is not），語句的縮寫形式（比如 can’t，isn’t）能夠讓文章看起來更簡潔，友好和易讀。

另外，還能節(jié)省文字篇幅。一份優(yōu)秀的表單閱讀性都不錯(cuò)。

What’s 優(yōu)于 What is。很簡單。

6. 長句變短句

冗長曲折的句子容易讓人難以理解。密密麻麻的文字堆也是如此。

對于大多數(shù)讀者來說，每個(gè)句子最多 20 個(gè)單詞，每個(gè)段落最多 3 個(gè)句子，是最合適的。把每個(gè)長句都擴(kuò)成兩個(gè)短句。短句實(shí)際上并不遜色。

使用空格，項(xiàng)目符號，表格以及打破繁瑣說明的任何其他元素，都會(huì)使您的讀者松一口氣。

7. 檢查文字

在我寫博客的過程中，我（艱難地）認(rèn)識到，優(yōu)秀的文章是 30％ 的寫作加上 70％ 的編輯。

當(dāng)你完善了問題，精簡了文字和內(nèi)容后，把表格存儲(chǔ)好。隔幾天再回過頭來看，你會(huì)發(fā)現(xiàn)有些之前沒有發(fā)現(xiàn)的地方還可以再改進(jìn)。

第三部分：表單心理學(xué)

大多數(shù)用戶體驗(yàn)的心理學(xué)原理其實(shí)都在人們的潛意識中，所以難以讓人注意到。

但是每種顏色，字體，線條和按鈕都有其用途。

日常的小規(guī)模設(shè)計(jì)可能不如十億美元的營銷活動(dòng)那么引人注目。但小設(shè)計(jì)也需要花心思。而且，研究令人愉悅的設(shè)計(jì)背后的心理學(xué)機(jī)制很有意思，成本也不高。

以下是一些關(guān)鍵的心理原則，這些原則構(gòu)成了設(shè)計(jì)優(yōu)良的表格的堅(jiān)實(shí)基礎(chǔ)。

1. 比較成本和收益

我們做出的每一個(gè)決定，從倒垃圾到訂婚，都要經(jīng)過我們頭腦中的自動(dòng)成本收益分析。一項(xiàng)任務(wù)的成本是否值得完成后的收益？

設(shè)計(jì)師的工作是確保用戶在感知上收益是大于成本的。

當(dāng)然，成本與收益是主觀的，填表通常源于義務(wù)，而不是受訪者希望從中獲益的行為。除非給受訪者獎(jiǎng)勵(lì)，否則無法確保收益。但是我們可以把成本降到。

降低受訪者成本的一些關(guān)鍵策略:

2. 使用文本塊

+1-919-555-2743 vs 19195552743.

哪個(gè)電話號碼會(huì)留在你的腦海里？當(dāng)然是第一個(gè)。那是因?yàn)樗环謮K了。

組塊是一種方便的記憶技術(shù)：我們把它用于銀行個(gè)人識別碼、社會(huì)安全號碼和儲(chǔ)物柜代碼。它指的是將信息排列成「塊」的過程，使內(nèi)容更容易保留、處理和回憶。

研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。所以盡可能使用它：針對段落，列表，關(guān)鍵步驟等等。

3. 定義格式要求

如果可能，避免任意格式化規(guī)則。但如果是必要的規(guī)則，用紅色記號筆拼寫出來。填表單時(shí)，沒人愿意猜。密碼要求、語法規(guī)則、編號間距等等，如果一個(gè)字段需要特定的輸入，告訴用戶。

席克定律

如果我要舉辦一個(gè)晚宴，我總是選擇從當(dāng)?shù)匾患倚‰s貨店購買我的配料，而不是從一個(gè)雜亂無章的超市購買。那是因?yàn)橛刑嗟倪x擇往往會(huì)讓人感到麻木。這就是席克定律：它指出，隨著選項(xiàng)增加，做出決定的時(shí)間也在增加。

應(yīng)用到用戶體驗(yàn)領(lǐng)域，席克定律簡直就是去繁求簡的一劑良方：限制導(dǎo)航選擇，給用戶明確但受限的選項(xiàng)。因?yàn)殡S著設(shè)計(jì)靈活性的增加，它的可用性會(huì)降低。少即是多。

4. 下定決心（再次）刪除

這個(gè)鏈接有什么用？還是右上角的按鈕？如果并沒有增效，那就是減效。每一個(gè)字，每一張圖片，鈴鐺圖標(biāo)或者口哨圖標(biāo)都不是100% 必需的，這些都會(huì)降低你表單的轉(zhuǎn)換率。

尼爾·帕特爾稱只需刪除一個(gè)字段，他的聯(lián)系人表單提交率就可以提高 26%。

正如杜魯門·卡波特曾經(jīng)說過的，「我更相信剪刀，而不是鉛筆?！?

5. 減少打字需求

打字是在線表單中最耗時(shí)、最密集的部分，而且經(jīng)常會(huì)導(dǎo)致錯(cuò)誤——尤其是在手機(jī)上。用按鈕、滑塊替換文本框并使用自動(dòng)完成功能，將減少工作量并提高轉(zhuǎn)化率。

6. 用條件邏輯縮短表格

根據(jù) Marketing Insider Group 的調(diào)查，有 78％ 的互聯(lián)網(wǎng)用戶表示來自品牌的個(gè)人相關(guān)內(nèi)容會(huì)增加他們的購買意愿。而當(dāng)體驗(yàn)與用戶無關(guān)時(shí)，營銷活動(dòng)的效果將降低 83％。

因此，感謝條件邏輯！

條件邏輯（或「分支邏輯」）通過允許基于特定響應(yīng)的附加指令——類似：「如果這樣，那么」，簡化了復(fù)雜的流程。

使用條件邏輯將不會(huì)顯示與用戶無關(guān)的問題，從而減少完成表單的時(shí)間，從而使他們不太可能放棄前面的任務(wù)。

是的，這聽起來像是常識，但是大多數(shù)表單都會(huì)向每個(gè)用戶（無論他們是誰）提出相同的問題。使用條件邏輯是雙贏的，因?yàn)橥ㄟ^明確定義用戶細(xì)分，可以捕獲更干凈，更有用的數(shù)據(jù)。

雙重編碼理論

我說樹時(shí)。您就會(huì)想到樹干、綠葉、樹枝。

我們的大腦就像這樣聰明：它把圖像和文字聯(lián)系在一起。

這是雙重編碼理論背后的關(guān)鍵原則，該理論指出記憶有兩個(gè)不同但相互關(guān)聯(lián)的系統(tǒng)，一個(gè)用于文字信息(「樹」)，另一個(gè)用于視覺信息(「樹干、綠葉、樹枝」)。

當(dāng)某樣?xùn)|西以兩種方式(圖像和文字)被「編碼」時(shí)，它被理解和記住的幾率比僅僅以一種方式(圖像或文字)被編碼的幾率要高。

換句話說，將單詞和圖像配對會(huì)使它們更容易記憶。兒童書籍充分利用了這一點(diǎn)。在設(shè)計(jì)表單時(shí)，有兩種方法可以將雙重編碼理論付諸實(shí)踐。

7. 信息可視化

我們的大腦處理圖像比處理文本快得多。使用圖標(biāo)、照片、形狀等線索——無論什么有助于說明你的觀點(diǎn)——都會(huì)讓用戶體驗(yàn)更加直觀。

表單設(shè)計(jì)應(yīng)該是一致的，但這并不是說就不能加入一些小驚喜。通過使用非標(biāo)準(zhǔn)的界面元素——如可點(diǎn)擊的圖像和切換的滑塊——可以使表單填寫更加愉快和直觀。

8. 顏色

你知道嗎：用戶最初對產(chǎn)品的判斷有 90% 僅僅基于顏色？

實(shí)際上，根據(jù)營銷大師尼爾·帕特爾（Neil Patel）的說法，色彩是「購買特定產(chǎn)品的原因的 85％。」正確的組合可以使讀者人數(shù)提高 40％，理解力提高 73％，學(xué)習(xí)能力提高 78％。

你不需要成為一名設(shè)計(jì)師來找出哪種配色方案和對比效果最好。像 Adobe Color CC  和 Paletton 這樣方便的程序可以幫助你選擇一個(gè)能反映你公司形象的調(diào)色板。

9. 讓表單更漂亮

我們是膚淺的生物，習(xí)慣于相信有吸引力的設(shè)計(jì)在其他方面也更好：更快、更智能、更易用。這被稱為「審美可用性效應(yīng)」，漂亮的界面增加了我們的耐心和忠誠度，甚至讓我們更有同理心。

如果內(nèi)容或布局不吸引人，38% 的人會(huì)停止使用頁面。換句話說，如果線上表單看起來不漂亮(也不容易填寫)，那就是浪費(fèi)時(shí)間。

當(dāng)然，一百個(gè)人心里有一百個(gè)漢姆雷特。但是一個(gè)簡單的界面、干凈的字體和時(shí)尚的造型絕對會(huì)贏得用戶歡心。

進(jìn)度條效應(yīng)

如果我們知道我們已經(jīng)取得的進(jìn)展，我們就更有動(dòng)力去完成一項(xiàng)任務(wù)。特別是已經(jīng)領(lǐng)先進(jìn)度的時(shí)候，感知上的工作量會(huì)相應(yīng)減少，最終達(dá)到超預(yù)期效果。美國教授約瑟夫·努內(nèi)斯和澤維爾·德雷澤將這種現(xiàn)象總結(jié)為「進(jìn)度條效應(yīng)」——「當(dāng)人們能看到已付出的努力時(shí)，會(huì)更有動(dòng)力完成任務(wù)?！?

10. 以下是一些適用于表單的進(jìn)度條效應(yīng)的應(yīng)用方式：

問題排列從易到難

如果表單里的問題按照從簡單到困難的順序排列(而且保持邏輯順序)，用戶將快速完成表單的初始階段。這反過來會(huì)觸發(fā)連勝效應(yīng)：快速進(jìn)步和動(dòng)力感帶來的滿足感，讓用戶不愿意打破連勝。這意味著，當(dāng)表單變得更加苛刻時(shí)，用戶會(huì)繼續(xù)堅(jiān)持下去。

畫出進(jìn)度條

隨時(shí)反映用戶的進(jìn)度。用戶越接近目標(biāo)，就越有可能完成。如果表單是多頁的，請指出還有多少頁要完成。

一份來自 Clutch 的研究表明 90% 的用戶希望在線表單能有進(jìn)度條來管控他們的花費(fèi)時(shí)間。

第四部分：問題、回答和分組

1. 用頭腦風(fēng)暴討論題目

所有的表單的關(guān)鍵都是題目。特別是在頭腦風(fēng)暴討論題目的時(shí)候，最好的就是從目標(biāo)出發(fā)，倒推回來。

所以你的第一個(gè)問題就是：你的表單的目的是什么？入職表？反饋意見？研究表單？

盡可能地記下你希望從表格中獲得的信息。把它表達(dá)為題目(以問號結(jié)尾)，而不是靈光一閃。一定留足時(shí)間反復(fù)推敲。

然后，寫下一些可能的答案，這些答案可能會(huì)給你一些靈感。

最后，頭腦風(fēng)暴討論這些題目，這些題目就會(huì)解答剛才提到的第一個(gè)問題。

作為調(diào)查后的回顧，寫下每個(gè)問題的回答百分比。將這些猜測與你的實(shí)際結(jié)果進(jìn)行比較，會(huì)發(fā)現(xiàn)下一輪要注意的盲點(diǎn)。

這種回顧過程還有助于您的設(shè)計(jì)并節(jié)省您的時(shí)間。

關(guān)于板塊的科學(xué)

根據(jù)表單轉(zhuǎn)換率報(bào)告，表單類型直接影響表單的板塊數(shù)量。仔細(xì)考慮每一個(gè)板塊的每個(gè)問題。

現(xiàn)在，問問自己：你真的、確定、必須要問哪些問題？

多數(shù)情況下都不是必要的。但是，即便我們明白少即是多原則，但是真的有機(jī)會(huì)去用戶的腦子里一探究竟的時(shí)候，我們還是希望問題越多越好。

當(dāng)然，這些問題的答案是很重要。但真的重要到失去用戶都在所不惜么？

你需要用戶的配合。但是每加一個(gè)板塊，他們的耐心就會(huì)失去一點(diǎn)。所以，在你把所有的題目和答案全列出來以后，能刪盡量刪掉。考慮收集數(shù)據(jù)的其他方法，并考慮這個(gè)題目是否可以推導(dǎo)出來，或者以后再說甚至完全排除。

盡量避免可選問題。如果必須，請?jiān)诒韱巫詈罅谐鰜怼?

2. 正確地分組題目

將線上表單結(jié)構(gòu)化是成功的關(guān)鍵。

在你經(jīng)過頭腦風(fēng)暴討論，修剪精煉得出了最終的問題清單后，就該組織他們了。用一個(gè)「主題」標(biāo)題將它們組織成組和子組，比如說聯(lián)系方式，工作經(jīng)驗(yàn)等。

這樣一來，用戶不用去讀具體的問題就大概知道自己接下來要做什么。

3. 定義問題的邏輯序列

現(xiàn)在要考慮問題的順序了。按照經(jīng)驗(yàn)來看，主題相似的問題，就應(yīng)該放在一起。

每一個(gè)問題，每一個(gè)板塊，都應(yīng)該激勵(lì)用戶到下一步。大跨步似的前進(jìn)會(huì)讓用戶困惑，所以要用一種一步一步引導(dǎo)用戶往前的模式。

用戶會(huì)通過調(diào)節(jié)對信息的流動(dòng)有一種預(yù)判。比如說，「你叫什么名字？」應(yīng)該在「你住在哪兒？」之前，而「介紹一下你的工作經(jīng)驗(yàn)？」應(yīng)該再往后。

4. 決定「必填 vs 選填 vs 友好」

最好的做法是把你的表單只限于必填的問題。選填問題將毫無必要地延長表單并激怒用戶：「你從哪里聽說我們的？」 「你想收到營銷郵件嗎？」

不過對那些非強(qiáng)制性的但是友好的問題，將它們放在表單的末尾，作為可選的后續(xù)內(nèi)容。這樣，他們會(huì)感覺不那么有侵略性，也不會(huì)影響你的轉(zhuǎn)化率。

5. 一次只問一件事

雙管齊下的題目會(huì)讓用戶覺得模棱兩可。而且——你已經(jīng)猜到了——模糊的答案無法量化。

看看題目中有沒有用「和」，「或」。找到了嗎？如果有，把這個(gè)題目改成兩個(gè)。

題目越清楚，答案就越清楚。答案越清楚，數(shù)據(jù)就越清晰。

6. 提供便利

優(yōu)秀的表單描繪了一條清晰的路線，通過線索、提示等引導(dǎo)用戶完成表單。路線越短，用戶完成的可能性就越大，所以盡可能地給用戶提供便利。

以下是比較有用的便利方法：

郵編索引

要求用戶填寫地址的時(shí)候，最好的方式是只讓他們填寫門牌號和郵編，然后使用郵編索引服務(wù)完成地址信息的其他內(nèi)容。（譯者注：此條比較適用于國外。）

默認(rèn)提示

默認(rèn)文本提示是出現(xiàn)在表單字段中描述其預(yù)期值的淺色文本。只有在存在潛在歧義的情況下，才應(yīng)該使用它。

字段標(biāo)簽

字段標(biāo)簽是出現(xiàn)在字段上面，關(guān)于問題性的文本。它經(jīng)常都會(huì)出現(xiàn)，并且不應(yīng)該用占位符提示來替代。人們常常為使用默認(rèn)提示同時(shí)作為字段標(biāo)簽，但卻引發(fā)了可用性的問題。

換句話說，你可以使用字段標(biāo)簽，不用默認(rèn)提示；但是不能在沒有字段標(biāo)簽的情況下只有默認(rèn)提示。

預(yù)設(shè)答案

大家都喜歡做選擇題。它們可以節(jié)省讀者的時(shí)間，并且易于評估。

你可以通過回答「是/否」、「單選」或「多選」來預(yù)定義答案。如果有一個(gè)你無法預(yù)測的答案，添加一個(gè)「其他」文本框讓讀者輸入一個(gè)自定義的答案。

搜索預(yù)測

在要求用戶選擇他們的國家、職業(yè)或具有大量預(yù)定義選項(xiàng)的其他內(nèi)容時(shí)，搜索預(yù)測會(huì)減少所需的打字量(和認(rèn)知負(fù)荷)。

第五部分：表單的受眾，目的以及環(huán)境

表單只完成了一般的工作。它是被動(dòng)的，不是主動(dòng)的。表單的效果依賴于填表者。它們需要從一開始就嵌入到框架中。

表單是交流的工具。需要兩方來參與。

因此，在設(shè)計(jì)表單時(shí)，你還需要從用戶的角度考慮……這從他們的目的和環(huán)境開始。

為什么要有人填寫你的表格？他們的目的是什么？把它們寫下來。

目的和環(huán)境息息相關(guān)，所以要讓環(huán)境在你的頭腦中具體化。他們在哪里以及如何填寫表格？在家嗎？在筆記本電腦上？在手機(jī)上？在地鐵上？

環(huán)境不僅僅是場景。關(guān)鍵是用戶能明白在他們的幫助下你的表單可以實(shí)現(xiàn)什么目的。

1. 知道你的受眾是誰

表單需要吸引目標(biāo)受眾的注意力——那么，這些受眾由誰組成？

在泛泛人群中思考是沒有意義的。要集中你的注意力，集中在一個(gè)人身上——或者說，一個(gè)「買家畫像」比任何一個(gè)普通人群給你的信息都多。

試著描繪一個(gè)理想的用戶畫像，有工作、個(gè)性、家庭、希望和夢想。集中思考這個(gè)理想用戶群體。他們在哪里生活和工作？他們的觀點(diǎn)和價(jià)值觀是什么？他們與你的業(yè)務(wù)有什么關(guān)系？

如果你發(fā)現(xiàn)對這些理想群體來說什么是有意義的，你就離最終給你帶來高價(jià)值數(shù)據(jù)的那些問題又進(jìn)了一步。

這些人就是你需要反復(fù)思考的人。這些人就是會(huì)給你答案的人。

表單視覺和結(jié)構(gòu)

填表單肯定不會(huì)像過生日一樣充滿驚喜。

一致性是保持表單填寫體驗(yàn)順暢的關(guān)鍵。一致就是指顏色要一致、視覺感受要一致、主題調(diào)性要一致。

你的公司形象是什么？什么短語和單詞能概括這一點(diǎn)？你的價(jià)值觀是什么？在 JotForm，我們注重包容性、友好度和腳踏實(shí)地——我們的語言就在傳達(dá)這些主旨。

當(dāng)你定義了品牌調(diào)性后，在所有的表單中保持住——你的用戶應(yīng)該感覺到他們每一步都在和同一個(gè)友好的人互動(dòng)。

視覺一致性同樣重要。在整個(gè)表單中都應(yīng)該用一種視覺風(fēng)格(以后創(chuàng)建的其他表單同樣如此)。

2. 左上對齊標(biāo)簽

Google 的 UX 研究人員發(fā)現(xiàn)，將標(biāo)簽左上對齊會(huì)減少表單完成時(shí)間，因?yàn)樗枰摹敢曈X注視」更少。

3. 避免將問題并排放置。

眼動(dòng)研究表明，簡單的單列布局比并排放置的多列布局要好。

該規(guī)則的唯一例外是要求輸入日期（日，月，年）或時(shí)間（小時(shí)和分鐘）時(shí)，其中多個(gè)字段應(yīng)在一行上。

4. 嘗試一頁一事

每頁一件事是一種心理技巧，定義為：

「將一個(gè)復(fù)雜的過程分解成多個(gè)小步驟，并將這些小步驟單獨(dú)用一頁來呈現(xiàn)。」

本質(zhì)上，用戶只需要關(guān)注一件事。一條信息、一個(gè)決定、一個(gè)問題要回答。

整潔的頁面鼓勵(lì)用戶繼續(xù)執(zhí)行任務(wù)。

5. 用輸入框長度提示用戶

把輸入框的長度控制到正好能夠包含所有的輸入字符的長度（用戶可以看到填入的完整內(nèi)容）。

輸入框的長度應(yīng)該反映用戶預(yù)期輸入的文本量。郵政編碼或門牌號等字段應(yīng)該短于地址行。

貝馬爾德研究所的可用性研究發(fā)現(xiàn)，如果一個(gè)字段太長或太短，用戶開始懷疑他們是否正確理解了標(biāo)簽。這尤其適用于具有異常數(shù)據(jù)或技術(shù)標(biāo)簽的字段，如信用卡背面的 CVV 碼。

表單設(shè)計(jì)中的錯(cuò)誤和完成路徑

就像生活中一樣，填寫表格時(shí)有可能出錯(cuò)就像生活中一樣，關(guān)鍵問題是發(fā)出錯(cuò)誤信號并允許快速糾正。

6. 不要只靠顏色

十分之一的男性有一定程度的色盲。

當(dāng)顯示驗(yàn)證錯(cuò)誤或成功消息時(shí)，不要依賴使用綠色或紅色文本(因?yàn)榧t綠色盲相對常見)。使用文本、圖標(biāo)或其他東西。JotForm Cards 用一個(gè)微動(dòng)畫警告用戶，當(dāng)出現(xiàn)錯(cuò)誤時(shí)，該動(dòng)畫會(huì)說「錯(cuò)誤」。

7. 在同一行內(nèi)指出錯(cuò)誤

向用戶顯示錯(cuò)誤發(fā)生的位置，并說明原因。
如果您必須使用驗(yàn)證，請確保它是內(nèi)嵌的(在字段的右側(cè))，并提前報(bào)告錯(cuò)誤。不要等到用戶點(diǎn)擊提交來報(bào)告驗(yàn)證錯(cuò)誤。但是同樣，內(nèi)聯(lián)驗(yàn)證不應(yīng)該是實(shí)時(shí)的，因?yàn)檫@可能會(huì)在用戶完成字段之前報(bào)告錯(cuò)誤。

8. 使用字段驗(yàn)證

你需要一個(gè)電子郵件地址，你會(huì)收到一個(gè)沒有@符號的回復(fù)。你要求一個(gè)電話號碼，而你的回答中有一半位數(shù)不夠。

打字錯(cuò)誤不應(yīng)該成為表單可用性的障礙。

使用「字段驗(yàn)證」來確保得到您需要的答案，例如，「答案必須包含__」

JotForm Cards 恢復(fù)錯(cuò)誤輸入域名的用戶的電子郵件地址；約翰@ gnail . com 應(yīng)該是 john@gmail.com。

9. 但別太苛刻

如果用戶回答的方式有很大差異(例如，用+12345678912、+44 12345678912、012345678912回答「電話號碼」)，請將其轉(zhuǎn)換為一致的格式。

第六部分：關(guān)于支付表單

什么是支付表單？

支付表單就是線上的收銀臺。它授權(quán)在線支付，驗(yàn)證用戶的詳細(xì)信息，檢查資金是否可用，并確保你收到支付。

支付整合有很多優(yōu)勢。他們幫助你 ：

• 銷售產(chǎn)品或服務(wù)；
• 在結(jié)算過程中進(jìn)行復(fù)雜計(jì)算，例如增加稅收和運(yùn)輸成本或減去優(yōu)惠券；
• 呈現(xiàn)你的產(chǎn)品描述，如圖片、數(shù)量、顏色和尺寸選項(xiàng)；
• 收集固定金額的捐款和付款，或者通過訂閱服務(wù)保證周期性付款。

在設(shè)計(jì)支付形式時(shí)，遵循最佳實(shí)踐是至關(guān)重要的。以下是一些關(guān)鍵規(guī)則。

1. 限制付款步驟

Baymard 研究所分析了支付表單，發(fā)現(xiàn)支付過程太長或太復(fù)雜是放棄支付的主要原因之一。所以一定要分塊，分得越細(xì)越好。

2. 使用安全視覺提醒

當(dāng)輸入敏感的細(xì)節(jié)，如信用卡細(xì)節(jié)時(shí)，用戶會(huì)對任何看起來可疑的東西保持高度警惕。最近的一項(xiàng)研究顯示，出于安全考慮，17%的購物者沒有付費(fèi)就離開了頁面。

專業(yè)的支付形式讓用戶感到輕松，而任何看起來「不舒服」的東西都會(huì)讓他們感到緊張。這就是為什么你應(yīng)該從頭開始構(gòu)建支付表單時(shí)就保持謹(jǐn)慎——即使是最小的錯(cuò)誤或不一致也會(huì)嚇跑用戶。

它還有助于在表單上啟用 SSL 來幫助保護(hù)數(shù)據(jù)。用戶知道所有的互動(dòng)都是加密的，因此可以安心。JotForm 是最安全的數(shù)據(jù)傳輸方式:我們符合支付卡行業(yè)數(shù)據(jù)安全標(biāo)準(zhǔn) (PCI DSS) 1級，并啟用了 SSL。

3. 清楚地解釋你為什么要求敏感信息

人們越來越關(guān)注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。

4. 保存數(shù)據(jù)

讓用戶可以選擇保存他們的地址和支付信息，可以使這個(gè)過程更快、更簡單——尤其是在手機(jī)這樣的設(shè)備上。這同時(shí)也會(huì)給回頭用戶一種獎(jiǎng)勵(lì)和忠誠的感覺。

5. JotForm添加支付集成的方式

• 第 1 步:添加你的品牌標(biāo)志和定制風(fēng)格。
• 第 2 步:使用鏈接按鈕輸入集成憑據(jù)，或者直接輸入。
• 第 3 步:添加產(chǎn)品圖像、產(chǎn)品細(xì)節(jié)，如數(shù)量、顏色、尺寸。
• 第 4 步:計(jì)算優(yōu)惠券、稅金和運(yùn)費(fèi)。（你可以使用集成采購訂單來檢查通用付款字段創(chuàng)建的詳細(xì)信息和選項(xiàng)(這不需要任何憑證，因?yàn)樗粫?huì)創(chuàng)建真正的交易)。你可以查看 Sofort 集成指南作為示例，了解整個(gè)支付過程。）
• 第 5 步:寫一封私人感謝信——自動(dòng)回復(fù)郵件。

一切就緒?，F(xiàn)在你可以在網(wǎng)站、博客或社交媒體上輕松銷售你的產(chǎn)品。當(dāng)你完成表單后…萬歲！完成了！但是……等一下。你的表單可能已經(jīng)完成，但現(xiàn)在還不是發(fā)出去的時(shí)候…

還有最后一個(gè)步驟。

6. 發(fā)出前，測試您的表單

我們都有盲點(diǎn)。所以保持謹(jǐn)慎很重要，畢竟數(shù)據(jù)的質(zhì)量決定了表單的成功。因此，需要事前檢查一下調(diào)研題目，確保答案選項(xiàng)的完整可靠，沒有任何遺漏。

把表單發(fā)送給家人/朋友，并要求他們記錄填寫表單需要多長時(shí)間，以及對這一連串的問題他們體驗(yàn)如何。這也將有助于你下次評估表單的設(shè)計(jì)。

文章來源：優(yōu)設(shè)