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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

從我們測試結(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)簽和輸入框，但是要注意從間距上著手，將下一個輸入框與上一個輸入框的標(biāo)簽在視覺上分開。

2. 標(biāo)簽對齊

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

3. 粗體標(biāo)簽

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

4. 下拉列表框

使用它們時要小心，因?yàn)樗鼈兎浅Ｎ?，可以將它們用于重要?shù)據(jù)的輸入，當(dāng)將它們用于不太重要的數(shù)據(jù)時，將它們放置在更重要的輸入框的下面。

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é)議