表單設(shè)計(jì)與校驗(yàn)反饋

10 評(píng)論 15103 瀏覽 129 收藏 10 分鐘

編輯導(dǎo)語(yǔ):表單是連接用戶與數(shù)據(jù)庫(kù)的橋梁,通過引導(dǎo)用戶進(jìn)行信息的填寫,從而提交數(shù)據(jù)給后臺(tái)。在用戶填寫提交時(shí),還需要對(duì)用戶輸入內(nèi)容進(jìn)行校驗(yàn)與反饋,保證用戶信息填寫的完整度。那么,該如何實(shí)現(xiàn)這一過程?作者分享了表單設(shè)計(jì)與校驗(yàn)反饋的四個(gè)方面,希望對(duì)你有所幫助。

表單是建立用戶與數(shù)據(jù)庫(kù)聯(lián)系的橋梁,通過引導(dǎo)用戶填寫信息及設(shè)置后提交給后臺(tái)。在收集用戶數(shù)據(jù)信息的同時(shí),還可以通過表單向用戶展示數(shù)據(jù)信息。用戶在進(jìn)行表單填寫/提交時(shí),我們還需要進(jìn)行輸入內(nèi)容校驗(yàn)并及時(shí)反饋,確保用戶提交信息的完整性。

本篇簡(jiǎn)單概述了常見的“表單錄入模式”、“表單構(gòu)成”、“表單的校驗(yàn)形式”以及對(duì)校驗(yàn)結(jié)果進(jìn)行“反饋”四個(gè)內(nèi)容。

一、表單錄入模式

1. 單步錄入

單步錄入指的是在一個(gè)頁(yè)面即可完成內(nèi)容輸入。

適用場(chǎng)景:內(nèi)容較少、結(jié)構(gòu)簡(jiǎn)單;

常見的形式有:普通形式和引導(dǎo)式。

表單與校驗(yàn)反饋

普通形式

表單與校驗(yàn)反饋

引導(dǎo)式

2. 分步錄入

適用場(chǎng)景:內(nèi)容較多、錄入內(nèi)容的方式差異較大;一般通過添加分步導(dǎo)航展示內(nèi)容。

表單與校驗(yàn)反饋

二、表單構(gòu)成

表單通常由“表單類別”、“標(biāo)簽/標(biāo)題”、“輸入域”、“提示”、“操作按鈕”等構(gòu)成。

表單與校驗(yàn)反饋

①標(biāo)簽:告知用戶此項(xiàng)輸入的內(nèi)容。按需求分為“必填項(xiàng)”(不填寫則無法進(jìn)行后續(xù)操作)、“選填項(xiàng)”(不填寫也不會(huì)影響后續(xù)操作)、“不填項(xiàng)”(系統(tǒng)自動(dòng)生成,無需填寫);

②輸入域:用于采集用戶信息。常見的輸入域有4種形式:“輸入框”、“文件上傳”、“選擇內(nèi)容”(單選/多選、開關(guān)、級(jí)聯(lián)選擇器等)、“時(shí)間選擇”(日期、時(shí)間)、“數(shù)值選擇”(步進(jìn)器/滑動(dòng)輸入條);

③提示:幫助用戶快速、準(zhǔn)確地理解輸入域操作/輸入內(nèi)容,可分為“輸入前”、“輸入中”、“輸入后” 三個(gè)階段進(jìn)行提示。

a.“輸入前”的提示被稱為“引導(dǎo)提示”,“引導(dǎo)提示”一般分為 ‘全局提示’&‘單項(xiàng)提示’:

‘全局提示’位于整個(gè)表單開始,告知用戶填寫表單的用途/注意事項(xiàng)/用戶信息安全性告知等,是對(duì)整個(gè)表單的解釋說明;

表單與校驗(yàn)反饋

‘單項(xiàng)提示’定位精準(zhǔn),只對(duì)此項(xiàng)輸入域進(jìn)行解釋說明;

b.“輸入中”/“輸入后”被稱為“反饋提示”,提醒用戶當(dāng)前輸入的內(nèi)容是否符合填寫規(guī)則。

④操作按鈕:表單填寫完成后要進(jìn)入的動(dòng)作,例如 “完成”/“提交”。

