筆者針對(duì)不同類型的表單做了可用性測(cè)試與分析后，得到了有助于用戶高效使用的表單設(shè)計(jì)要點(diǎn)，希望內(nèi)容對(duì)你有所啟發(fā)。

我們一直想研究表單中標(biāo)簽如何放置才能讓用戶帶來好的體驗(yàn)，所以我們借助眼動(dòng)儀對(duì)不同種類的表單進(jìn)行了可用性測(cè)試與分析，期間我們發(fā)現(xiàn)了很多有趣的數(shù)據(jù)，以下是我們對(duì)數(shù)據(jù)的詳細(xì)分析。

在大家詳細(xì)閱讀前，我們先說明下此次測(cè)試搭建的環(huán)境是一個(gè)有別于真實(shí)情況的、臨時(shí)的，因?yàn)槲覀冃枰_的測(cè)試視覺跳動(dòng)的過程、跳動(dòng)的次數(shù)，我們需要消除測(cè)試中其他的干擾因子，用戶純粹聚焦在表單的填寫上。

盧克在我們測(cè)試準(zhǔn)備前和分析數(shù)據(jù)的時(shí)候都給了又價(jià)值的見解和反饋，我們將他的一些理論納入了可用性測(cè)試中，并通過數(shù)值數(shù)據(jù)來豐滿和舉證。

在構(gòu)建我們要測(cè)試的表單的過程中，我們尊重盧克的兩點(diǎn)建議，首先是考慮標(biāo)簽位置和格式設(shè)置之間的關(guān)系，其次是表單填寫內(nèi)容熟悉數(shù)據(jù)與陌生數(shù)據(jù)之間的關(guān)系。

因此，您將在我們測(cè)試的每個(gè)頁面上找到兩種類型的數(shù)據(jù)。為了添加一些真實(shí)的情況，我們將用戶熟知的數(shù)據(jù)輸入字段與其他難的表單元素（如下拉列表框）配對(duì)。這樣做也有助于我們確認(rèn)我們以前對(duì)表格的發(fā)現(xiàn)。

我們的測(cè)試對(duì)象既包括專家用戶（主要是設(shè)計(jì)師和程序員），也包括一些可用性專家和新手用戶。我們要求用戶填寫我們提交給他們的所有表格。一旦用戶點(diǎn)擊提交按鈕，我們的凝視路徑記錄就完成了。

測(cè)試1：標(biāo)簽在輸入框左邊，標(biāo)簽左對(duì)齊

這個(gè)是我們測(cè)試的第一個(gè)案例，是我們?cè)谌粘Ｉ钪谐Ｒ姷氖褂帽韱?。毫無疑問，我們的兩類用戶在填寫的過程中，對(duì)于標(biāo)簽和輸入框的關(guān)聯(lián)性的識(shí)別做的非常好。我們發(fā)現(xiàn)所有的用戶在每個(gè)標(biāo)簽和輸入框中都有一個(gè)單一的視覺跳動(dòng)，這說明用戶還是很容易感知前后的聯(lián)系。同時(shí)我們也發(fā)現(xiàn)，典型的中等視覺跳動(dòng)的持續(xù)時(shí)長是500毫秒，這個(gè)數(shù)值相對(duì)于其他情況長很多，這表明用戶有較強(qiáng)的認(rèn)知負(fù)荷。

標(biāo)簽及其輸入框之間的空白在視覺上很好地引導(dǎo)用戶，讓用戶順勢(shì)去查看輸入框。但同時(shí)也有一個(gè)問題，標(biāo)簽和輸入框之間的留白是不固定，一些標(biāo)簽和它們的輸入字段之間的距離過大，迫使用戶花費(fèi)更多的時(shí)間與表單進(jìn)行可視化交互。

因?yàn)槲覀冊(cè)诒韱沃屑恿艘粋€(gè)下拉列表框，所以我們也有機(jī)會(huì)確認(rèn)我們之前關(guān)于它的發(fā)現(xiàn)：它們是最引人注目的表單元素。當(dāng)面對(duì)一個(gè)白色頁面上的簡單表單時(shí)，所有用戶第一眼都會(huì)固定在下拉列表框上。這個(gè)表單元素清楚地傳達(dá)了它的含義以及用戶該如何與之交互，在用戶的大腦中賦予它更高的重要性。

