筆者針對不同類型的表單做了可用性測試與分析後，得到了有助於用戶高效使用的表單設計要點，希望內容對你有所啟發。

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

在大家詳細閱讀前，我們先說明下此次測試搭建的環境是一個有別於真實情況的、臨時的，因為我們需要正確的測試視覺跳動的過程、跳動的次數，我們需要消除測試中其他的干擾因子，用戶純粹聚焦在表單的填寫上。

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

在構建我們要測試的表單的過程中，我們尊重盧克的兩點建議，首先是考慮標簽位置和格式設置之間的關係，其次是表單填寫內容熟悉數據與陌生數據之間的關係。

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

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

測試1：標簽在輸入框左邊，標簽左對齊

這個是我們測試的第一個案例，是我們在日常生活中常見的使用表單。毫無疑問，我們的兩類用戶在填寫的過程中，對於標簽和輸入框的關聯性的識別做的非常好。我們發現所有的用戶在每個標簽和輸入框中都有一個單一的視覺跳動，這說明用戶還是很容易感知前後的聯繫。同時我們也發現，典型的中等視覺跳動的持續時長是500毫秒，這個數值相對於其他情況長很多，這表明用戶有較強的認知負荷。

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

因為我們在表單中加了一個下拉列表框，所以我們也有機會確認我們之前關於它的發現：它們是最引人註目的表單元素。當面對一個白色頁面上的簡單表單時，所有用戶第一眼都會固定在下拉列表框上。這個表單元素清楚地傳達了它的含義以及用戶該如何與之交互，在用戶的大腦中賦予它更高的重要性。

此外，在我們的第一個測試表單中，在下拉列表中選擇的項目僅顯示一個數字，沒有重覆標簽傳達的含義。我們發現，大多數測試對象，包括專家用戶，都被迫重新檢查標簽，以提醒自己下拉列表中包含的數字的含義。

測試2：標簽在輸入框左邊，標簽右對齊

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

標簽和它們對應的輸入框之間幾乎沒有視覺跳動，這表明用戶很快理解了輸入字段的含義，同時也是因為眼睛在短距的側眼移動上比較擅長。

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

我對這類表單最初擔心是用戶眼睛在前一個輸入框與下一個標簽的開頭之間的轉換會比較困難，因為它的位置是不可預測的，呈現了鋸齒狀。但是結果證明，我的顧慮是多餘的。用戶眼睛的斜視眼動非常快，在閱讀第二行的時候，眼睛不需要調整焦點和視距。

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

測試3：標簽在輸入框上方緊貼，標簽左對齊

從測試2的結果中，我們知道標簽離輸入框越近，用戶眼神從標簽移到輸入框的速度就越快。所以，我們看到測試3結果中大多數的視覺停駐點都在輸入框上而不是標簽上時，我們並不感到驚訝。

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

此外，根據測試結果，用戶從標簽到輸入框的來回掃視，僅為50ms，相當於測試1的1/10。因此，用戶能夠很快地完成表單填寫，大量的減少了用戶的認知負荷。

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

我們還發現，在這種情況下，沒有一個專家用戶需要重新檢查相應的標簽，當然還是有一些新手用戶需要重新檢查標簽。

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

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

然而，粗體標簽導致從標簽到輸入框的掃視時長從沒有加粗的標簽的50ms增加到加粗標簽的80ms，時長幾乎增加了60%，從結果發現更突出的標簽居然沒有明顯的優勢。粗體標簽對用戶來說更難閱讀和感知，可能是因為粗體文本和輸入框的重邊框之間存在更多的視覺混淆和干擾。

我和盧克一起回顧了這些結果，我們一致認為在我們的測試頁面上沒有任何視覺設計可能對加粗標簽產生影響。正如我在本文開始時所說的，我們測試的是時間或速度方面，需要沒有任何其他視覺干擾，但是加粗標簽在結果上的表現還是相當糟糕。

結論

從我們測試結果的分析中，最終我們還是得出了一些有趣的設計準則。將以下設計準則與盧克的表單設計原則結合起來，將幫助您在各種不同的情況下構建盡可能好的表單。

1. 標簽位置

在大多數情況下將標簽放置在輸入框上方效果更好，因為用戶不必分別查看標簽和輸入框，但是要註意從間距上著手，將下一個輸入框與上一個輸入框的標簽在視覺上分開。

2. 標簽對齊

在大多數情況下，當將標簽放置在輸入框的左側時，使用左對齊標簽會給用戶帶來沉重的認知負擔。最好在輸入框上方放置標簽，但如果選擇將標簽放置在輸入字段的左側，則至少使標簽右對齊。

3. 粗體標簽

閱讀粗體標簽對用戶來說有點困難，所以最好使用純文本標簽。但是，當使用粗體標簽時，希望輸入框的樣式是輕邊框的。

4. 下拉列表框

使用它們時要小心，因為它們非常吸引人，可以將它們用於重要數據的輸入，當將它們用於不太重要的數據時，將它們放置在更重要的輸入框的下麵。

5. 下拉列表框的標簽放置

確保用戶立即知道下拉列表的要求，而不是使用單獨的標簽，將下拉列表框的默認值設置為標簽。這將適用於非常長的項目列表，因為在默認值消失之前，用戶已經記住了它的用途。

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

原文作者：Matteo Penzo

編譯作者：agileyang

本文由 @agileyang 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議