B端組件 | 輸入框文案設(shè)計(jì)要點(diǎn)
在B端設(shè)計(jì)中,輸入框文案設(shè)計(jì)似乎是細(xì)微末節(jié)的事情,不過(guò)好的輸入框文案設(shè)計(jì),確實(shí)可以很大程度地提升效率與用戶體驗(yàn)感。那么,輸入框文案設(shè)計(jì)該注意哪些事項(xiàng)呢?本文梳理了輸入框文案設(shè)計(jì)的相關(guān)要點(diǎn),一起來(lái)看看吧。
在B端設(shè)計(jì)中,輸入框是用戶與系統(tǒng)進(jìn)行信息交互的關(guān)鍵組件之一。良好的輸入框文案設(shè)計(jì)不僅能夠提高用戶體驗(yàn),還能有效減少用戶錯(cuò)誤輸入,提高工作效率。
目前輸入框有兩種文案類型,分別是默認(rèn)文案和報(bào)錯(cuò)文案。針對(duì)這兩種文案,有以下設(shè)計(jì)要點(diǎn)需要考慮:
一、默認(rèn)文案
第一步:明確不同用戶對(duì)輸入框的理解程度。
先以QQ的注冊(cè)流程為例,說(shuō)明一下用戶對(duì)輸入框字段熟悉程度決定輸入框文案的設(shè)計(jì)結(jié)果,由于我們C端用戶對(duì)注冊(cè)表單填寫流程是非常熟悉的,此時(shí)輸入框文案的設(shè)計(jì)就很簡(jiǎn)單,且由于熟悉度足夠高的情況下,昵稱和密碼的輸入框標(biāo)題文本都省略了,只保留了輸入框內(nèi)的文案(此時(shí)文案是相當(dāng)于動(dòng)態(tài)的標(biāo)題)。
QQ注冊(cè)頁(yè)面
可以看出,針對(duì)用戶熟悉度越高的輸入框字段,文案的設(shè)計(jì)就應(yīng)該越簡(jiǎn)單越好,在有表頭的情況下,文案可以為空,或者用“請(qǐng)輸入”來(lái)替代。此時(shí)無(wú)需再重復(fù)主體,如下方用戶名的結(jié)構(gòu)。
用戶名
而當(dāng)用戶面臨的輸入框字段不夠通俗易懂時(shí),那么該怎么做呢?
第二步:依舊用戶理解程度,提供對(duì)應(yīng)的解決方案。
如果輸入框標(biāo)題用戶是不熟悉的但理解難度較低,可以通過(guò)輸入框文案直接說(shuō)明如何填寫,我們常見(jiàn)的輸入框文案有請(qǐng)選擇序號(hào)、請(qǐng)?zhí)砑游募?、?qǐng)輸入身份證號(hào)等,這里默認(rèn)文案格式可以抽象為 動(dòng)作引導(dǎo)+內(nèi)容類型+格式示例(示例可依據(jù)具體情況省略),如下方的頁(yè)面地址所示。
頁(yè)面地址
同時(shí),如果文案太長(zhǎng)的話,還可以通過(guò)?。≌f(shuō)明,輸入框文案復(fù)雜程度決定了文案的呈現(xiàn)形式。如下方IP地址,對(duì)應(yīng)的輸入框應(yīng)該調(diào)大顯示或進(jìn)一步的用小!說(shuō)明來(lái)承載較多的文案內(nèi)容。
IP地址
如果輸入框標(biāo)題的理解難度較高,就不用強(qiáng)行要求用戶理解,幫助用戶達(dá)到完成輸入框的填寫目標(biāo)即可。小白用戶不一定能看懂,此時(shí)直接提供格式示例的價(jià)值會(huì)更大一些,提供格式示例一是可以解決本身有格式要求的;二是幫助人更傻瓜式地完成內(nèi)容輸入。
我在做云計(jì)算業(yè)務(wù)時(shí),經(jīng)常會(huì)遇到一些不懂的字段,以IP地址為例, 對(duì)于不懂網(wǎng)絡(luò)知識(shí)的人,一般都不了解這個(gè)概念是什么?由于它是網(wǎng)絡(luò)層面上很抽象的東西(它相當(dāng)于是電腦的在網(wǎng)絡(luò)中所在的地址,可以按照我們?nèi)说木幼〉刂吠砣ダ斫猓?,這種對(duì)于小白用戶就要加上示例說(shuō)明;但對(duì)于有網(wǎng)絡(luò)知識(shí)的人,他對(duì)這個(gè)概念就會(huì)熟悉一些,在輸入框的文案設(shè)計(jì)上就可以相對(duì)簡(jiǎn)單一些。
從上述的例子可以看出,需要根據(jù)你的目標(biāo)用戶對(duì)輸入框標(biāo)題的理解程度,去決策輸入框文案設(shè)計(jì)采用什么解決方案,是否要有文案,不同等級(jí)的用戶對(duì)輸入框標(biāo)題的接受度是不一樣的。
有些輸入框標(biāo)題普世度很高或者對(duì)專家級(jí)用戶是司空見(jiàn)慣的,這里采用的解決方案就是文案為空,或者用“請(qǐng)輸入”來(lái)替代;存在一定理解難度的輸入框標(biāo)題,其文案的解決方案可以采用動(dòng)作引導(dǎo)+內(nèi)容類型+格式示例(示例可依據(jù)具體情況省略)的格式。
總結(jié)和補(bǔ)充上述的解決方案,這里的底層邏輯是:
- 提供格式示例,讓用戶直接“照抄”
- 說(shuō)明獲取輸入框內(nèi)容的方式,讓用戶找到“答案”
除此之外還要補(bǔ)充一個(gè)技巧:涉及敏感信息的輸入框字段,可以先說(shuō)明用途,可以減少用戶疑惑或者抗拒,給用戶來(lái)一頓心里按摩。
講完輸入框的默認(rèn)文案設(shè)計(jì)技巧之后,我們還需要考慮報(bào)錯(cuò)文案的設(shè)計(jì)。
二、報(bào)錯(cuò)文案
報(bào)錯(cuò)文案是在用戶填寫表單或輸入信息時(shí),系統(tǒng)檢測(cè)到用戶輸入不符合規(guī)范或有錯(cuò)誤時(shí)所展示的文本提示。在設(shè)計(jì)時(shí),有以下內(nèi)容需要考慮:
- 友好語(yǔ)氣: 報(bào)錯(cuò)信息要使用友好的語(yǔ)氣,避免采用威脅或指責(zé)的措辭。用戶更愿意接受積極的建議而不是過(guò)于負(fù)面的語(yǔ)言。
- 清晰明了: 報(bào)錯(cuò)文案應(yīng)該簡(jiǎn)潔、清晰地傳達(dá)錯(cuò)誤信息。避免使用過(guò)于晦澀難懂的語(yǔ)言,確保用戶一目了然地了解發(fā)生了什么問(wèn)題。
- 提供解決方案: 報(bào)錯(cuò)文案也是需要提供解決方案的,提供用戶解決問(wèn)題的建議或步驟。這可以包括如何更正輸入、修改格式或提供有效的樣例參考信息。
將上面的這些原則落地在常見(jiàn)的報(bào)錯(cuò)場(chǎng)景中,可以找到對(duì)應(yīng)的應(yīng)對(duì)方式,看看常見(jiàn)的報(bào)錯(cuò)場(chǎng)景和對(duì)應(yīng)的解決方案(此處只講前端返回的報(bào)錯(cuò)):
1)必填項(xiàng)未填寫
遵守友好語(yǔ)氣和清晰明了原則:標(biāo)紅輸入框,輸入框下方報(bào)錯(cuò)文案采用 動(dòng)作引導(dǎo)+內(nèi)容類型 的格式,比如請(qǐng)輸入用戶名、請(qǐng)選擇網(wǎng)絡(luò)等。
2)長(zhǎng)度&范圍超限
當(dāng)輸入字符超過(guò)校驗(yàn)數(shù)量時(shí),提示可輸入的字符范圍,清晰指出錯(cuò)誤,明確如何更正輸入。
輸入字符超過(guò)可輸入的范圍時(shí),直接說(shuō)明不可輸入的內(nèi)容是哪些,清晰指出錯(cuò)誤,明確如何更正輸入。
3)格式錯(cuò)誤
輸入格式不正確時(shí),使用案例說(shuō)明規(guī)范。
三、常見(jiàn)輸入框文案設(shè)計(jì)建議
默認(rèn)文案提示:
報(bào)錯(cuò)文案提示:
總結(jié)一下,默認(rèn)文案和報(bào)錯(cuò)文案的設(shè)計(jì)要點(diǎn)。
默認(rèn)文案設(shè)計(jì)要點(diǎn):
第一步:明確目標(biāo)用戶及其理解水平。
了解目標(biāo)用戶是誰(shuí)和其對(duì)輸入框內(nèi)容的理解水平。
第二步:提供有效的輔助填寫方案。
- 對(duì)于簡(jiǎn)單輸入框標(biāo)題:不使用文案或僅使用”請(qǐng)輸入”。
- 對(duì)于稍微復(fù)雜但用戶能理解的輸入框標(biāo)題:采用動(dòng)作引導(dǎo)+內(nèi)容類型+格式示例,可省略格式示例。
- 對(duì)于復(fù)雜難以理解的輸入框標(biāo)題:同樣采用動(dòng)作引導(dǎo)+內(nèi)容類型+格式示例,或者直接說(shuō)明獲取該字段的方式,幫助用戶找到答案。
補(bǔ)充技巧: 對(duì)于涉及敏感信息的輸入框字段,可以在默認(rèn)文案中先簡(jiǎn)要說(shuō)明其用途。
報(bào)錯(cuò)文案設(shè)計(jì)要點(diǎn):
- 友好語(yǔ)氣: 采用友好的語(yǔ)氣,避免使用威脅或指責(zé)的措辭,以提高用戶接受信息的意愿。
- 清晰明了:確保報(bào)錯(cuò)文案簡(jiǎn)潔明了,能夠讓用戶一目了然地理解發(fā)生了什么問(wèn)題。
- 提供有效的輔助填寫方案: 報(bào)錯(cuò)文案不僅指出問(wèn)題,還要提供解決方案或建議,幫助用戶糾正錯(cuò)誤,可能包括修改輸入、調(diào)整格式或提供有效的樣例參考。
盡管輸入框文案設(shè)計(jì)顯得微小細(xì)節(jié),但通過(guò)精心思考這些細(xì)節(jié),可以提升用戶對(duì)輸入框的理解,從而增進(jìn)填寫效率,最終提高整個(gè)表單的填寫效率,具有重要意義。
本文由 @bwyw 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于CCO協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!