此外，在我們的第一個(gè)測(cè)試表單中，在下拉列表中選擇的項(xiàng)目僅顯示一個(gè)數(shù)字，沒有重復(fù)標(biāo)簽傳達(dá)的含義。我們發(fā)現(xiàn)，大多數(shù)測(cè)試對(duì)象，包括專家用戶，都被迫重新檢查標(biāo)簽，以提醒自己下拉列表中包含的數(shù)字的含義。

測(cè)試2：標(biāo)簽在輸入框左邊，標(biāo)簽右對(duì)齊

測(cè)試2比起測(cè)試1，標(biāo)簽在輸入框左側(cè)的情況與前面的測(cè)試完全相同，但標(biāo)簽的右對(duì)齊將視覺停駐點(diǎn)的總數(shù)量減少了近一半，表明這種布局大大減少了用戶完成任務(wù)所需的認(rèn)知負(fù)荷。此外，表格填寫時(shí)長也減少了近一半。

標(biāo)簽和它們對(duì)應(yīng)的輸入框之間幾乎沒有視覺跳動(dòng)，這表明用戶很快理解了輸入字段的含義，同時(shí)也是因?yàn)檠劬υ诙叹嗟膫?cè)眼移動(dòng)上比較擅長。

雖然我們使用左對(duì)齊標(biāo)簽耗費(fèi)了500毫秒用做掃視，但在右對(duì)齊標(biāo)簽上專家用戶在標(biāo)簽和輸入框之間的掃視時(shí)間僅為170毫秒，新手用戶也僅僅耗費(fèi)了240毫秒。

我對(duì)這類表單最初擔(dān)心是用戶眼睛在前一個(gè)輸入框與下一個(gè)標(biāo)簽的開頭之間的轉(zhuǎn)換會(huì)比較困難，因?yàn)樗奈恢檬遣豢深A(yù)測(cè)的，呈現(xiàn)了鋸齒狀。但是結(jié)果證明，我的顧慮是多余的。用戶眼睛的斜視眼動(dòng)非?？?，在閱讀第二行的時(shí)候，眼睛不需要調(diào)整焦點(diǎn)和視距。

我們可以看到測(cè)試2與測(cè)試1相比，盡管視覺跳動(dòng)次數(shù)有所下降，但是大多數(shù)用戶（專家和新手）還是需要重新檢查輸入框的相應(yīng)標(biāo)簽。

測(cè)試3：標(biāo)簽在輸入框上方緊貼，標(biāo)簽左對(duì)齊

從測(cè)試2的結(jié)果中，我們知道標(biāo)簽離輸入框越近，用戶眼神從標(biāo)簽移到輸入框的速度就越快。所以，我們看到測(cè)試3結(jié)果中大多數(shù)的視覺停駐點(diǎn)都在輸入框上而不是標(biāo)簽上時(shí)，我們并不感到驚訝。

將一個(gè)標(biāo)簽放在輸入框的上方，用戶一眼就可以捕捉到兩個(gè)元素。所以，當(dāng)需要輸入的熟悉的數(shù)據(jù)時(shí)，例如名字或姓氏，用戶視覺就不需要在標(biāo)簽上停駐。他們能夠在一次聚焦同時(shí)看到標(biāo)簽和輸入框，因此不需要額外的視覺停駐和掃視。

此外，根據(jù)測(cè)試結(jié)果，用戶從標(biāo)簽到輸入框的來回掃視，僅為50ms，相當(dāng)于測(cè)試1的1/10。因此，用戶能夠很快地完成表單填寫，大量的減少了用戶的認(rèn)知負(fù)荷。

在前兩輪的測(cè)試中，下拉列表框被證明是最突出的表單元素，我想檢查它的位置是否會(huì)影響這個(gè)結(jié)果。結(jié)果是，完全沒有影響，它無論在什么位置總會(huì)吸引到用戶的注意。在所有情況下，我們發(fā)現(xiàn)它確實(shí)是最引人注目的元素，甚至比提交按鈕還突出。

