Web表單在互聯(lián)網(wǎng)理財(cái)產(chǎn)品中的運(yùn)用

殷曉晨　胡登盧　龐蓉

摘要：文章簡(jiǎn)單闡述7Web表單的五個(gè)基本構(gòu)成要素：標(biāo)簽、輸入框、動(dòng)作、幫助文字和動(dòng)態(tài)反饋，分析了互聯(lián)網(wǎng)理財(cái)類(lèi)產(chǎn)品的表單設(shè)計(jì)要素：登錄和注冊(cè)表單、信息篩選表單、支付表單及賬戶管理的特點(diǎn)，提出了表單的出現(xiàn)時(shí)機(jī)、將表單的內(nèi)容進(jìn)行組織與分類(lèi)、表單的操作符合用戶的心理模型三個(gè)表單設(shè)計(jì)方法，并且使用了眼動(dòng)儀追蹤用戶在使用表單時(shí)的行為表現(xiàn)，驗(yàn)證方案的可行性，致力于提升用戶在使用理財(cái)產(chǎn)品的效率與用戶體驗(yàn)，提高此類(lèi)產(chǎn)品的交易率。

關(guān)鍵詞：理財(cái)產(chǎn)品 表單設(shè)計(jì) 心理模型 效率 用戶體驗(yàn)

中圖分類(lèi)號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2017）09-0160-03

引言互聯(lián)網(wǎng)理財(cái)一般是指是以互聯(lián)網(wǎng)理財(cái)平臺(tái)為核心，通過(guò)互聯(lián)網(wǎng)及移動(dòng)互聯(lián)網(wǎng)的技術(shù)手段推進(jìn)金融理財(cái)服務(wù)網(wǎng)絡(luò)化的進(jìn)程，并整合產(chǎn)業(yè)鏈上下游資源為投資者提供理財(cái)產(chǎn)品的咨詢、購(gòu)買(mǎi)以及投資者教育等服務(wù)。隨人們網(wǎng)絡(luò)意識(shí)和理財(cái)意識(shí)的增強(qiáng)，此類(lèi)產(chǎn)品的發(fā)展愈發(fā)迅猛。國(guó)內(nèi)目前比較成功的互聯(lián)網(wǎng)理財(cái)產(chǎn)品有陸金所、人人貸、百度理財(cái)、支付寶下的螞蟻聚寶等。

在眾多的同類(lèi)產(chǎn)品中，功能與內(nèi)容越來(lái)越趨同，服務(wù)質(zhì)量已經(jīng)成為互聯(lián)網(wǎng)理財(cái)產(chǎn)品差異化競(jìng)爭(zhēng)優(yōu)勢(shì)的關(guān)鍵影響因素。而表單是用戶與網(wǎng)站實(shí)現(xiàn)交互最重要的元素，是連接用戶與服務(wù)的橋梁，其設(shè)計(jì)的好壞直接影響了用戶體驗(yàn)和商業(yè)目標(biāo)。一些設(shè)計(jì)糟糕的表單甚至直接讓用戶不知所措，將用戶拒之門(mén)外。

一、Web表單基本概念

Web表單作為理財(cái)產(chǎn)品網(wǎng)頁(yè)的基本構(gòu)成要素，在網(wǎng)頁(yè)中使用頻率極高。表單是網(wǎng)站數(shù)據(jù)錄入的主要工具，它將互聯(lián)網(wǎng)用戶通過(guò)文本域，復(fù)選框等控件輸入的數(shù)據(jù)，發(fā)送到服務(wù)器進(jìn)行處理，再在網(wǎng)頁(yè)中把結(jié)果反饋給用戶。（如圖1）每個(gè)表單至少都有三個(gè)基本要素：標(biāo)簽、輸入框和動(dòng)作。此外，幫助文字以及操作反饋也是表單的重要組成，能夠幫助用戶更輕松快速完成表單的操作任務(wù)。

“用戶名”、“手機(jī)號(hào)”、“密碼”（如圖1）等作為表單的標(biāo)簽，負(fù)責(zé)提出問(wèn)題，用戶根據(jù)問(wèn)題做出反饋。使用簡(jiǎn)明、易理解的詞語(yǔ)來(lái)命名標(biāo)簽，能讓用戶快速理解表單的功能及如何來(lái)完成表單。

