智能表單設(shè)計(jì)的21條規(guī)則
對(duì)于設(shè)計(jì)師來(lái)說(shuō),問(wèn)卷是一種常用的調(diào)研方式。問(wèn)卷看似普通簡(jiǎn)單,實(shí)際上也有很多值得設(shè)計(jì)師深思熟慮的細(xì)節(jié)。本文從表單問(wèn)卷的填寫(xiě)流程講起,詳細(xì)說(shuō)明了 21 條有助于提升填寫(xiě)效率、優(yōu)化數(shù)據(jù)結(jié)果的設(shè)計(jì)規(guī)則。
盡管表單設(shè)計(jì)很簡(jiǎn)單,但你會(huì)發(fā)現(xiàn)您遇到的大多數(shù)表單都設(shè)計(jì)得很糟糕。如果你自己發(fā)起過(guò)問(wèn)卷調(diào)研,就會(huì)知道讓用戶填寫(xiě)表單有多難。
傳統(tǒng)的表單填寫(xiě)流程如下:
傳統(tǒng)表單填寫(xiě)流程
我發(fā)現(xiàn)傳統(tǒng)表單填寫(xiě)流程是對(duì)真實(shí)用戶的目標(biāo)和流程的不完整抽象。真正的流程如下:
真正的表單填寫(xiě)流程
根據(jù)上述理論,讓我們看看一個(gè)優(yōu)秀表單設(shè)計(jì)的規(guī)則。我將把它分成 3 個(gè)部分:
- 信息流
- 表格設(shè)計(jì)/規(guī)劃
- 其他
01 信息流
規(guī)則 1/先收集聯(lián)系信息
如果是簡(jiǎn)易的表單,在最開(kāi)始就請(qǐng)求輸入聯(lián)系信息。如果它是電子郵件或軟件推送的網(wǎng)頁(yè)鏈接,則自動(dòng)在表單中填充好聯(lián)系信息。將所擁有的客戶的所有信息放置在表單字段中。
如果你用的是 Google Forms,則可以通過(guò)以下方式這里預(yù)先填充客戶的電子郵件。
規(guī)則 2/每一步后端自動(dòng)保存表單
在多步驟表單中,始終在每一步都自動(dòng)保存表單的填寫(xiě)內(nèi)容。由此可從用戶那獲得一些信息,哪怕它并不完整……之后還能調(diào)出未完成表單來(lái)讓用戶繼續(xù)填寫(xiě)。
如果從頭建立的表單并且有足夠的帶寬,可以考慮留存每個(gè)字段的更新。采用標(biāo)準(zhǔn)的防抖動(dòng)和節(jié)流閥技術(shù)來(lái)提高頁(yè)面速度與性能。
注意:如果要進(jìn)行后臺(tái)保存服務(wù),需要征得用戶的同意,至少提前告知用戶此行為,因?yàn)檫@是在收集用戶的數(shù)據(jù)。此行為可能侵犯用戶隱私或違反 GDPR。
規(guī)則 3/在線完成驗(yàn)證
所有驗(yàn)證都應(yīng)及時(shí)反饋,并在輸入框外顯示錯(cuò)誤提示。讓用戶立即知道錯(cuò)誤,無(wú)需等到表單提交時(shí)才得知。
在線驗(yàn)證
在線驗(yàn)證規(guī)則!某些情況下不需要對(duì)內(nèi)容進(jìn)行驗(yàn)證,例如自由文本框。確保數(shù)據(jù)庫(kù)寫(xiě)入表單數(shù)據(jù)前,為表單時(shí)添加數(shù)據(jù)寫(xiě)入標(biāo)準(zhǔn)。
規(guī)則 4/錯(cuò)誤提示要詳細(xì)
如果用戶在表單填寫(xiě)中出現(xiàn)錯(cuò)誤,要清楚地指明錯(cuò)誤。這需要時(shí)間精力,但這是值得的。數(shù)據(jù)分析師會(huì)非常感謝這一措施。
錯(cuò)誤提示要詳細(xì)
詳細(xì)錯(cuò)誤提示有助于用戶更快地填寫(xiě)表單。如有可能(如上圖中的錯(cuò)誤),系統(tǒng)識(shí)別出錯(cuò)誤后自行更正,用戶得以繼續(xù)填寫(xiě)……
02 表單設(shè)計(jì)/規(guī)劃
在本節(jié)中,我們將只涉及表單設(shè)計(jì)。
規(guī)則 5/持有一個(gè)目標(biāo)
每個(gè)問(wèn)卷/表單都應(yīng)設(shè)立一些假設(shè),例如試圖證明或反駁。思考下列的簡(jiǎn)單調(diào)研:詢問(wèn)軟件的整體購(gòu)物體驗(yàn)。你需要驗(yàn)證購(gòu)物流程的多個(gè)方面:
- 產(chǎn)品選擇體驗(yàn)
- 結(jié)賬體驗(yàn)
- 送貨經(jīng)驗(yàn)
- 發(fā)貨后體驗(yàn)
針對(duì)這些,你可以優(yōu)先假設(shè):
- X% 的用戶找不到他們需要的產(chǎn)品
- Y% 的客戶擁有流暢的結(jié)賬體驗(yàn)
- Z% 的售后體驗(yàn)很棒,會(huì)引導(dǎo)用戶再次購(gòu)買(mǎi)
對(duì)每一個(gè)假設(shè),需要從購(gòu)買(mǎi)流程中隨機(jī)選取客戶發(fā)送表單。不能向客戶發(fā)送包含所有問(wèn)題的長(zhǎng)篇表單。沒(méi)有人會(huì)填寫(xiě)這種表單。
規(guī)則 6 / 擁有智能問(wèn)卷引擎
基于上述情況,你無(wú)法要求每個(gè)客戶填寫(xiě)不同的調(diào)研問(wèn)卷。你會(huì)得到很低的填寫(xiě)率。引擎的必要之處在于它使用數(shù)據(jù)科學(xué)來(lái)識(shí)別和分配用戶表單并將其存儲(chǔ)到各種數(shù)據(jù)庫(kù)中以檢驗(yàn)假設(shè)。
這才能產(chǎn)出可用于做出決策的可靠結(jié)果。
規(guī)則 7/使用得寸進(jìn)尺法
許多機(jī)構(gòu)錯(cuò)誤地在他們的電子郵件中放置大量 CTA 以征求反饋/進(jìn)行調(diào)研。我發(fā)現(xiàn)人們不太可能點(diǎn)擊這類(lèi) CTA,因?yàn)椴恢绬?wèn)卷中有多少問(wèn)題/頁(yè)。取而代之的是,使用得寸進(jìn)尺法——要求一個(gè)問(wèn)題(可能是一個(gè)打分)以此吸引用戶點(diǎn)擊:
留意用戶在收到初始反饋后是如何被激勵(lì)的
一旦你得到一些回應(yīng),你就可以在同一個(gè)界面中繼續(xù)詢問(wèn)幾個(gè)問(wèn)題,以獲得更詳細(xì)的回復(fù)。不要強(qiáng)迫用戶回答大型問(wèn)卷,除非你施以激勵(lì)機(jī)制。
規(guī)則 8/避免在問(wèn)題描述中帶有傾向性
一旦有了假設(shè),必須確保使用了可以支持該假設(shè)的合適文本。注意問(wèn)題的設(shè)計(jì):
調(diào)研問(wèn)題中的傾向性
規(guī)則 9/避免問(wèn)題描述過(guò)于絕對(duì)
如上所示,問(wèn)題過(guò)于絕對(duì)會(huì)使受訪者陷入無(wú)法提供有用反饋的情況。這些問(wèn)題通常帶有“是”/“否”選項(xiàng),包括“總是”、“所有”、“每個(gè)”、“曾經(jīng)”等措辭。
絕對(duì)的不靈活性使得問(wèn)題在調(diào)研中過(guò)于生硬死板。取而代之的是,問(wèn)題應(yīng)該有受訪者更愿意作答的多種選擇。
規(guī)則 10/共情用戶
在設(shè)計(jì)問(wèn)題時(shí),請(qǐng)花點(diǎn)時(shí)間站在用戶的角度進(jìn)行思考和判斷。避免使用自身很熟悉但用戶很陌生的行話和概念。例如,對(duì)于不知道“最后一英里“含義的用戶,提供有用的線索或更改文本以便于用戶理解,這有助于簡(jiǎn)化問(wèn)題。
共情用戶
另一方面,不要讓問(wèn)題描述過(guò)于冗長(zhǎng)——一個(gè)長(zhǎng)篇大論的問(wèn)題會(huì)把用戶嚇跑。
規(guī)則 11/把問(wèn)題分成幾個(gè)板塊
如果有超過(guò) 3 個(gè)問(wèn)題,請(qǐng)將它們分成不同的頁(yè)面/板塊。每個(gè)板塊的標(biāo)題都應(yīng)與其所包含的問(wèn)題相關(guān)。板塊劃分有助于用戶了解和熟悉后續(xù)問(wèn)題。
將問(wèn)題按照邏輯拆分為不同板塊
規(guī)則 12/根據(jù)屏幕尺寸調(diào)整界面內(nèi)的問(wèn)題數(shù)量
普遍的共識(shí)是每頁(yè)包含 1 個(gè)問(wèn)題。這很煩人,尤其是可以在屏幕上回答超過(guò) 1 個(gè)問(wèn)題時(shí)(移動(dòng)設(shè)備或者電腦)。方法很簡(jiǎn)單:如果你能把 N 個(gè)問(wèn)題放在屏幕內(nèi),那就去做。只需確保 N < 4。
規(guī)則 13/使用表情符號(hào)幫助用戶更好地表達(dá)
“你對(duì) X 的滿意度如何?”這類(lèi)問(wèn)題最容易用表情符號(hào)來(lái)回答,而不是實(shí)際感覺(jué)。在第一張圖片中有所顯示。
請(qǐng)記住,你可以隨時(shí)對(duì)問(wèn)題和選項(xiàng)進(jìn)行說(shuō)明和解釋。
規(guī)則 14/避免情緒表達(dá)的數(shù)字尺度
與上述類(lèi)似,打分評(píng)級(jí)的標(biāo)準(zhǔn)并不統(tǒng)一。要求用戶在 1-10 的范圍內(nèi)描述他們的情緒會(huì)引起混亂——因?yàn)槟阋笥脩魧o(wú)形的情緒轉(zhuǎn)換為具體的數(shù)字。轉(zhuǎn)換并不容易。建議使用文字或表情符號(hào)。
避免使用數(shù)字刻度
研究表明,讓用戶使用情緒來(lái)表達(dá)會(huì)得到更準(zhǔn)確的結(jié)果和更充實(shí)的表單。
規(guī)則 15/避免矩陣式調(diào)查問(wèn)卷
除非你真的必須這樣做,否則不要使用矩陣式調(diào)查問(wèn)卷。矩陣可能會(huì)簡(jiǎn)化表單設(shè)計(jì),但它會(huì)使用戶操作復(fù)雜化。
如果你必須使用矩陣,這里有一些小方法:
- 使用李克特量表 (1-5) ,并將數(shù)字轉(zhuǎn)換為表達(dá)詞/表情符號(hào)
- 將問(wèn)題的數(shù)量限制在 5個(gè)
- 考慮移動(dòng)端用戶體驗(yàn)
第三點(diǎn)很重要。矩陣式調(diào)查問(wèn)卷在移動(dòng)端效果糟糕。下圖是移動(dòng)端嘗試顯示矩陣的示例:
在移動(dòng)中使用矩陣(資料)
附加的解決方案是在每次提交答案后,問(wèn)題收縮關(guān)閉并向上滾動(dòng)(銜接到上一個(gè)關(guān)閉的問(wèn)題)——以幫助用戶移動(dòng)到下一個(gè)問(wèn)題(該問(wèn)題不做滾動(dòng))。
使用問(wèn)題捕捉讓表單填寫(xiě)看起來(lái)在不斷進(jìn)展。另一要顯示的是剩下問(wèn)題的數(shù)量
規(guī)則 16/清楚地標(biāo)明進(jìn)度
大多數(shù)多步驟調(diào)研都有一個(gè)進(jìn)度顯示,但它是百分比指標(biāo),會(huì)很乏味且沒(méi)有信息量。取而代之的是一個(gè)直觀的進(jìn)度數(shù)據(jù),更能緩解用戶的擔(dān)憂:
清楚地標(biāo)明進(jìn)度
這條規(guī)則的一個(gè)例外是基于邏輯的表單——即根據(jù)用戶的回答,用戶會(huì)獲得更多或更少的問(wèn)題來(lái)完成調(diào)研。在這種情況下,請(qǐng)將進(jìn)度保持在板塊級(jí)別。倒計(jì)時(shí)顯示的體驗(yàn)感很好,它取代了問(wèn)題的數(shù)量并將其替換為剩余所需時(shí)間。
規(guī)則 17/避免復(fù)雜的表單邏輯
如果表單有超過(guò) 3 個(gè)邏輯分支,那肯定是設(shè)計(jì)出現(xiàn)錯(cuò)誤。重新審視問(wèn)題和假設(shè),問(wèn)問(wèn)自己這是否是你想了解的事情!簡(jiǎn)化邏輯也有助于結(jié)果分析。
規(guī)則 18/清楚地標(biāo)記 CTA 并賦予它們合適的視覺(jué)重點(diǎn)
下一個(gè)和上一個(gè)按鈕必須清晰可見(jiàn),為每個(gè) CTA 賦予恰當(dāng)?shù)囊曈X(jué)重要性。
清楚地標(biāo)記 CTA
如有困難,嘗試在 CTA 附近加入剩余問(wèn)題數(shù)量或進(jìn)度顯示,以推動(dòng)用戶完成表單,尤其是在表單的最后幾個(gè)板塊中。
03 其他
在本節(jié)中,我們將介紹表單設(shè)計(jì)中要考慮的其他因素。
規(guī)則 19/始終對(duì)問(wèn)題流程進(jìn)行 A/B 測(cè)試
你永遠(yuǎn)不知道對(duì)用戶來(lái)說(shuō)什么最有效。請(qǐng)記住,有些人很樂(lè)意回答 10 個(gè)問(wèn)題,而有些人只喜歡 3 個(gè)。有些人需要獎(jiǎng)勵(lì),而有些人并不需要。
在調(diào)研層面和用戶層面進(jìn)行A/B 測(cè)試。為之后的調(diào)研,記錄下用戶的偏好。
在問(wèn)題流程中,你可能會(huì)想拿出復(fù)雜問(wèn)題放在表單最前面。雖然這方面的理論仍未完善——對(duì)于用戶是先喜歡復(fù)雜,再是簡(jiǎn)單,還是更喜歡復(fù)雜和簡(jiǎn)單的混合,還沒(méi)有明確的結(jié)果,但是記錄問(wèn)題板塊并對(duì)其進(jìn)行 A/B 測(cè)試對(duì)獲得最佳結(jié)果大有幫助。
規(guī)則 20/捕捉響應(yīng)時(shí)間并用它來(lái)激勵(lì)用戶
當(dāng)有了 20% 的回復(fù)后,你可以了解每個(gè)調(diào)研問(wèn)卷的平均填寫(xiě)時(shí)間。此數(shù)據(jù)推動(dòng)其余用戶完成調(diào)研。必須確保:
- 刪除異常值 – 如果調(diào)研填寫(xiě)超過(guò) 5 分鐘,則忽略此類(lèi)時(shí)間。
- 不到處顯示時(shí)間進(jìn)度條——明智地使用時(shí)間進(jìn)度條。不應(yīng)使用超過(guò) 2 分鐘的時(shí)間來(lái)激勵(lì)用戶完成。
捕獲響應(yīng)時(shí)間
規(guī)則 21/使用未完成的表單來(lái)獲得更好的完成率
通過(guò)第一時(shí)間抓取用戶信息,并存儲(chǔ)每一步更新的文本,可以在固定時(shí)間后發(fā)出表單未完成提醒。調(diào)研對(duì)你足夠重要時(shí),總能激勵(lì)用戶完成調(diào)研。
請(qǐng)記住,不同的激勵(lì)措施適用于不同的人。同樣,不同的板塊對(duì)調(diào)查結(jié)果具有不同的重要性。確保以這種思維計(jì)劃調(diào)研流程:
設(shè)計(jì)調(diào)研流程將有助于獲得更好的響應(yīng)率。
請(qǐng)記住,用戶每次打開(kāi)未完成表單時(shí)必須回到他們之前回答的最后一個(gè)問(wèn)題。要求他們從頭開(kāi)始填寫(xiě)是一種罪過(guò)。你會(huì)遭受用戶的反抗。
感謝你的閱讀!希望這 21 條規(guī)則能幫助你設(shè)計(jì)出更好的表單。如果這對(duì)你有所幫助,請(qǐng)留下小贊贊和評(píng)論。
原文標(biāo)題:21 rules of intelligent form design
原創(chuàng)作者:Rameez Kakodker
原文鏈接:https://uxdesign.cc/21-rules-of-intelligent-form-design-5e12c4d1c2e1
翻譯作者:曹競(jìng)羽;授權(quán)獲?。簞①蝗悖粚徍酥笇?dǎo):王翎旭
微信公眾號(hào):三分設(shè)(ID:SFun-Share);用戶體驗(yàn)設(shè)計(jì)師成長(zhǎng)社區(qū)
本文由@三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
你這第四條寫(xiě)的啥玩意兒啊 啰啰嗦嗦 亂七八糟 看都看不懂
清晰的進(jìn)度條哪塊,反而我覺(jué)得不清晰了,還剩五個(gè)問(wèn)題,那我也不知道到底總共有多少問(wèn)題。
感覺(jué)總共多少個(gè)不重要,知道自己還有幾個(gè)結(jié)束比較重要,多的話直接放棄了hhhh
用戶最希望知道的是未完項(xiàng)。
除了找準(zhǔn)用戶提問(wèn)共情,表單還是有很多細(xì)節(jié)需要注意啊??
這樣一設(shè)計(jì)感覺(jué)人性化了好多,也能提高用戶填答率,特別是規(guī)則7,用戶想瞎按前都忍不住停下來(lái)想想
真的!之前遇到的很多表單都設(shè)計(jì)得很糟糕,真的學(xué)到了