我們還發(fā)現(xiàn)，在這種情況下，沒有一個(gè)專家用戶需要重新檢查相應(yīng)的標(biāo)簽，當(dāng)然還是有一些新手用戶需要重新檢查標(biāo)簽。

測(cè)試4：標(biāo)簽在輸入框上方緊貼，標(biāo)簽左對(duì)齊，標(biāo)簽加粗

我們把此次的測(cè)試作為一個(gè)測(cè)試3的子案例，而不是一個(gè)完整的測(cè)試案例，但是我們獲得的結(jié)果的差異，最終使得我們將其視為一個(gè)單獨(dú)的案例。我想起了盧克在他的文章《可見的敘述：理解視覺組織》中所說的話。“在標(biāo)簽在輸入框上方的布局中，建議對(duì)輸入框的標(biāo)簽使用粗體字體，這增加了它們的視覺重量，并將他們帶到布局的前景”。

然而，粗體標(biāo)簽導(dǎo)致從標(biāo)簽到輸入框的掃視時(shí)長從沒有加粗的標(biāo)簽的50ms增加到加粗標(biāo)簽的80ms，時(shí)長幾乎增加了60%，從結(jié)果發(fā)現(xiàn)更突出的標(biāo)簽居然沒有明顯的優(yōu)勢(shì)。粗體標(biāo)簽對(duì)用戶來說更難閱讀和感知，可能是因?yàn)榇煮w文本和輸入框的重邊框之間存在更多的視覺混淆和干擾。

我和盧克一起回顧了這些結(jié)果，我們一致認(rèn)為在我們的測(cè)試頁面上沒有任何視覺設(shè)計(jì)可能對(duì)加粗標(biāo)簽產(chǎn)生影響。正如我在本文開始時(shí)所說的，我們測(cè)試的是時(shí)間或速度方面，需要沒有任何其他視覺干擾，但是加粗標(biāo)簽在結(jié)果上的表現(xiàn)還是相當(dāng)糟糕。

結(jié)論

從我們測(cè)試結(jié)果的分析中，最終我們還是得出了一些有趣的設(shè)計(jì)準(zhǔn)則。將以下設(shè)計(jì)準(zhǔn)則與盧克的表單設(shè)計(jì)原則結(jié)合起來，將幫助您在各種不同的情況下構(gòu)建盡可能好的表單。

1. 標(biāo)簽位置

在大多數(shù)情況下將標(biāo)簽放置在輸入框上方效果更好，因?yàn)橛脩舨槐胤謩e查看標(biāo)簽和輸入框，但是要注意從間距上著手，將下一個(gè)輸入框與上一個(gè)輸入框的標(biāo)簽在視覺上分開。

2. 標(biāo)簽對(duì)齊

在大多數(shù)情況下，當(dāng)將標(biāo)簽放置在輸入框的左側(cè)時(shí)，使用左對(duì)齊標(biāo)簽會(huì)給用戶帶來沉重的認(rèn)知負(fù)擔(dān)。最好在輸入框上方放置標(biāo)簽，但如果選擇將標(biāo)簽放置在輸入字段的左側(cè)，則至少使標(biāo)簽右對(duì)齊。

3. 粗體標(biāo)簽

閱讀粗體標(biāo)簽對(duì)用戶來說有點(diǎn)困難，所以最好使用純文本標(biāo)簽。但是，當(dāng)使用粗體標(biāo)簽時(shí)，希望輸入框的樣式是輕邊框的。

4. 下拉列表框

使用它們時(shí)要小心，因?yàn)樗鼈兎浅Ｎ耍梢詫⑺鼈冇糜谥匾獢?shù)據(jù)的輸入，當(dāng)將它們用于不太重要的數(shù)據(jù)時(shí)，將它們放置在更重要的輸入框的下面。

5. 下拉列表框的標(biāo)簽放置

確保用戶立即知道下拉列表的要求，而不是使用單獨(dú)的標(biāo)簽，將下拉列表框的默認(rèn)值設(shè)置為標(biāo)簽。這將適用于非常長的項(xiàng)目列表，因?yàn)樵谀J(rèn)值消失之前，用戶已經(jīng)記住了它的用途。

原文地址：https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

原文作者：Matteo Penzo

編譯作者：agileyang

本文由 @agileyang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議