輸入框是用戶錄入信息主要途徑，常用的形式有文本框、單選按鈕、復(fù)選框、下拉菜單等。文本框允許用戶輸入文字、數(shù)字、符號(hào)等。用戶名、密碼類(lèi)信息多使用文本框錄入；單選、復(fù)選按鈕一般提供數(shù)量較少的已有選項(xiàng)供用戶選擇；下拉菜單占用頁(yè)面空間小，且能夠結(jié)合滾動(dòng)條提供更多的選項(xiàng)，其缺點(diǎn)是不能直觀顯示所有選項(xiàng)。

用戶填完表單最終通過(guò)動(dòng)作來(lái)提交，如確認(rèn)、保存，這是用戶填寫(xiě)表單的主要目的，稱(chēng)為主動(dòng)作。而取消、返回、注冊(cè)頁(yè)面上的“登錄”等，與用戶填寫(xiě)表單的目標(biāo)相反，稱(chēng)之為次動(dòng)作。對(duì)于動(dòng)作的主次關(guān)系，需要考慮的是盡可能減少誤操作的可能性，盡可能讓用戶完成表單而不是退出。

幫助文字并不是在所有表單中都會(huì)出現(xiàn)，一些復(fù)雜的操作需要特別的提示時(shí)，幫助文字能夠讓用戶明白如何去填寫(xiě)表單，但過(guò)多的幫助文字也會(huì)增加用戶填寫(xiě)表單的負(fù)擔(dān)。

在用戶執(zhí)行完動(dòng)作后，表單應(yīng)即時(shí)給出動(dòng)態(tài)反饋——成功或錯(cuò)誤。成功消息的反饋告訴用戶完成了表單的填寫(xiě)任務(wù)，既是對(duì)用戶是一種鼓勵(lì)，也能告訴用戶接下來(lái)的操作。錯(cuò)誤的信息反饋需要告訴用戶錯(cuò)誤原因，且如何糾正錯(cuò)誤。

二、互聯(lián)網(wǎng)理財(cái)產(chǎn)品表單的設(shè)計(jì)要素（特點(diǎn)）分析

在互聯(lián)網(wǎng)理財(cái)產(chǎn)品中，用戶需要在該網(wǎng)站注冊(cè)、登錄賬戶，綁定銀行卡，瀏覽理財(cái)產(chǎn)品信息，最終完成交易。主要涉及注冊(cè)、登錄表單、信息篩選表單、支付表單和賬戶管理表單四類(lèi)。每個(gè)表單都有其自己的目標(biāo)，而他們的最終目標(biāo)都是順利、高效地完成交易，每種類(lèi)型的表單都在整個(gè)交易流程中起到了重要的作用。

（一）注冊(cè)、登錄表單的特點(diǎn)分析

注冊(cè)、登錄表單是網(wǎng)站中最常見(jiàn)的形式之一，很多網(wǎng)站要求用戶通過(guò)注冊(cè)獲得個(gè)人賬戶才能使用網(wǎng)站的部分功能。理財(cái)產(chǎn)品核心的功能就是資金的買(mǎi)入賣(mài)出，用戶要實(shí)現(xiàn)交易必須要通過(guò)個(gè)人賬戶。不同于社交或者是門(mén)戶網(wǎng)站，金融信息類(lèi)網(wǎng)站登錄要突出安全特征。注冊(cè)時(shí)要求用戶提供手機(jī)號(hào)碼、電子郵箱、用戶名、密碼、動(dòng)態(tài)驗(yàn)證碼等。用戶在登錄注冊(cè)過(guò)程中，這些問(wèn)題是他們的焦點(diǎn)，設(shè)計(jì)時(shí)盡可能減少其他的干擾，在交互方式和視覺(jué)形式上力求簡(jiǎn)化，以提高用戶的完成效率。所有的網(wǎng)站都希望能發(fā)展新用戶，注冊(cè)表單這時(shí)顯得尤為重要。

（二）信息篩選表單的特點(diǎn)分析