有的表單當(dāng)信息必填項(xiàng)未填寫完整時(shí),提交/完成 按鈕為灰色狀態(tài),僅當(dāng)必填信息填寫完成后按鈕變?yōu)楦吡练娇蛇M(jìn)行下一步;有的表單不使用前者方式,而是始終顯示高亮,但在用戶提交時(shí)校驗(yàn),并對(duì)表單進(jìn)行單項(xiàng)提示。

三、表單的校驗(yàn)形式

填寫表單過程中的“輸入中”/“輸入后”被稱為“反饋提示”,針對(duì)反饋信息的精準(zhǔn)性,通過有兩種校驗(yàn)方式:前端校驗(yàn)和后端校驗(yàn)。

  • 前端校驗(yàn):校驗(yàn)輸入的內(nèi)容格式,例如 用戶名格式、手機(jī)號(hào)格式等;
  • 后端校驗(yàn):與數(shù)據(jù)庫(kù)相關(guān),校驗(yàn)信息正確與否,例如 用戶名是否存在、用戶名密碼是否匹配等;

校驗(yàn)觸發(fā)條件:

  • 輸入時(shí),進(jìn)行校驗(yàn);
  • 輸入完成、失去焦點(diǎn)時(shí),進(jìn)行校驗(yàn);
  • 輸入完成、繼續(xù)操作(保存/提交/下一步)時(shí)進(jìn)行校驗(yàn);

報(bào)錯(cuò)的方式:

  • 即時(shí)報(bào)錯(cuò)
  • 輸入完成后報(bào)錯(cuò)

由于校驗(yàn)觸發(fā)條件的不同和報(bào)錯(cuò)方式的不同,可以組成下面幾種方式:

1. 輸入時(shí)驗(yàn)證、即時(shí)報(bào)錯(cuò)

在用戶輸入的時(shí)候進(jìn)行實(shí)時(shí)驗(yàn)證,獲取焦點(diǎn)的時(shí)候顯示提示,隨著輸入的過程,符合要求后已與用戶通過驗(yàn)證的反饋。

表單與校驗(yàn)反饋

缺點(diǎn):影響一些性能,但是這個(gè)影響比較??;如果在輸入一個(gè)錯(cuò)誤率很高的內(nèi)容,頻繁的給用戶錯(cuò)誤提示會(huì)影響用戶體驗(yàn)。

優(yōu)點(diǎn):減輕后臺(tái)數(shù)據(jù)傳送壓力。

常用于:檢測(cè)數(shù)據(jù)類型,注冊(cè)頁(yè)面的密碼檢驗(yàn)(輸入是否符合規(guī)則)。

2. 失去焦點(diǎn)、即時(shí)報(bào)錯(cuò)

用戶輸入完成后,鼠標(biāo)點(diǎn)擊非輸入框的其他位置進(jìn)行校驗(yàn),并且如果有錯(cuò)誤進(jìn)行報(bào)錯(cuò)。

表單與校驗(yàn)反饋

缺點(diǎn):如果輸入有誤,用戶需要多一步操作,點(diǎn)擊會(huì)有錯(cuò)誤的輸入框進(jìn)行修改,稍微影響用戶體驗(yàn)。

優(yōu)點(diǎn):為用戶修改錯(cuò)誤節(jié)省時(shí)間、避免出現(xiàn)很多錯(cuò)誤需要改正的情況。

常用于:輸入驗(yàn)證碼、注冊(cè)等功能。

3. 操作 保存/提交/下一步 時(shí)全部報(bào)錯(cuò)

在用戶全部輸入完成以后,點(diǎn)擊下一步操作的時(shí)候?qū)⑺绣e(cuò)誤提示都展示給用戶。

表單與校驗(yàn)反饋

缺點(diǎn):用戶不能及時(shí)看到反饋,及時(shí)進(jìn)行修改,如果表單過長(zhǎng)的話,一定程度上會(huì)影響用戶體驗(yàn);

優(yōu)點(diǎn):減少后端服務(wù)器壓力,提高頁(yè)面性能;

常用于:登錄賬號(hào)時(shí)檢測(cè)輸入內(nèi)容是否合法。

