殷曉晨　胡登盧　龐蓉

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

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

中圖分類號：TP393.092 文獻標識碼：A

文章編號：1003-0069（2017）09-0160-03

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

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

一、Web表單基本概念

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

“用戶名”、“手機號”、“密碼”（如圖1）等作為表單的標簽，負責提出問題，用戶根據(jù)問題做出反饋。使用簡明、易理解的詞語來命名標簽，能讓用戶快速理解表單的功能及如何來完成表單。

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

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

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

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

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

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

（一）注冊、登錄表單的特點分析

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

（二）信息篩選表單的特點分析

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

（三）支付表單的特點分析

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

（四）賬戶管理表單的特點分析

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

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

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

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

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

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

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

（二）將表單的信息進行歸納與分類

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

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

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

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

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

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

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

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

總結(jié)

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