在網(wǎng)站瀏覽信息的過(guò)程中，篩選表單能夠幫助用戶更快速定位到用戶想要找的某類(lèi)信息。尤其當(dāng)網(wǎng)站信息量大，篩選表單就能發(fā)揮其功能。如購(gòu)物網(wǎng)站允許用戶在搜索商品時(shí)按照價(jià)格、銷(xiāo)量、人氣、款式等方式篩選商品，理財(cái)產(chǎn)品也經(jīng)常會(huì)按照不同形式進(jìn)行分類(lèi)，比如按基金類(lèi)型分為債券型、股票型、貨幣型等，根據(jù)基金的評(píng)價(jià)體系對(duì)其進(jìn)行星級(jí)評(píng)分，也可以按照增長(zhǎng)率進(jìn)行排序等。（如圖2）為陸金所網(wǎng)站的基金篩選頁(yè)面截圖，支持按照不同的方式復(fù)合篩選，幫助用戶過(guò)濾掉不感興趣的信息，快速查看到想要的信息。用戶只需在目標(biāo)明確的基金產(chǎn)品中選擇想要購(gòu)買(mǎi)的，提高網(wǎng)站的交易率。

（三）支付表單的特點(diǎn)分析

理財(cái)產(chǎn)品的最終目的是完成交易，用戶能否通過(guò)支付表單完成支付直接影響產(chǎn)品效益，其重要性不言而喻。理財(cái)產(chǎn)品中的支付表單，一般需要顯示購(gòu)買(mǎi)產(chǎn)品的信息、購(gòu)買(mǎi)金額、銀行卡、賬戶余額、支付密碼，有些甚至需要輸入驗(yàn)證碼等信息。支付環(huán)節(jié)往往存在種種情況，如對(duì)于新用戶，在未綁定銀行卡的情況下去購(gòu)買(mǎi)理財(cái)產(chǎn)品時(shí)，是無(wú)法完成交易的。解決這類(lèi)問(wèn)題，一般用戶在支付頁(yè)面進(jìn)行操作時(shí)，即時(shí)給出相關(guān)的提示，告訴用戶去綁定銀行卡。另外在支付的過(guò)程中也支持用戶中斷付款去完成綁定銀行卡的任務(wù)，再回來(lái)完成支付。支付的過(guò)程一定會(huì)涉及到金額，將用戶的賬戶余額顯示出來(lái)，方便用戶了解最大的輸入金額是多少，避免出現(xiàn)輸入金額，提交之后出現(xiàn)余額不足的情況。這種動(dòng)態(tài)的反饋極大程度上減少了用戶犯錯(cuò)的概率。endprint

（四）賬戶管理表單的特點(diǎn)分析

理財(cái)產(chǎn)品的賬戶管理涉及內(nèi)容較多，通過(guò)個(gè)人的賬戶管理，用戶能夠方便查看與自己相關(guān)的信息，管理自己的資產(chǎn)。常用的功能包括銀行卡的添加與解綁、賬戶資金與銀行卡的轉(zhuǎn)入與轉(zhuǎn)出、已購(gòu)產(chǎn)品的收益、買(mǎi)入與賣(mài)出、個(gè)人信息的修改及安全的設(shè)置等。

