46條表單設(shè)計的寶貴經(jīng)驗,與你分享
本文從420萬表單用戶的使用經(jīng)驗中進(jìn)行了提取,列舉了大量在設(shè)計表單時可以參考的建議,以及一些需要避免的問題,供大家一同參考和學(xué)習(xí)。
您最近填寫過在線表單了嗎?
答案應(yīng)該是肯定的。根據(jù)最近的研究,84%的人每周至少會填寫一份線上表單。
雖然你可能沒有感受到,但在線填表單已經(jīng)成為我們生活中不可或缺的一部分了。
其實,幾乎每個把用戶由A帶向B的線上交互都是一個網(wǎng)絡(luò)表單:與某個公司聯(lián)系、訂火車票、購物、訂一晚酒店等等。
網(wǎng)絡(luò)表單最早在1994年開始用于在線銷售,第一個拖拽式表單2006年在屏幕上出現(xiàn)。從那時起,表單已經(jīng)成為線上交互的關(guān)鍵。
企業(yè)和客戶之間需要通過網(wǎng)站進(jìn)行聯(lián)系,小到縣城的官網(wǎng),大到國家政府網(wǎng)站,現(xiàn)在很難想像一個沒有網(wǎng)絡(luò)的世界。
但為什么線上表單一直備受詬?。?/p>
當(dāng)然,確實沒幾個人喜歡填表,但大多數(shù)人絕對不會介意填寫那些清晰、簡潔、設(shè)計優(yōu)秀的表單。
其實這也就是癥結(jié)所在。太多的在線表單冗長、令人迷惑或讓人感到有所冒犯(有時甚至三者同時出現(xiàn))。
當(dāng)表單產(chǎn)生讓人迷惑,或提出的要求超出必要范圍時,用戶的放棄幾率就很大大增加。有些用戶可能會放棄填寫,甚至于退訂整個業(yè)務(wù)。無論是以上哪種情況,您都不會再有第二次機會。
在設(shè)計一個表單的時候,我們怎么保證用戶能填到最后一步?
“創(chuàng)建一個表單很簡單,難的是讓人填完它?!?/p>
在幫助420萬用戶創(chuàng)建線上表單后,我們在JotForm發(fā)現(xiàn)了一件重要的事情,就是一些小小的改變會讓整個事情大有改觀。通常,這些改變都是從那些被放棄的表單中獲得的靈感。
例子:
- HubSpot發(fā)現(xiàn),當(dāng)一份14頁的潛在用戶登記表,被放在一個單獨的登錄頁上時,用戶填完的可能性要高出17%。
- Marketo發(fā)現(xiàn),一些非關(guān)鍵的填寫區(qū)域,反而讓每位潛在客戶的線索成本上漲了25%。
表單設(shè)計成什么樣呢?應(yīng)該直觀、簡單以及體驗友好。以下是一些推薦的參考方法。
第一部分:表單的主要元素
01 歡迎填表者:標(biāo)題與介紹
無論是誰,歡迎朋友的時候難道會不說“你好嗎?”我們都知道禮貌的重要性,但是在線上卻經(jīng)常疏忽了這一點。
歡迎頁和標(biāo)題讓您有機會以一種清晰而友好的方式介紹表單和自己,而且還會留下一個良好的第一印象。
看看BettingExpert的數(shù)據(jù)吧:通過修改表單標(biāo)題來強調(diào)“注冊理由”以后,他們的注冊率提高了31.54%。
標(biāo)題是對下文最短最精的概括。用戶一般都會跳過表單內(nèi)容,而且?guī)缀醵疾粫屑?xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
標(biāo)題可以簡單理解為描述被調(diào)查者對表格的期望。盡可能保持中立:要確保應(yīng)答者誠實回答,而不是去滿足出題者的設(shè)想。甚至像陳述一個目標(biāo)這樣簡單的事情,也可能會不知不覺地誘使應(yīng)答者試圖迎合。
而且現(xiàn)在也需要一份清單,說明應(yīng)答者應(yīng)該事先準(zhǔn)備的外部文件,沒人想中途去滿屋子找納稅證明或者護照。
如果填表肯定需要很長的時間去完成,一定要提前告知用戶。不過如果是又快又簡單的?讓用戶感到驚喜吧(但不要冒險侮辱任何人的智力,以防萬一)。畢竟,他們能夠通過查看進(jìn)度條或字段數(shù)量來推斷出這一點。
02 放置相關(guān)的標(biāo)題和副標(biāo)題
一個有趣的事實:人類會在50毫秒內(nèi)形成第一印象。重點:由于時間不夠長,他們無法仔細(xì)閱讀你的作品。
表單用戶很可能就是快速瀏覽一小部分內(nèi)容,忽略大部分內(nèi)容。而且有很大可能是他們正在忙著其他事情,無法集中注意力或者幾乎就沒有什么耐心,只想要快點結(jié)束。
顯然,我們無法阻止用戶,所以只能通過簡潔明了的標(biāo)題來引導(dǎo)他們。標(biāo)題絕對是個得力助手:可以將文本結(jié)構(gòu)化、清晰化、保持用戶的參與度。
用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做,而不是非得把剩下的全部看完。
測試這一點的最好方法是單獨閱讀標(biāo)題,是否能讓人看懂呢?
03 問題之間要有分隔符
分隔符很重要。就傳統(tǒng)表單來說,在視覺上把問題隔開以達(dá)到減少干擾的最好方法,就是使用分隔符。并不需要在視覺上做出很大的區(qū)別,區(qū)別太大反而容易分散用戶注意力。
04 多頁面表單或單頁表單?
這主要取決于表單有幾個議題。
如果只有1,2個議題,單頁表單肯定是最佳選擇。但是如果一個表單有很多議題,那么就需要多頁表單來呈現(xiàn)。想象一下:用戶在面對一個似乎有成千上百議題的表單時,得有多心煩。
05 強調(diào)“行動召喚”(CTAs,Calls-to-Actions)
成功的“行動召喚”強調(diào)的是“行動”部分:單擊這個按鈕,用戶要執(zhí)行什么操作?類似“發(fā)送”,“注冊”或者“過程”之類的通用標(biāo)簽并不會削弱召喚機制。描述越多越好。
為了消除不確定性,試著從用戶的角度回答一下這個問題“我想干什么?”舉個例子,如果是某項服務(wù)的調(diào)查表單,那就應(yīng)該是“我需要免費咨詢”。
還需要更多證據(jù)嗎?在這類研究中,Unbounce發(fā)現(xiàn)只是把“開始你的試用”換成“開始我的試用”,就提高了90%的點擊率。
06 標(biāo)明表單中的區(qū)域
這并不是說要弄得花里胡哨的……
單選框、挑選區(qū)域和復(fù)選框之所以有效,是因為它們既簡單又常見。表單元素的標(biāo)準(zhǔn)格式等同于更好的可用性。
單選框適用于有很多選項而只有一個可選的情況。復(fù)選框用在多項選擇的情況下最好。
為了更短的認(rèn)知適應(yīng)過程,要盡可能的使用多選框或者單選框而不是下拉菜單。就像Luke Wroblewski說的:“下拉菜單應(yīng)該是UI中的最后選擇?!?/strong>
07 別忘了“感謝”頁面
記住用戶們都是花費了時間的。所以千萬不要唐突結(jié)束,要記得說謝謝。
第二部分:怎么寫用戶才愿意看
以下是一些關(guān)于表單書寫藝術(shù)的小建議。
08 言簡意賅
從形式上來說,我們都更喜歡簡單的語言,甚至是那些學(xué)者,天才和專家。那為什么還有那么多線上對話像是復(fù)讀機一樣?
“請接受來自我們最誠摯的道歉。即便如此,我們還是希望能知道您的建議。除此之外……”
像一個老學(xué)院派那樣說話只會疏遠(yuǎn)用戶,讓他們瞠目結(jié)舌。
簡單不意味愚蠢,而是等于可讀性。這意味著最清晰的平白直述。每個詞語都應(yīng)該是最短,最直接的版本,能用“不過”就別用“盡管如此”。不用行話,不寫復(fù)雜句。
你可以通過大聲朗讀來檢查連貫性。耳朵能夠聽到眼睛看不到的東西,特別是在描述那些冗長復(fù)雜概念的時候。
09 擬人化
一份表單應(yīng)該就像是你和填表者之間的對話。通過用“我”,“你”,“你的”這些代詞來擬人化。
10 減少被動句
主動語態(tài)的表達(dá)(比如:約翰寫了一封投訴信)比被動語態(tài)(比如:一封投訴信由約翰寫出)更加有力。
被動語態(tài)會更冗長,不夠集中。
(譯者注:以下文章中帶橫線的內(nèi)容適用于英語語法,不感興趣的讀者可自行跳過。)
一個被動語態(tài)句子究竟有多糟?這是兩點教訓(xùn):
- 動作的執(zhí)行者不夠清晰(一封信被寫出了)
- 這個句子的Be動詞(to be ,has been,was)后面跟著一個過去分詞。
還是不確定?你可以去查一下微軟Word可讀性標(biāo)準(zhǔn),或者普渡大學(xué)語句方法。
11 盡可能地刪減詞語
許多作者都會陷入這樣的思維誤區(qū):用的詞越多,就顯得他們越聰明。其實不是這樣的。在表單編寫方面,或者說各種寫作中,刪減詞語都要比添加詞語更加有益。
“你刪掉的每一個詞,都會為你多爭取一個讀者。”在仔細(xì)檢查不必要的詞語后,文章會更篤實,更連貫,更吸引人。
刪減重點:
- 副詞(以ly結(jié)尾)。
- 無意義的量詞(很多,大量)。
- 空洞的程度形容(副)詞(非常,特別,尤其)。
- “that”這個詞。
- 非必要信息。
- 模糊詞(東西,少量,大量)。
12 盡可能使用縮寫
比起完整形態(tài)(比如cannot,is not),語句的縮寫形式(比如can’t,isn’t)能夠讓文章看起來更簡潔,友好和易讀。
另外,還能節(jié)省文字篇幅。一份優(yōu)秀的表單閱讀性都不錯。
What’s優(yōu)于What is。很簡單。
13 長句變短句
冗長曲折的句子容易讓人難以理解。密密麻麻的文字堆也是如此。
對于大多數(shù)讀者來說,每個句子最多20個單詞,每個段落最多3個句子,是最合適的。把每個長句都擴成兩個短句。短句實際上并不遜色。
使用空格,項目符號,表格以及打破繁瑣說明的任何其他元素,都會使您的讀者松一口氣。
14 檢查文字
在我寫博客的過程中,我(艱難地)認(rèn)識到,優(yōu)秀的文章是30%的寫作加上70%的編輯。
當(dāng)你完善了問題,精簡了文字和內(nèi)容后,把表格存儲好。隔幾天再回過頭來看,你會發(fā)現(xiàn)有些之前沒有發(fā)現(xiàn)的地方還可以再改進(jìn)。
第三部分:表單心理學(xué)
大多數(shù)用戶體驗的心理學(xué)原理其實都在人們的潛意識中,所以難以讓人注意到。
但是每種顏色,字體,線條和按鈕都有其用途。
日常的小規(guī)模設(shè)計可能不如十億美元的營銷活動那么引人注目。但小設(shè)計也需要花心思。而且,研究令人愉悅的設(shè)計背后的心理學(xué)機制很有意思,成本也不高。
以下是一些關(guān)鍵的心理原則,這些原則構(gòu)成了設(shè)計優(yōu)良的表格的堅實基礎(chǔ)。
15 比較成本和收益
我們做出的每一個決定,從倒垃圾到訂婚,都要經(jīng)過我們頭腦中的自動成本收益分析。一項任務(wù)的成本是否值得完成后的收益?
設(shè)計師的工作是確保用戶在感知上收益是大于成本的。
當(dāng)然,成本與收益是主觀的,填表通常源于義務(wù),而不是受訪者希望從中獲益的行為。除非給受訪者獎勵,否則無法確保收益。但是我們可以把成本降到最低。
降低受訪者成本的一些關(guān)鍵策略:
16 使用文本塊
+1-919-555-2743 vs 19195552743.
哪個電話號碼會留在你的腦海里?當(dāng)然是第一個。那是因為它被分塊了。
組塊是一種方便的記憶技術(shù):我們把它用于銀行個人識別碼、社會安全號碼和儲物柜代碼。它指的是將信息排列成“塊”的過程,使內(nèi)容更容易保留、處理和回憶。
研究聲稱數(shù)字3是幫助人們吸收和回憶信息的神奇數(shù)字。所以盡可能使用它:針對段落,列表,關(guān)鍵步驟等等。
17 定義格式要求
如果可能,避免任意格式化規(guī)則。但如果是必要的規(guī)則,用紅色記號筆拼寫出來。填表單時,沒人愿意猜。密碼要求、語法規(guī)則、編號間距等等,如果一個字段需要特定的輸入,告訴用戶。
席克定律
如果我要舉辦一個晚宴,我總是選擇從當(dāng)?shù)匾患倚‰s貨店購買我的配料,而不是從一個雜亂無章的超市購買。那是因為有太多的選擇往往會讓人感到麻木。這就是席克定律:它指出,隨著選項增加,做出決定的時間也在增加。
應(yīng)用到用戶體驗領(lǐng)域,席克定律簡直就是去繁求簡的一劑良方:限制導(dǎo)航選擇,給用戶明確但受限的選項。因為隨著設(shè)計靈活性的增加,它的可用性會降低。
少即是多。
將席克定律付諸實踐的一些方法:
18 下定決心(再次)刪除
這個鏈接有什么用?還是右上角的按鈕?如果并沒有增效,那就是減效。每一個字,每一張圖片,鈴鐺圖標(biāo)或者口哨圖標(biāo)都不是100%必需的,這些都會降低你表單的轉(zhuǎn)換率。
尼爾·帕特爾稱只需刪除一個字段,他的聯(lián)系人表單提交率就可以提高26%。
正如杜魯門·卡波特曾經(jīng)說過的,“我更相信剪刀,而不是鉛筆?!?/p>
19 減少打字需求
打字是在線表單中最耗時、最密集的部分,而且經(jīng)常會導(dǎo)致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能,將減少工作量并提高轉(zhuǎn)化率。
20 用條件邏輯縮短表格
根據(jù)Marketing Insider Group的調(diào)查,有78%的互聯(lián)網(wǎng)用戶表示來自品牌的個人相關(guān)內(nèi)容會增加他們的購買意愿。而當(dāng)體驗與用戶無關(guān)時,營銷活動的效果將降低83%。
因此,感謝條件邏輯!
條件邏輯(或“分支邏輯”)通過允許基于特定響應(yīng)的附加指令——類似:“如果這樣,那么”,簡化了復(fù)雜的流程。在表單的上下文中,受訪者只會看到適用于其的問題他們先前答案的基礎(chǔ)。
使用條件邏輯將不會顯示與用戶無關(guān)的問題,從而減少完成表單的時間,從而使他們不太可能放棄前面的任務(wù)。
是的,這聽起來像是常識,但是大多數(shù)表單都會向每個用戶(無論他們是誰)提出相同的問題。使用條件邏輯是雙贏的,因為通過明確定義用戶細(xì)分,可以捕獲更干凈,更有用的數(shù)據(jù)。
雙重編碼理論
我說樹時。您就會想到樹干、綠葉、樹枝。
我們的大腦就像這樣聰明:它把圖像和文字聯(lián)系在一起。
這是雙重編碼理論背后的關(guān)鍵原則,該理論指出記憶有兩個不同但相互關(guān)聯(lián)的系統(tǒng),一個用于文字信息(“樹”),另一個用于視覺信息(“樹干、綠葉、樹枝”)。
當(dāng)某樣?xùn)|西以兩種方式(圖像和文字)被“編碼”時,它被理解和記住的幾率比僅僅以一種方式(圖像或文字)被編碼的幾率要高。
換句話說,將單詞和圖像配對會使它們更容易記憶。兒童書籍充分利用了這一點。在設(shè)計表單時,有兩種方法可以將雙重編碼理論付諸實踐。
21 信息可視化
我們的大腦處理圖像比處理文本快得多。使用圖標(biāo)、照片、形狀等線索——無論什么有助于說明你的觀點——都會讓用戶體驗更加直觀。
表單設(shè)計應(yīng)該是一致的,但這并不是說就不能加入一些小驚喜。通過使用非標(biāo)準(zhǔn)的界面元素——如可點擊的圖像和切換的滑塊——可以使表單填寫更加愉快和直觀。
22 顏色
你知道嗎:用戶最初對產(chǎn)品的判斷有90%僅僅基于顏色?
實際上,根據(jù)營銷大師尼爾·帕特爾(Neil Patel)的說法,色彩是“購買特定產(chǎn)品的原因的85%。”正確的組合可以使讀者人數(shù)提高40%,理解力提高73%,學(xué)習(xí)能力提高78%。
你不需要成為一名設(shè)計師來找出哪種配色方案和對比效果最好。像Adobe Color CC 和Paletton 這樣方便的程序可以幫助你選擇一個能反映你公司形象的調(diào)色板。
23 讓表單更漂亮
我們是膚淺的生物,習(xí)慣于相信有吸引力的設(shè)計在其他方面也更好:更快、更智能、更易用。這被稱為“審美可用性效應(yīng)”,漂亮的界面增加了我們的耐心和忠誠度,甚至讓我們更有同理心。
如果內(nèi)容或布局不吸引人,38%的人會停止使用頁面。換句話說,如果線上表單看起來不漂亮(也不容易填寫),那就是浪費時間。
當(dāng)然,一百個人心里有一百個漢姆雷特。但是一個簡單的界面、干凈的字體和時尚的造型絕對會贏得用戶歡心。
進(jìn)度條效應(yīng)
如果我們知道我們已經(jīng)取得的進(jìn)展,我們就更有動力去完成一項任務(wù)。特別是已經(jīng)領(lǐng)先進(jìn)度的時候,感知上的工作量會相應(yīng)減少,最終達(dá)到超預(yù)期效果。美國教授約瑟夫·努內(nèi)斯和澤維爾·德雷澤將這種現(xiàn)象總結(jié)為“進(jìn)度條效應(yīng)”——“當(dāng)人們能看到已付出的努力時,會更有動力完成任務(wù)?!?/p>
以下是一些適用于表單的進(jìn)度條效應(yīng)的應(yīng)用方式:
24 問題排列從易到難
如果表單里的問題按照從簡單到困難的順序排列(而且保持邏輯順序),用戶將快速完成表單的初始階段。這反過來會觸發(fā)連勝效應(yīng):快速進(jìn)步和動力感帶來的滿足感,讓用戶不愿意打破連勝。這意味著,當(dāng)表單變得更加苛刻時,用戶會繼續(xù)堅持下去。
25 畫出進(jìn)度條
隨時反映用戶的進(jìn)度。用戶越接近目標(biāo),就越有可能完成。如果表單是多頁的,請指出還有多少頁要完成。
一份來自Clutch的研究表明90%的用戶希望在線表單能有進(jìn)度條來管控他們的花費時間。
第四部分:問題、回答和分組
26 用頭腦風(fēng)暴討論題目
所有的表單的關(guān)鍵都是題目。特別是在頭腦風(fēng)暴討論題目的時候,最好的就是從目標(biāo)出發(fā),倒推回來。
所以你的第一個問題就是:你的表單的目的是什么?入職表?反饋意見?研究表單?
盡可能精確地記下你希望從表格中獲得的信息。把它表達(dá)為題目(以問號結(jié)尾),而不是靈光一閃。一定留足時間反復(fù)推敲。
然后,寫下一些可能的答案,這些答案可能會給你一些靈感。
最后,頭腦風(fēng)暴討論這些題目,這些題目就會解答剛才提到的第一個問題。
作為調(diào)查后的回顧,寫下每個問題的回答百分比。將這些猜測與你的實際結(jié)果進(jìn)行比較,會發(fā)現(xiàn)下一輪要注意的盲點。
這種回顧過程還有助于您的設(shè)計并節(jié)省您的時間。
關(guān)于板塊的科學(xué)
根據(jù)表單轉(zhuǎn)換率報告,表單類型直接影響表單的板塊數(shù)量。仔細(xì)考慮每一個板塊的每個問題。
現(xiàn)在,問問自己:你真的、確定、必須要問哪些問題?
多數(shù)情況下都不是必要的。但是,即便我們明白少即是多原則,但是真的有機會去用戶的腦子里一探究竟的時候,我們還是希望問題越多越好。
當(dāng)然,這些問題的答案是很重要。但真的重要到失去用戶都在所不惜么?
你需要用戶的配合。但是每加一個板塊,他們的耐心就會失去一點。所以,在你把所有的題目和答案全列出來以后,能刪盡量刪掉。考慮收集數(shù)據(jù)的其他方法,并考慮這個題目是否可以推導(dǎo)出來,或者以后再說甚至完全排除。
盡量避免可選問題。如果必須,請在表單最后列出來。
27 正確地分組題目
將線上表單結(jié)構(gòu)化是成功的關(guān)鍵。
在你經(jīng)過頭腦風(fēng)暴討論,修剪精煉得出了最終的問題清單后,就該組織他們了。用一個“主題”標(biāo)題將它們組織成組和子組,比如說聯(lián)系方式,工作經(jīng)驗等。
這樣一來,用戶不用去讀具體的問題就大概知道自己接下來要做什么。
28 定義問題的邏輯序列
現(xiàn)在要考慮問題的順序了。按照經(jīng)驗來看,主題相似的問題,就應(yīng)該放在一起。
每一個問題,每一個板塊,都應(yīng)該激勵用戶到下一步。大跨步似的前進(jìn)會讓用戶困惑,所以要用一種一步一步引導(dǎo)用戶往前的模式。
用戶會通過調(diào)節(jié)對信息的流動有一種預(yù)判。比如說,“你叫什么名字?”應(yīng)該在“你住在哪兒?”之前,而“介紹一下你的工作經(jīng)驗?”就應(yīng)該又往后排。
29 決定“必填vs 選填vs 友好”
最好的做法是把你的表單只限于必填的問題。選填問題將毫無必要地延長表單并激怒用戶:“你從哪里聽說我們的?” “你想收到營銷郵件嗎?”
不過對那些非強制性的但是友好的問題,將它們放在表單的末尾,作為可選的后續(xù)內(nèi)容。這樣,他們會感覺不那么有侵略性,也不會影響你的轉(zhuǎn)化率。
30?一次只問一件事
雙管齊下的題目會讓用戶覺得模棱兩可。而且——你已經(jīng)猜到了——模糊的答案無法量化。
看看題目中有沒有用“和”,“或”。找到了嗎?如果有,把這個題目改成兩個。
題目越清楚,答案就越清楚。答案越清楚,數(shù)據(jù)就越清晰。
31 提供便利
優(yōu)秀的表單描繪了一條清晰的路線,通過線索、提示等引導(dǎo)用戶完成表單。路線越短,用戶完成的可能性就越大,所以盡可能地給用戶提供便利。
以下是比較有用的便利方法:
(1)郵編索引
要求用戶填寫地址的時候,最好的方式是只讓他們填寫門牌號和郵編,然后使用郵編索引服務(wù)完成地址信息的其他內(nèi)容。(譯者注:此條比較適用于國外。)
(2)默認(rèn)提示
默認(rèn)文本提示是出現(xiàn)在表單字段中描述其預(yù)期值的淺色文本。只有在存在潛在歧義的情況下,才應(yīng)該使用它。
(3)字段標(biāo)簽
字段標(biāo)簽是出現(xiàn)在字段上面,關(guān)于問題性的文本。它經(jīng)常都會出現(xiàn),并且不應(yīng)該用占位符提示來替代。人們常常為使用默認(rèn)提示同時作為字段標(biāo)簽,但卻引發(fā)了可用性的問題。
換句話說,你可以使用字段標(biāo)簽,不用默認(rèn)提示;但是不能在沒有字段標(biāo)簽的情況下只有默認(rèn)提示。
(4)預(yù)設(shè)答案
大家都喜歡做選擇題。它們可以節(jié)省讀者的時間,并且易于評估。
你可以通過回答“是/否”、“單選”或“多選”來預(yù)定義答案。如果有一個你無法預(yù)測的答案,添加一個“其他”文本框讓讀者輸入一個自定義的答案。
搜索預(yù)測在要求用戶選擇他們的國家、職業(yè)或具有大量預(yù)定義選項的其他內(nèi)容時,搜索預(yù)測會減少所需的打字量(和認(rèn)知負(fù)荷)。
第五部分:表單的受眾,目的以及環(huán)境
表單只完成了一般的工作。它是被動的,不是主動的。表單的效果依賴于填表者。它們需要從一開始就嵌入到框架中。
表單是交流的工具。需要兩方來參與。
因此,在設(shè)計表單時,你還需要從用戶的角度考慮……這從他們的目的和環(huán)境開始。
為什么要有人填寫你的表格?他們的目的是什么?把它們寫下來。
目的和環(huán)境息息相關(guān),所以要讓環(huán)境在你的頭腦中具體化。他們在哪里以及如何填寫表格?在家嗎?在筆記本電腦上?在手機上?在地鐵上?
環(huán)境不僅僅是場景。關(guān)鍵是用戶能明白在他們的幫助下你的表單可以實現(xiàn)什么目的。
32 知道你的受眾是誰
表單需要吸引目標(biāo)受眾的注意力——那么,這些受眾由誰組成?
在泛泛人群中思考是沒有意義的。要集中你的注意力,集中在一個人身上——或者說,一個“買家畫像”比任何一個普通人群給你的信息都多。
試著描繪一個理想的用戶畫像,有工作、個性、家庭、希望和夢想。集中思考這個理想用戶群體。他們在哪里生活和工作?他們的觀點和價值觀是什么?他們與你的業(yè)務(wù)有什么關(guān)系?
如果你發(fā)現(xiàn)對這些理想群體來說什么是有意義的,你就離最終給你帶來高價值數(shù)據(jù)的那些問題又進(jìn)了一步。
這些人就是你需要反復(fù)思考的人。這些人就是會給你答案的人。
表單視覺和結(jié)構(gòu)
填表單肯定不會像過生日一樣充滿驚喜。
一致性是保持表單填寫體驗順暢的關(guān)鍵。一致就是指顏色要一致、視覺感受要一致、主題調(diào)性要一致。
你的公司形象是什么?什么短語和單詞能概括這一點?你的價值觀是什么?在JotForm,我們注重包容性、友好度和腳踏實地——我們的語言就在傳達(dá)這些主旨。
當(dāng)你定義了品牌調(diào)性后,在所有的表單中保持住——你的用戶應(yīng)該感覺到他們每一步都在和同一個友好的人互動。
視覺一致性同樣重要。在整個表單中都應(yīng)該用一種視覺風(fēng)格(以后創(chuàng)建的其他表單同樣如此)。
33 左上對齊標(biāo)簽
Google的UX研究人員發(fā)現(xiàn),將標(biāo)簽左上對齊會減少表單完成時間,因為它需要的“視覺注視”更少。
34 避免將問題并排放置
眼動研究表明,簡單的單列布局比并排放置的多列布局要好。
該規(guī)則的唯一例外是要求輸入日期(日,月,年)或時間(小時和分鐘)時,其中多個字段應(yīng)在一行上。
35 嘗試一頁一事
每頁一件事是一種心理技巧,定義為:
“將一個復(fù)雜的過程分解成多個小步驟,并將這些小步驟單獨用一頁來呈現(xiàn)。”
本質(zhì)上,用戶只需要關(guān)注一件事。一條信息、一個決定、一個問題要回答。
整潔的頁面鼓勵用戶繼續(xù)執(zhí)行任務(wù)。
36 用輸入框長度提示用戶
把輸入框的長度控制到正好能夠包含所有的輸入字符的長度(用戶可以看到填入的完整內(nèi)容)。
輸入框的長度應(yīng)該反映用戶預(yù)期輸入的文本量。郵政編碼或門牌號等字段應(yīng)該短于地址行。
貝馬爾德研究所的可用性研究發(fā)現(xiàn),如果一個字段太長或太短,用戶開始懷疑他們是否正確理解了標(biāo)簽。這尤其適用于具有異常數(shù)據(jù)或技術(shù)標(biāo)簽的字段,如信用卡背面的CVV碼。
表單設(shè)計中的錯誤和完成路徑
就像生活中一樣,填寫表格時有可能出錯。
就像生活中一樣,關(guān)鍵問題是發(fā)出錯誤信號并允許快速糾正。
37 不要只靠顏色
十分之一的男性有一定程度的色盲。
當(dāng)顯示驗證錯誤或成功消息時,不要依賴使用綠色或紅色文本(因為紅綠色盲相對常見)。使用文本、圖標(biāo)或其他東西。JotForm Cards用一個微動畫警告用戶,當(dāng)出現(xiàn)錯誤時,該動畫會說“錯誤”。
38 在同一行內(nèi)指出錯誤
向用戶顯示錯誤發(fā)生的位置,并說明原因。
如果您必須使用驗證,請確保它是內(nèi)嵌的(在字段的右側(cè)),并提前報告錯誤。不要等到用戶點擊提交來報告驗證錯誤。但是同樣,內(nèi)聯(lián)驗證不應(yīng)該是實時的,因為這可能會在用戶完成字段之前報告錯誤。
39 使用字段驗證
你需要一個電子郵件地址,你會收到一個沒有@符號的回復(fù)。你要求一個電話號碼,而你的回答中有一半位數(shù)不夠。
打字錯誤不應(yīng)該成為表單可用性的障礙。
使用“字段驗證”來確保得到您需要的答案,例如,“答案必須包含__”
JotForm Cards恢復(fù)錯誤輸入域名的用戶的電子郵件地址;約翰@ gnail . com應(yīng)該是john@gmail.com。
40 但別太苛刻
如果用戶回答的方式有很大差異(例如,用+12345678912、+44 12345678912、012345678912回答“電話號碼”),請將其轉(zhuǎn)換為一致的格式。
第六部分:關(guān)于支付表單
什么是支付表單?
支付表單就是線上的收銀臺。它授權(quán)在線支付,驗證用戶的詳細(xì)信息,檢查資金是否可用,并確保你收到支付。
支付整合有很多優(yōu)勢。他們幫助你 :
- 銷售產(chǎn)品或服務(wù);
- 在結(jié)算過程中進(jìn)行復(fù)雜計算,例如增加稅收和運輸成本或減去優(yōu)惠券;
- 呈現(xiàn)你的產(chǎn)品描述,如圖片、數(shù)量、顏色和尺寸選項;
- 收集固定金額的捐款和付款,或者通過訂閱服務(wù)保證周期性付款。
在設(shè)計支付形式時,遵循最佳實踐是至關(guān)重要的。以下是一些關(guān)鍵規(guī)則。
41 限制付款步驟
Baymard研究所分析了支付表單,發(fā)現(xiàn)支付過程太長或太復(fù)雜是放棄支付的主要原因之一。所以一定要分塊,分得越細(xì)越好。
42 使用安全視覺提醒
當(dāng)輸入敏感的細(xì)節(jié),如信用卡細(xì)節(jié)時,用戶會對任何看起來可疑的東西保持高度警惕。最近的一項研究顯示,出于安全考慮,17%的購物者沒有付費就離開了頁面。
專業(yè)的支付形式讓用戶感到輕松,而任何看起來“不舒服”的東西都會讓他們感到緊張。這就是為什么你應(yīng)該從頭開始構(gòu)建支付表單時就保持謹(jǐn)慎——即使是最小的錯誤或不一致也會嚇跑用戶。
它還有助于在表單上啟用SSL來幫助保護數(shù)據(jù)。用戶知道所有的互動都是加密的,因此可以安心。JotForm是最安全的數(shù)據(jù)傳輸方式:我們符合支付卡行業(yè)數(shù)據(jù)安全標(biāo)準(zhǔn)(PCI DSS)1級,并啟用了SSL。
43 清楚地解釋你為什么要求敏感信息
人們越來越關(guān)注隱私和信息安全。如果你要求必須填寫敏感信息,請確保使用字段下方的注釋文本解釋為什么需要這些信息。
44 保存數(shù)據(jù)
讓用戶可以選擇保存他們的地址和支付信息,可以使這個過程更快、更簡單——尤其是在手機這樣的設(shè)備上。這同時也給回頭用戶一種獎勵和忠誠的感覺。
45 JotForm添加支付集成的方式
第1步:添加你的品牌標(biāo)志和定制風(fēng)格。
第2步:使用鏈接按鈕輸入集成憑據(jù),或者直接輸入。
第3步:添加產(chǎn)品圖像、產(chǎn)品細(xì)節(jié),如數(shù)量、顏色、尺寸。
第4步:計算優(yōu)惠券、稅金和運費。
你可以使用集成采購訂單來檢查通用付款字段創(chuàng)建的詳細(xì)信息和選項(這不需要任何憑證,因為它不會創(chuàng)建真正的交易)。你可以查看Sofort集成指南作為示例,了解整個支付過程。
第5步:寫一封私人感謝信——自動回復(fù)郵件。
一切就緒?,F(xiàn)在你可以在網(wǎng)站、博客或社交媒體上輕松銷售你的產(chǎn)品。
當(dāng)你完成表單后…
萬歲!完成了!但是……等一下。你的表單可能已經(jīng)完成,但現(xiàn)在還不是發(fā)出去的時候…
還有最后一個步驟。
46 發(fā)出前,測試您的表單
我們都有盲點。所以保持謹(jǐn)慎很重要,畢竟數(shù)據(jù)的質(zhì)量決定了表單的成功。因此,需要事前檢查一下調(diào)研題目,確保答案選項的完整可靠,沒有任何遺漏。
把表單發(fā)送給家人/朋友,并要求他們記錄填寫表單需要多長時間,以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設(shè)計。本文由海外設(shè)計參考(微信公眾號GDInspiration)翻譯,供設(shè)計師及愛好者學(xué)習(xí)和研究。
本文翻譯自Aytekin Tank的46 Form Design Best Practices。作者是在線表單產(chǎn)品JotForm的CEO。
原文地址:https://www.jotform.com/form-design/
本文由 @海外設(shè)計參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
很棒,蠻有參考價值。就是文章太長了~