2020-11-19 周周
編輯導(dǎo)語:B端產(chǎn)品往往由于業(yè)務(wù)體量龐大,導(dǎo)致信息復(fù)雜,同時對業(yè)務(wù)的性的要求很高;服務(wù)于B端的業(yè)務(wù),不能夠出信息錯誤,填錯一個信息,就會引發(fā)巨大的問題。本文結(jié)合筆者自己的工作經(jīng)驗,總結(jié)了大型B端業(yè)務(wù)中表單的設(shè)計方法,供小伙伴參考。
表單是信息添加、錄入的通用形式;其作為獲取用戶輸入的重要交互方式,也承擔(dān)著將問題和答案進(jìn)行配對的角色。
設(shè)計原則是任何一種解決方案的指路燈,它們體現(xiàn)解決方案應(yīng)包含的基本目標(biāo)。
針對互聯(lián)網(wǎng)表單設(shè)計,我倡導(dǎo)的原則如下:
我們先看看表單的結(jié)構(gòu),表單主要由5部分組成:
標(biāo)簽根據(jù)標(biāo)簽與輸入域的位置關(guān)系,分為:左對齊、右對齊、頂部對齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動標(biāo)簽。
每種標(biāo)簽樣式都有自身的優(yōu)點與局現(xiàn)性,根據(jù)不同的場景選擇適合的標(biāo)簽樣式,能提高用戶閱讀效率,同時還能降低信息填寫時的錯誤率。
1)頂部對齊:根據(jù)Matteo Penzo 發(fā)布的關(guān)于標(biāo)簽放置的文章表明:采用頂部對齊的標(biāo)簽樣式,瀏覽表單所需的時間最短;如果希望用戶能快速掃描填寫表單,頂部對齊的標(biāo)簽是一個不錯的選擇。
頂部對齊的結(jié)構(gòu),使得能放下更長的標(biāo)簽;但對于縱向空間是一個挑戰(zhàn),當(dāng)填寫信息過多時,表單就會很長。
2)左對齊:左對齊標(biāo)簽,文字開頭按閱讀視線對齊,符合人們的閱讀習(xí)慣,是有利于閱讀的。
瀏覽表單所需時間最長,但是緩慢完成率并不總是一件壞事——如果表單要求敏感數(shù)據(jù)(例如提供駕駛證、身份證、銀行卡號等,可以故意減緩用戶的填寫速度,來確保填寫的準(zhǔn)確性)。
左對齊的結(jié)構(gòu)需要更多的橫向空間,因此在移動端的呈現(xiàn)上可以是個問題。
此外,在屏幕空間有限的情況下,也會一定程度上限制了標(biāo)簽和輸入框的長度。
3)右對齊:右對齊使得標(biāo)簽和輸入之間的距離固定,有明確的視覺關(guān)聯(lián)。
對于簡短的表格,右對齊的標(biāo)簽可以有很快的完成時間;但由于標(biāo)簽長短不同,左邊緣參差不齊,整體掃讀表單的時候不容易了解全部信息。
與左對齊類似,在屏幕空間有限的情況下,也會一定程度上限制了標(biāo)簽和輸入框的長度。
4)內(nèi)聯(lián)標(biāo)簽:內(nèi)聯(lián)標(biāo)簽由于它對空間的占比很小,往往運用于移動端的界面設(shè)計中;但如果在交互上處理不好,會有很大的缺陷。
內(nèi)聯(lián)標(biāo)簽是用作提示性文字,來告訴用戶應(yīng)該填寫什么內(nèi)容,但用戶在填寫的適合,它就會消失;因此用戶無法仔細(xì)檢查他們是否寫下了所要求的內(nèi)容,這增加了錯誤的可能性。
另外一個問題是:用戶可能會把占位符文本誤認(rèn)為預(yù)填數(shù)據(jù),因此忽略它(正如尼爾森諾曼集團的眼動追蹤研究所證實的)。
5)圖標(biāo)標(biāo)簽:圖標(biāo)標(biāo)簽是內(nèi)聯(lián)標(biāo)簽的一種演化形式,在一定程度上緩解用戶的困惑和自我懷疑的心理。
但就圖標(biāo)而言,用戶需要時間來反應(yīng)它所代表的意思——若表意性不強或者并不是常見的圖標(biāo)樣式,用戶就要思考和猜測它的含義。
此外,輸入項一多,還得記憶那個圖標(biāo)所對應(yīng)的意思。
6)浮動標(biāo)簽:用戶在輸入時,內(nèi)部標(biāo)題(提示信息)進(jìn)行浮動位移,即節(jié)省了空間,提示性信息依舊在。
但相比其他幾種標(biāo)簽樣式來說,需要一定的開發(fā)成本。
關(guān)于標(biāo)簽樣式的選擇
輸入域是表單的核心主體,包含了文本框、選擇器、開關(guān)、復(fù)選框、單選框、步驟條、滑塊、上傳、標(biāo)簽頁等控件(按類型分)。
選擇適合的控件樣式,能在一定程度上提高表單填寫的效率。
在輸入域中,存在多種控件樣式,那么在設(shè)計產(chǎn)品的過程中,我們該如何選擇,如何取舍呢?
以下是我在日常工作中的一些摸索,也包括借鑒前輩的一些經(jīng)驗。供大家參考。
1)文本框
文本框包含了單行文本框和多行文本框。
針對單行文本框的設(shè)計建議:
a. 選擇適合的大小,它的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負(fù)擔(dān)。
如下圖即一典型案例,一個實際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理的話,容易誤導(dǎo)用戶對所需輸入金額的判斷,造成極大不安全感。
b. 采用字段掩碼,自動匹配特定數(shù)字的輸入格式。
例如:電話、身份證、銀行卡等;按照7加減二法則,根據(jù)用戶的記憶結(jié)構(gòu)來最大化提升閱讀體驗。
c. 彈出鍵盤應(yīng)與需要輸入的文本類型相匹配(移動端)。
d. 涉及到金額輸入時,當(dāng)用戶輸入的金額超過千時,出現(xiàn)最高分位提示,每多輸入一位,最高分位隨之增加。
e. 文字輸入最好有自動補全、自動建議功能,減少不必要的文字輸入,減少出錯。
例如:填寫地址欄通常是表單中最成問題的部分,像地址自動填充(基于用戶的定位和輸入提供準(zhǔn)確的建議)的工具使用戶能以更少打字量完成輸入。
f. 有限制輸入時,給予用戶明確的提示,增加用戶感知,減少出錯率。
知識擴展:什么是7加減二法則?
早在19世紀(jì)中葉,愛爾蘭哲學(xué)家漢米爾頓觀察到,有一個神奇的7±2效應(yīng);意思就是人們的短時記憶的信息量是7個,可能會上下浮動2個。
針對多行文本框的設(shè)計建議:
使用可拉伸的文本框比固定框更好,從使用體驗講,可變化的文本框使頁面整體效果更統(tǒng)一。
固定文的文本框當(dāng)輸入文本超過其設(shè)置的寬度,會出現(xiàn)內(nèi)滾動條,當(dāng)頁面上出現(xiàn)兩個滾動條時(大頁面的滾動條),在使用操作上會帶來一定的混亂。
2)選擇框
包括下拉列表、選框、開關(guān)、日期選擇器等。
對于選擇框有如下幾個建議:
a. 避免設(shè)置默認(rèn)值:除非您認(rèn)為大部分用戶將選擇該值,尤其是必填字段。
為什么?
因為你可能會增加錯誤,用戶會快速掃描表單,所以他們可能會跳過一些已經(jīng)有默認(rèn)值的字段。
但是這個規(guī)則不適用于智能的默認(rèn)值,也就是根據(jù)用戶的信息設(shè)置的默認(rèn)值;因為智能的默認(rèn)值可以使表單更快,更準(zhǔn)確地完成。
例如:根據(jù)定位數(shù)據(jù)預(yù)先選擇用戶所在的國家/地區(qū)。
不過,請謹(jǐn)慎使用。
b. 當(dāng)選項很多時,提供檢索功能。
c. 提示信息要明確,要讓用戶明確自己選擇的是什么。
3)單選框與復(fù)選框
a. 按一定的邏輯進(jìn)行選項排序,例如根據(jù)發(fā)生的可能性、難易程度、風(fēng)險大小來排序。
b. 選項應(yīng)該易于理解,容易區(qū)分。
c. 盡可能提供默認(rèn)選項。
4)關(guān)于控件的選擇
a. 選擇框優(yōu)于輸入框。
任何高密度的操作,都會引起用戶的不適;因此,在輸入項的選擇時,用選擇來代替鍵盤輸入。
相較于輸入框,選擇操作步驟少,相對來說效率較高;同時,用戶用思考輸入值,也不用承擔(dān)輸入錯誤要重新輸入的風(fēng)險。
用戶可以通過選擇項,清晰明確的知道有哪些值可以選擇,對于一些無關(guān)緊要,或者用戶較難理解的輸入項,可以預(yù)制默認(rèn)值,可以照顧到各階段的用戶。
b. 單選框與下拉選擇框。
單選框較為適合選項較少(少于五個),同時選擇項之間較為類似,需要強調(diào)或?qū)Ρ葧r,可以優(yōu)先考慮單選框。
另外,當(dāng)選項能見度和快速響應(yīng)優(yōu)先時,也建議優(yōu)先考慮單選框。
因為相較于下拉選擇,用戶可以通過展示出來的選項,直接選中目標(biāo)選項,提升輸入效率。
下拉選擇框較為適合選項較多(超過五個),有默認(rèn)選項或者選擇項之間有較大差異,同時下拉選擇,最好不要引起隨后輸入項數(shù)量以及頁面的變化;否則下拉選擇的收起以及頁面的變化,易引起用戶不適。
若選項過多,超過二十個,最好引入模糊匹配以及一定排序規(guī)則(首字母排序、數(shù)字排序等),方面用戶提前預(yù)知選項的大致位置,或通過模糊檢索找到相應(yīng)的選項。
5)關(guān)于必填項
大多數(shù)情況下,所有字段都是必填項,只有幾個字段是可選的,一般用“*”標(biāo)記必填字段。
但星號并不適合所有類型的用戶,記得之前客戶問星號是什么意思?
它是頁面中的標(biāo)簽還是描述中的標(biāo)簽;同時,并且紅色會從用戶方面引起負(fù)面關(guān)聯(lián),因為紅色表示錯誤。
為了避免這種誤解,可采用文本框內(nèi)暗提示。
它也是一個比較清晰標(biāo)志必填項的方式,并且還很節(jié)省空間,也能在一定程度上起到視覺降噪的作用。
提示信息可以分為引導(dǎo)性提示(幫助文字、輸入框提示、錯誤提示信息)和反饋性提示兩種。
這里主要想講講錯誤提示的設(shè)計:
1)關(guān)于錯誤提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發(fā)現(xiàn)——在表單頂部顯示所有錯誤信息,會給用戶的記憶造成較高的認(rèn)知符合,會強制用戶回憶每個錯誤輸入框中的錯誤消息。
錯誤信息提示在輸入框行間顯示是減少記憶認(rèn)知負(fù)荷的有效方法。
它可以幫助當(dāng)場識別錯誤而不是靠回憶錯誤,縮短反應(yīng)時間,提高表單填寫效率。
因此,錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。
下面來看一個簡單的例子,如下圖:
當(dāng)我們在錄入客戶信息時,假設(shè)填寫錯誤手機號碼,按照上面的論述,錯誤提示可以最直觀的顯示在這4個位置。
哪一個位置是最佳位置呢?
答案是:右邊。理由如下:
a. 錯誤信息提示右邊,符合人們從左到右的閱讀習(xí)慣;用戶視覺路徑自然流暢,很大程度上減少了用戶的精力和視覺工作。
放在左邊則恰恰相反,同時左邊與用戶期望相違背,因為左側(cè)放置更高優(yōu)先級的元素,是我們的直覺。
但事實上用戶需要專注于糾正他們的輸入,因此輸入框應(yīng)該是更重要的元素。
b. 對于上邊的錯誤信息提示,有著更高的認(rèn)知負(fù)荷。
當(dāng)標(biāo)簽頂部對齊時,錯誤提示和輸入框中的提示這兩個文本靠得很近會產(chǎn)生視覺噪音,用戶注意力被分散,很難專注于其中一個,并且可能混淆它們。
c. 放置下邊的錯誤信息提示,雖然不符合從左到右的閱讀習(xí)慣,但它確與自然的從上倒下的閱讀流程相對應(yīng)。
手機屏幕缺少水平空間,把錯誤信息提示放置在下方是個不錯的選擇。
雖然它可能會增加用戶閱讀文本時的認(rèn)知負(fù)荷(與類比上邊的錯誤信息提示),但可以通過將它們隔開足夠的間隔來防止這種情況。
綜上所述,如果是web端請選擇放置在右邊,如果是移動端則放置在下邊。
當(dāng)然,如果開發(fā)時間有限,都選擇放置下邊也可以,方便適配。
2)幫助信息
有時候需要幫助性信息,來輔助用戶完成表單填寫。
當(dāng)文本簡短的時候,可以直接放在改輸入框的附近。
當(dāng)文案過長的時候,就需要做氣泡框——獲取鼠標(biāo)焦點,則展開信息,失去焦點則消失(在氣泡展開時,切忌勿擋住input輸入框)。
也有些產(chǎn)品是將幫助信息放在頁面頂部,如果是針對全局幫助性信息,則可以采用這種方式。
如果只是針對某個元素提醒,則應(yīng)將兩者放在一起,讓用戶知道當(dāng)前處于什么地方,在針對什么進(jìn)行引導(dǎo)、輔助。
在復(fù)雜業(yè)務(wù)表單設(shè)計中采用單列布局,大家有沒有遇到過類似的問題,例如:
針對這些問題,我們團隊從自身的業(yè)務(wù)出發(fā),對復(fù)雜業(yè)務(wù)表單布局進(jìn)行了相應(yīng)的探索。
首先,我們根據(jù)下圖的規(guī)則對復(fù)雜業(yè)務(wù)的表單布局進(jìn)行多方案的實驗:
方案一:采用4列布局,標(biāo)簽頂對齊。
那為什么標(biāo)簽不采用右對齊呢?
四列布局,頁面已經(jīng)很擁擠,加上標(biāo)簽長度長短不一且最大長度也無法確定(用戶自定義),所以放置采用了標(biāo)簽頂對齊。
總體上來看,縮減的長圖并不理想。
方案二:三列布局,標(biāo)簽右對齊的方式。
由于三列布局,頁面空間較大,嘗試著把標(biāo)簽右對齊,總體上達(dá)到了縮減表單長度的目的。
但字段若出現(xiàn)換行,則頁面信息模塊是混亂的。
根據(jù)CXL研究所的發(fā)現(xiàn):單列表單比多列表單完成得更快一些。在這項研究中,參與測試的人完成單列表單的平均速度比多列表單快15.4秒;多列布局雖然縮減了表單長度,空間利用率也提高了,但整體的填寫效率降低了,這與表單設(shè)計原則相違背。
同時從開發(fā)效率來看,單列成本較低(多列需要做響應(yīng)式);從業(yè)務(wù)承載上看,單列擴展性更強,適合復(fù)雜多樣的業(yè)務(wù)場景(多列適合交單一的場景)。
綜上,最后還是采用單列布局。
面臨的問題該如何解決?
我們團隊重新審視了客戶的這些反饋:空白區(qū)域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。
我們嘗試把這些問題翻譯成:我無法預(yù)知表單的填寫內(nèi)容,我想要是把空白的地方也利用上我是不是就看全了整個表單。
如果是這樣,用戶的本質(zhì)述求就是想要掌控感。
對現(xiàn)有的單列布局做了以下幾個處理:
感謝閱讀!本文給表單設(shè)計提供了一個基本的指南,在具體項目中,你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。
文章來源:人人都是產(chǎn)品經(jīng)理 作者:@Nick
藍(lán)藍(lán)設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.b186.net