表單在B端產(chǎn)品中是重要的組成部分，設(shè)計(jì)表單是比較考驗(yàn)設(shè)計(jì)師綜合能力和設(shè)計(jì)細(xì)節(jié)的。一定程度上，表單設(shè)計(jì)的好壞也決定了產(chǎn)品的成敗。

在實(shí)際項(xiàng)目中隨著B(niǎo)端產(chǎn)品的復(fù)雜化，出現(xiàn)冗余的視覺(jué)干擾信息，降低信息傳達(dá)的效率，使得用戶認(rèn)知成本高，操作難度大。那么對(duì)于表單如何提升表單的易用性又該如何數(shù)據(jù)量化易用性呢？本文從4大方面闡述全面提升表單的易用性并驗(yàn)證。

一、表單的構(gòu)成及應(yīng)用場(chǎng)景

表單由表單標(biāo)簽、表單域、提示信息、操作按鈕組成。

二、為什么要提升表單的易用性

在我們?cè)O(shè)計(jì)B端產(chǎn)品的過(guò)程中，總會(huì)遇到用戶信息填寫(xiě)邏輯混亂、資料收集不全的狀況，導(dǎo)致用戶在瀏覽和編輯時(shí)的操作體驗(yàn)大打折扣。主要反映在以下幾個(gè)方面：

1、用戶瀏覽信息順序混亂，信息層邏輯不清

2、不同信息內(nèi)容風(fēng)格及交互不統(tǒng)一，用戶難以建立統(tǒng)一心智

3、產(chǎn)研協(xié)作與資產(chǎn)沉淀之間有斷層，無(wú)法有效沉淀與跟蹤管理

4、整體頁(yè)面操作時(shí)間長(zhǎng)，用戶跳脫率高

5、用戶客訴數(shù)據(jù)高

三、如何提升表單易用性

提升表單易用性的4大原則：易閱讀 、易操作 、安全感 、所見(jiàn)即所得

1、易閱讀

a、采用扁平化設(shè)計(jì)，化繁為簡(jiǎn)，去除冗余的視覺(jué)干擾，使得頁(yè)面更加簡(jiǎn)潔清晰。

如：當(dāng)必填特別多時(shí)，就不用都標(biāo)出來(lái)了，只需要單獨(dú)標(biāo)出非必填項(xiàng)即可，最大化得信息降噪。

b、盡量采用單列布局，視覺(jué)動(dòng)線流暢，不容易遺漏信息；按Enter換行，可以最大程度得提升表單的輸入效率。此處的用戶心智與操作效率比屏幕利用率更為重要。

c、面對(duì)多行或復(fù)雜表單可以采用邏輯分組+合適的折疊度，提高頁(yè)面有效信息的透?jìng)鳎黾佑脩籼顚?xiě)表單的效率，讓用戶快速填寫(xiě)，快速離開(kāi)。

2、易操作

a、為用戶提供合適的默認(rèn)項(xiàng)，可以減少用戶操作步驟，提高填寫(xiě)效率。

b、在表單中填寫(xiě)上部分信息即可自動(dòng)獲取下面信息，無(wú)需用戶再次填寫(xiě)，也大大增加了操作效率。

c、根據(jù)搜索、聯(lián)想，自動(dòng)現(xiàn)實(shí)匹配信息，大大減少用戶記憶和認(rèn)知的負(fù)擔(dān)。

d、對(duì)于一些標(biāo)準(zhǔn)證件、文本信息的錄入，可以通過(guò)OCR識(shí)別文件內(nèi)容。當(dāng)用戶上傳圖片后，運(yùn)用圖像識(shí)別技術(shù)提取關(guān)鍵信息并自動(dòng)錄入。

如果圖片不清晰或存在水印，此時(shí)也應(yīng)提供修正渠道，可逐一校對(duì)并修改。

3、安全感

a、操作前給予正確提示，避免用戶重復(fù)試錯(cuò)，缺乏安全感。

b、操作中給予實(shí)時(shí)反饋，為用戶封閉不正確的道路。

c、操作后的提醒和糾錯(cuò)，告訴用戶哪里錯(cuò)了，而非簡(jiǎn)單粗暴的錯(cuò)誤警告。

4、所見(jiàn)即所得

邊設(shè)置，邊預(yù)覽，適合對(duì)移動(dòng)端、小程序、H5的配置。

四、如何量化體驗(yàn)度量衡

通過(guò)用戶點(diǎn)擊數(shù)據(jù)，輔助設(shè)計(jì)洞見(jiàn)。從4個(gè)方面量化體驗(yàn)度量衡：任務(wù)完成率、任務(wù)完成時(shí)長(zhǎng)、必填項(xiàng)目數(shù)、易用度評(píng)分

1、任務(wù)完成率

通過(guò)埋點(diǎn)獲取數(shù)據(jù)使用公式進(jìn)行計(jì)算或讓技術(shù)搭建看板直接看。新版上線后，用戶會(huì)有一定的學(xué)習(xí)適應(yīng)周期，最好選取一個(gè)月以后的數(shù)據(jù)，比較具有參考意義。

2、任務(wù)完成時(shí)長(zhǎng)

數(shù)據(jù)分析發(fā)現(xiàn)，任務(wù)完成時(shí)長(zhǎng)數(shù)據(jù)呈現(xiàn)偽正態(tài)分布狀態(tài)，取眾數(shù)最具代表意義。

3、必填項(xiàng)目數(shù)量

結(jié)合業(yè)務(wù)場(chǎng)景，減少不必要的必填項(xiàng)，只設(shè)置必要的信息填寫(xiě)，能自動(dòng)獲取則自動(dòng)獲取，減少操作步驟，增加操作效率。

4、易用度評(píng)分

通過(guò)在產(chǎn)品后臺(tái)投放調(diào)研問(wèn)卷，獲取真實(shí)的用戶，使用登門檻效應(yīng)讓其進(jìn)行評(píng)分。最后可把被篩選的對(duì)象圈到訪談對(duì)象池，有機(jī)會(huì)可以成為產(chǎn)品成長(zhǎng)用戶。

五、總結(jié)

以上就是對(duì)于提升表單易用性及驗(yàn)證的思考，總結(jié)如下：

對(duì)于用戶來(lái)說(shuō)

提升表單易用性可以提高信息內(nèi)容理解和操作效率，更便于管理賬戶

對(duì)于產(chǎn)品來(lái)說(shuō)

提升表單易用性可以提升獲取用戶和企業(yè)信息內(nèi)容的效率，優(yōu)化企業(yè)框架結(jié)構(gòu)，提升信息質(zhì)量

對(duì)于設(shè)計(jì)來(lái)說(shuō)

提升表單易用性可以提升信息獲取效率，節(jié)約設(shè)計(jì)和開(kāi)發(fā)成本

文章來(lái)源：站酷   作者：牛肉咖喱garry 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)