四、反饋設(shè)計(jì)

在尼爾森十大可用性原則中,第一原則就是系統(tǒng)狀態(tài)的可見性,即系統(tǒng)狀態(tài)反饋給用戶,不能讓用戶因?qū)顟B(tài)的未知而產(chǎn)生焦慮。

系統(tǒng)狀態(tài)的可見性 包括“用戶知道自己在做什么”、“系統(tǒng)在做什么”、“系統(tǒng)進(jìn)行到了哪一步”、“用戶當(dāng)前所處環(huán)節(jié)”等。應(yīng)當(dāng)始終為用戶提供適當(dāng)且及時(shí)的反饋,避免用戶執(zhí)行錯(cuò)誤操作。

反饋機(jī)制的設(shè)計(jì)原則:

表單與校驗(yàn)反饋

①輕量。遵循【告知但不打擾】的基本原則;

②清晰的文案。反饋內(nèi)容需要明確表達(dá)目的及操作后果,錯(cuò)誤提示需要說清錯(cuò)誤原因及改正方式;

表單與校驗(yàn)反饋

③保持系統(tǒng)中所有相同事件反饋方式一致,利于培養(yǎng)用戶使用習(xí)慣和心理預(yù)期。

表單與校驗(yàn)反饋

④就近原則。反饋出現(xiàn)在操作點(diǎn)最近的地方時(shí),最容易被注意到且容易被操作的。

表單與校驗(yàn)反饋

 

本文由 @產(chǎn)品秘閣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 特別好,特別是校驗(yàn)形式寫得很完整,別的地方?jīng)]找到,感謝~

    來自浙江 回復(fù)
  2. 請(qǐng)問一下例子中的郵箱注冊(cè)是哪個(gè)產(chǎn)品呀?感覺他的提示信息很適合作為“打破文字墻”的案例

    來自上海 回復(fù)
    1. 騰訊云官網(wǎng)郵箱注冊(cè)

      來自湖北 回復(fù)
  3. 關(guān)注公眾號(hào)【產(chǎn)品秘閣】獲取更多精彩

    來自湖北 回復(fù)
  4. 雖然對(duì)這個(gè)不是很了解,但是看整篇文章好有道理的感覺哈哈哈哈

    來自江西 回復(fù)
    1. 復(fù)制對(duì)樓下的回復(fù):本文再細(xì)節(jié)一點(diǎn)的話就是細(xì)分出“表單設(shè)計(jì)”、“校驗(yàn)形式”、“尼爾森原則”,每個(gè)話題單領(lǐng)出來都是一篇大長(zhǎng)文,在這個(gè)網(wǎng)站都是可以找到的,而且更詳細(xì)更專業(yè)。然而本文主要目的還是想能引起產(chǎn)品小白的思考,對(duì)產(chǎn)品知識(shí)查漏補(bǔ)缺。另外公眾號(hào)(產(chǎn)品秘閣)有圖片可以直觀了解,只是搬過來的時(shí)候還需要重新上傳太麻煩了。

      來自湖北 回復(fù)
  5. 聽君一席話 如聽一席話

    回復(fù)
    1. HHHH可以看看我對(duì)樓下的回復(fù)

      來自湖北 回復(fù)
  6. 一個(gè)比較籠統(tǒng)的整理吧,希望能夠再細(xì)節(jié)一點(diǎn),也缺少一些圖片例子啥的感覺看起來很單調(diào)

    來自廣東 回復(fù)
    1. 再細(xì)節(jié)一點(diǎn)的話就是細(xì)分出“表單設(shè)計(jì)”、“校驗(yàn)形式”、“尼爾森原則”,每個(gè)話題單領(lǐng)出來都是一篇大長(zhǎng)文,在這個(gè)網(wǎng)站都是可以找到的,而且更詳細(xì)更專業(yè)。然而本文主要目的還是想能引起產(chǎn)品小白的思考,對(duì)產(chǎn)品知識(shí)查漏補(bǔ)缺。另外公眾號(hào)(產(chǎn)品秘閣)有圖片可以直觀了解,只是搬過來的時(shí)候還需要重新上傳太麻煩了。

      來自湖北 回復(fù)