理財(cái)網(wǎng)站一般允許用戶一個(gè)賬戶綁定多張銀行卡，綁定銀行卡這個(gè)過(guò)程涉及到銀行資金安全，需要驗(yàn)證銀行卡號(hào)、綁定銀行卡的手機(jī)號(hào)、短信驗(yàn)證碼以及銀行卡密碼。若填寫(xiě)的表單設(shè)計(jì)不合理，會(huì)讓用戶操作的流程不順利，使用戶產(chǎn)生挫敗感，甚至失去繼續(xù)嘗試的興趣。銀行卡的解綁過(guò)程也會(huì)涉及到表單，當(dāng)用戶點(diǎn)擊解綁按鈕時(shí)，不應(yīng)直接就完成任務(wù)，這樣用戶很可能因?yàn)檎`操作就很難回到之前狀態(tài)。合理的流程是用戶點(diǎn)擊解綁后彈出銀行卡密碼輸入的表單，只有當(dāng)用戶正確輸入密碼后才能完成操作。

賬戶資金與銀行卡的轉(zhuǎn)入與轉(zhuǎn)出也是理財(cái)類(lèi)產(chǎn)品常用的功能。很多網(wǎng)站要求資金必須先從銀行卡轉(zhuǎn)入理財(cái)賬戶后才能進(jìn)行投資理財(cái)，獲得的收益及本金都保存在賬戶，用戶可以再將資金從理財(cái)賬戶轉(zhuǎn)出至銀行卡。轉(zhuǎn)入時(shí)，用戶填寫(xiě)金額，選擇銀行卡，最后需要輸入交易密碼。由于銀行卡余額不能在網(wǎng)站即時(shí)顯示，可能存在用戶輸入金額超出銀行卡余額的情況，這時(shí)允許用戶快速回到上個(gè)頁(yè)面，重新輸入金額。轉(zhuǎn)出時(shí)，賬戶資金可以即時(shí)驗(yàn)證，超出時(shí)用戶不能進(jìn)行下一步操作。

三、表單的設(shè)計(jì)提升互聯(lián)網(wǎng)理財(cái)產(chǎn)品的用戶體驗(yàn)方法

（一）表單的出現(xiàn)時(shí)機(jī)合理

事實(shí)證明，沒(méi)有人愿意填寫(xiě)表單。但是很多情況下，用戶完成任務(wù)，網(wǎng)站搜集數(shù)據(jù)，都需要通過(guò)用戶填寫(xiě)表單來(lái)實(shí)現(xiàn)?；ヂ?lián)網(wǎng)理財(cái)產(chǎn)品最終要實(shí)現(xiàn)的目標(biāo)是增加用戶數(shù)量與活躍度，完成更多的金融交易。很多網(wǎng)站為了商業(yè)利益，希望用戶填寫(xiě)更多的表單來(lái)搜集用戶資料，增加用戶負(fù)擔(dān)，降低了用戶體驗(yàn)。如一些理財(cái)網(wǎng)站在用戶未登錄的情況訪問(wèn)時(shí)，首頁(yè)大幅頁(yè)面被注冊(cè)內(nèi)容占據(jù)，用戶的焦點(diǎn)都聚集于此，干擾用其正常瀏覽網(wǎng)頁(yè)（如圖3）。此類(lèi)注冊(cè)表單的出現(xiàn)直接影響著用戶對(duì)該網(wǎng)站的第一印象，甚至因?yàn)榉爆嵉淖?cè)而失去用戶。

理財(cái)產(chǎn)品的某些功能是針對(duì)一些高級(jí)用戶設(shè)計(jì)的，初級(jí)用戶很少使用，例如自動(dòng)投資的設(shè)置，初級(jí)用戶往往會(huì)忽視這個(gè)功能。但是對(duì)一些對(duì)網(wǎng)站熟悉的高級(jí)用戶而言，這個(gè)設(shè)置能夠幫助他們輕松實(shí)現(xiàn)定投。將自動(dòng)投資表單做成隱藏的設(shè)計(jì)，既能減少初級(jí)用戶瀏覽網(wǎng)站的負(fù)擔(dān)，又不影響高級(jí)用戶去實(shí)現(xiàn)他們的高級(jí)需求，同時(shí)更好地實(shí)現(xiàn)了網(wǎng)站的商業(yè)目標(biāo)。

（二）將表單的信息進(jìn)行歸納與分類(lèi)

用戶在使用理財(cái)產(chǎn)品時(shí)，需要瀏覽的信息較為繁多，涉及的操作表單內(nèi)容也會(huì)較多。研究表明，人類(lèi)不能處理超過(guò)7個(gè)的可選項(xiàng)。大量的選項(xiàng)可能會(huì)打擊到客戶的積極性，因?yàn)檫@樣會(huì)提升他們做出決策的難度。

針對(duì)內(nèi)容較多，信息復(fù)雜的表單，將具有相同屬性的信息進(jìn)行歸納與分類(lèi)，重新設(shè)計(jì)信息的架構(gòu)，規(guī)劃單頁(yè)信息量，降低用戶負(fù)擔(dān)。如理財(cái)產(chǎn)品的賬戶管理涉及的內(nèi)容較多，如果將所有的信息直接平鋪展示給用戶，用戶將要面對(duì)的是一個(gè)一頁(yè)都放不下的表單，甚至難以明白每一項(xiàng)如何去完成。解決這個(gè)問(wèn)題，可以將賬戶管理分為“賬戶信息”和“我的銀行卡”，兩個(gè)Tab相互切換。通過(guò)這樣的表單設(shè)計(jì)，用戶能夠直觀地了解賬戶管理中的內(nèi)容，也能清楚地完成表單的填寫(xiě)（如圖4）。

（三）表單的操作符合用戶的心理模型

用戶對(duì)事物工作的方式所持的觀念稱(chēng)為心理模型。研究用戶的心理模型，設(shè)計(jì)符合用戶心理的表單，提升用戶在使用理財(cái)產(chǎn)品的效率與滿意度。

1.盡量避免用戶從未接觸過(guò)或者極少接觸的表單類(lèi)型。用戶基本都有在上網(wǎng)使用表單的經(jīng)驗(yàn)，盡管用戶可能首次接觸理財(cái)產(chǎn)品，但其他產(chǎn)品的使用經(jīng)驗(yàn)也是表單設(shè)計(jì)時(shí)的重要參考。當(dāng)用戶填寫(xiě)他們熟悉的表單時(shí)，難度會(huì)降低，能夠更高效地完成，同時(shí)，能夠消除用戶害怕犯錯(cuò)的心理。

2.符合用戶的視覺(jué)習(xí)慣。人類(lèi)在瀏覽信息時(shí)，視線習(xí)慣從上到下，從左到右。當(dāng)表單的布局符合這樣的規(guī)律時(shí)，用戶能夠更輕松地瀏覽信息。我們可以將一個(gè)頁(yè)面中分為橫向和縱向兩個(gè)方向，當(dāng)表單的內(nèi)容不多時(shí)，可以將其沿一個(gè)方向分布。（如圖5）左側(cè)的表單，用戶的視線主要從上至下，流程較短，而當(dāng)用戶去完成右側(cè)的表單時(shí)，視線需要來(lái)頁(yè)面中兩個(gè)方向往復(fù)移動(dòng)，降低效率。

同時(shí)，在用戶填寫(xiě)的過(guò)程中減少與表單沒(méi)有直接關(guān)系的界面元素，盡可能少打斷用戶的視覺(jué)。比如在用戶支付的過(guò)程中，頁(yè)面中只出現(xiàn)與支付相關(guān)的內(nèi)容，有助于用戶專(zhuān)心去完成支付，減少其他的選擇，促進(jìn)交易的完成。

3.表單數(shù)字的輸入。用戶在使用理財(cái)產(chǎn)品時(shí)需要提交銀行卡號(hào)和手機(jī)號(hào)碼，這是一個(gè)需要用戶細(xì)心精確完成的任務(wù)，不允許出現(xiàn)任何錯(cuò)誤。當(dāng)人們面對(duì)一串?dāng)?shù)字時(shí)，習(xí)慣思維是將數(shù)字分組，便于記憶的同時(shí)，能更好地對(duì)比確認(rèn)正確性。在設(shè)計(jì)銀行卡和手機(jī)號(hào)此類(lèi)輸入框時(shí)，按照規(guī)律對(duì)輸入內(nèi)容進(jìn)行劃分，甚至輸入過(guò)程中，將數(shù)字放大，置于輸入框上方，用戶在輸入過(guò)程中可以直觀查看（如圖6）。手機(jī)號(hào)的輸入框也應(yīng)該改成130-3333-3333這樣用戶習(xí)慣的形式，提高用戶輸入效率與準(zhǔn)確度。

總結(jié)

Web表單作為網(wǎng)站設(shè)計(jì)中一個(gè)容易被忽略的設(shè)計(jì)要素，其重要性不可忽視。通過(guò)分析理財(cái)產(chǎn)品的登錄注冊(cè)表單、信息篩選表單、支付表單及賬戶管理表單的特點(diǎn)，結(jié)合心理學(xué)，探究表單設(shè)計(jì)的一些規(guī)則，提升理財(cái)產(chǎn)品用戶體驗(yàn)的同時(shí)，提高交易完成效率，為網(wǎng)站帶來(lái)意想不到的收益。Web技術(shù)持續(xù)進(jìn)步，對(duì)Web表單的設(shè)計(jì)期待更多的學(xué)者去探索。endprint