表單，主要是負(fù)責(zé)數(shù)據(jù)采集的功能，需要訪問(wèn)者自己去填寫(xiě)，如訪問(wèn)者的姓名、郵箱、性別、地址、留言建議、設(shè)置密碼、管理個(gè)人賬戶(hù)等等。時(shí)下表單無(wú)處不在，成功的表單設(shè)計(jì)不僅能提高用戶(hù)的滿(mǎn)意度，更能收集更加精確的數(shù)據(jù)，相反失敗的表單設(shè)計(jì)只會(huì)收集到錯(cuò)誤雜亂的信息，可能會(huì)最終導(dǎo)致潛在用戶(hù)的流失。

一、組織表單的內(nèi)容，給用戶(hù)一個(gè)友好的引導(dǎo)

首先要明確的告之用戶(hù)填的是一個(gè)什么性質(zhì)的表單以及填完后能做些什么？哪些問(wèn)題是一定要問(wèn)的？有沒(méi)有別的途徑可以獲取用戶(hù)的資料？大致表單的布局分為三種類(lèi)型：縱向排列、逐步填寫(xiě)（多頁(yè)顯示）和左右布局。這三種表單的組織形式功能特點(diǎn)，通過(guò)不同的使用環(huán)境決定它們具體的樣式。下面通過(guò)一些對(duì)應(yīng)的實(shí)例我們來(lái)做些具體的分析：

圖1

根據(jù)Web慣例調(diào)查，卸載軟件的界面常見(jiàn)組織結(jié)構(gòu)，為縱向排列樣式。一般頂部為明確填寫(xiě)表單的目的，再呈現(xiàn)表單的具體問(wèn)題。在卸載類(lèi)型的表單中，內(nèi)容一定要精簡(jiǎn)，減少用戶(hù)輸入，盡量提供選擇題，少問(wèn)答題，沒(méi)有必填項(xiàng)。要知道用戶(hù)是不喜歡填寫(xiě)表單的，尤其是當(dāng)用戶(hù)卸載軟件后也是沒(méi)有太多的耐心來(lái)填寫(xiě)表單的。如圖1的卸載表單縱向內(nèi)容組織形式，頂部是致辭，明確的說(shuō)出問(wèn)這些問(wèn)題的目的，下面是分組表單內(nèi)容。這種縱向排版簡(jiǎn)潔填寫(xiě)的表單組織形式，更利于獲取用戶(hù)的反饋。

圖2

圖3

圖4

圖5

在一定情況下，很多問(wèn)題需要按順序回答，理解并組織好每個(gè)表單的情境能得到最佳答案，如果把表單用對(duì)話的形式展現(xiàn)，主題之間自然會(huì)出現(xiàn)間斷，所以就會(huì)需要多個(gè)網(wǎng)頁(yè)把對(duì)話變成若干有意義并容易理解的主題。如圖2 ——圖5 的填寫(xiě)表單多頁(yè)的展現(xiàn)形式。把表單當(dāng)成是與特定的人在對(duì)話，而不是與一堆數(shù)據(jù)輸入框在對(duì)話，每個(gè)表單都用不同的情境問(wèn)題與用戶(hù)進(jìn)行交流，這樣的實(shí)際回答率會(huì)更高。

圖6

當(dāng)表單想要搜集更多答案時(shí)，可以考慮在表單填完之后提出一些可選的問(wèn)題，輔助獲得更多的答案。表單的標(biāo)簽使用術(shù)語(yǔ)需要統(tǒng)一，簡(jiǎn)潔、單個(gè)詞，這樣的標(biāo)簽要更容易解釋清楚。如圖6的表單設(shè)計(jì)，使用左右布局的排版方式，左側(cè)放上必填和重要的表單項(xiàng)，右側(cè)輔助放上可供選擇的表單，減少頁(yè)面表單內(nèi)容視覺(jué)的龐大性，整體界面內(nèi)容居中排列這種方式也比較美觀易讀。

二、填寫(xiě)表單的反饋，給用戶(hù)貼心的引導(dǎo)

為了提高表單的完成率和準(zhǔn)確率，設(shè)計(jì)師會(huì)試圖避免各種各樣的分散因素，并且提供一個(gè)清晰明確、簡(jiǎn)單的web表單。這就是為什么任何視覺(jué)效果都需要非常適當(dāng)?shù)厥褂玫脑�因。運(yùn)用視覺(jué)手段去解決會(huì)出現(xiàn)這樣的錯(cuò)誤，減少用戶(hù)的誤解。當(dāng)遇到用戶(hù)提交數(shù)據(jù)有錯(cuò)誤信息時(shí)腫么辦？首先要讓用戶(hù)知道發(fā)生了錯(cuò)誤，錯(cuò)在哪，以及如何糾正。

圖7

圖8

圖7郵箱注冊(cè)表單頁(yè)，當(dāng)用戶(hù)提交錯(cuò)誤信息或發(fā)生錯(cuò)誤操作時(shí)，在其錯(cuò)誤旁都會(huì)有醒目的紅色視覺(jué)元素作為指導(dǎo)，很好的解決用戶(hù)找不到錯(cuò)誤在哪的窘態(tài)（關(guān)于提示錯(cuò)誤的元素符號(hào)，在處理這塊時(shí)可能還要考慮到色盲色弱用戶(hù)群的一個(gè)需求，他們是看不出這種強(qiáng)烈的顏色提示的，但是有感嘆號(hào)這樣的提醒元素存在我想也能解決這種雙向需求） 。當(dāng)出現(xiàn)注冊(cè)用戶(hù)名相同時(shí)，這里用下拉框的樣式提示，該地址都是以什么樣的結(jié)構(gòu)形式被人注冊(cè)過(guò)，給用戶(hù)提供想命名同樣前置的用戶(hù)名時(shí)后綴如何添加的一些建議性幫助，以及圖8填寫(xiě)正確后給予的文字圖標(biāo)反饋。

圖9

圖10

圖9和10的注冊(cè)表單的兩個(gè)錯(cuò)誤提示樣式，當(dāng)輸入成功提示會(huì)消失，輸入錯(cuò)誤或者輸入不符合標(biāo)準(zhǔn)都會(huì)有相應(yīng)的不同文字反饋，告知用戶(hù)發(fā)生錯(cuò)誤的原因，及時(shí)回車(chē)修改，避免用戶(hù)在填完所有的信息后再反饋給用戶(hù)。

標(biāo)簽： 表單設(shè)計(jì) 交互設(shè)計(jì) 表單填寫(xiě)反饋 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。