進(jìn)行可用性測(cè)試并分析了不同類型的表單后，筆者獲得了表單設(shè)計(jì)的關(guān)鍵點(diǎn)，這些點(diǎn)對(duì)用戶有效使用很有幫助，并希望其內(nèi)容能啟發(fā)您。 通過對(duì)不同類型的表單進(jìn)行可用性測(cè)試和分析后，作者獲得了表單設(shè)計(jì)的關(guān)鍵點(diǎn)，這些點(diǎn)有助于用戶有效使用。 我希望這些內(nèi)容能激發(fā)您的靈感。

我們一直想研究如何在表單中放置標(biāo)簽以使用戶體驗(yàn)更好，因此我們使用眼動(dòng)儀測(cè)試并分析了不同類型表單的可用性，在此期間我們發(fā)現(xiàn)了許多有趣的數(shù)據(jù)。 這是我們對(duì)數(shù)據(jù)的詳細(xì)分析。

在您詳細(xì)閱讀之前，讓我們首先解釋一下測(cè)試環(huán)境不同于實(shí)際情況和暫時(shí)情況，因?yàn)槲覀冃枰�正確測(cè)試視覺跳躍的過程和時(shí)間，我們需要消除測(cè)試中的其他干擾因素， 而用戶純粹專注于填寫表格。 在準(zhǔn)備測(cè)試之前和分析數(shù)據(jù)時(shí)，盧克給出了寶貴的見解和反饋。 我們將他的一些理論納入了可用性測(cè)試，并通過數(shù)值數(shù)據(jù)提供了豐富的證據(jù)。

在構(gòu)建我們要測(cè)試的表單的過程中，我們尊重Luke的兩個(gè)建議。 首先，應(yīng)考慮標(biāo)簽位置與格式設(shè)置之間的關(guān)系，其次，在填寫表單時(shí)，應(yīng)考慮熟悉的數(shù)據(jù)與不熟悉的數(shù)據(jù)之間的關(guān)系。 因此，在我們測(cè)試的每一頁(yè)上都會(huì)發(fā)現(xiàn)兩種類型的數(shù)據(jù)。 為了添加一些實(shí)際情況，我們將用戶熟悉的數(shù)據(jù)輸入字段與其他困難的表單元素配對(duì)（下面的下拉列表框）。 這也將有助于我們確認(rèn)以前在表格上的發(fā)現(xiàn)。

我們的測(cè)試對(duì)象不僅包括專家用戶（主要是設(shè)計(jì)師和程序員），還包括可用性專家和新手用戶。 我們要求用戶填寫我們提交給他們的所有表格。 用戶單擊提交按鈕后，我們的凝視路徑記錄即完成。

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

。 這是我們測(cè)試的第一種情況，是我們?nèi)粘Ｉ�活中的一種常見用法。 毫無(wú)疑問，在填寫過程中，我們的兩種類型的用戶在識(shí)別標(biāo)簽和輸入框的相關(guān)性方面做得非常好。 我們發(fā)現(xiàn)，所有用戶在每個(gè)標(biāo)簽和輸入框中都有一個(gè)視覺跳動(dòng)，這意味著用戶仍然很容易感覺到前后之間的聯(lián)系。 同時(shí)，我們還發(fā)現(xiàn)典型的中等視覺節(jié)拍的持續(xù)時(shí)間為500毫秒，比其他情況長(zhǎng)得多，這表明用戶具有較強(qiáng)的認(rèn)知負(fù)擔(dān)。

標(biāo)簽與其輸入框之間的空白將引導(dǎo)用戶視覺化并允許用戶查看輸入框。 但是同時(shí)，還存在一個(gè)問題：標(biāo)簽和輸入字段之間的間距不固定，并且某些標(biāo)簽與其輸入字段之間的距離太大，這迫使用戶將更多的時(shí)間花費(fèi)在與表單的視覺交互上。

，因?yàn)槲覀冊(cè)诒韱沃刑砑恿艘粋�(gè)下拉列表框，所以我們也有機(jī)會(huì)確認(rèn)我們先前關(guān)于它的發(fā)現(xiàn)：它們是最引人注目的表單元素。 當(dāng)在白紙上遇到一個(gè)簡(jiǎn)單的表單時(shí)，所有用戶乍一看都被固定在下拉列表框中。 該表單元素清楚地傳達(dá)了其含義以及用戶與之交互的方式，從而使其在用戶的大腦中更加重要。 另外，在我們的第一個(gè)測(cè)試表單中，

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

測(cè)試2：標(biāo)簽位于輸入框的左側(cè)，與測(cè)試1相比，標(biāo)簽

test 2的右對(duì)齊與先前的測(cè)試相同，但是標(biāo)簽的右對(duì)齊會(huì)減少總和 視覺停止的數(shù)量幾乎減少了一半，這表明此布局極大地減少了用戶完成任務(wù)所需的認(rèn)知負(fù)荷。 此外，表格的填充時(shí)間也減少了近一半。

標(biāo)簽與其對(duì)應(yīng)的輸入框之間幾乎沒有視覺上的跳躍，這表明用戶可以快速理解輸入字段的含義，而且還因?yàn)檠劬ι瞄L(zhǎng)短距離側(cè)眼移動(dòng)。

雖然掃描左對(duì)齊標(biāo)簽花費(fèi)了我們500毫秒，但是專家用戶在標(biāo)簽和右對(duì)齊標(biāo)簽上的輸入框之間的掃描時(shí)間僅為170毫秒，而新手用戶的掃描時(shí)間僅為240毫秒。 我首先擔(dān)心這種形式的問題是，用戶的眼睛很難在前一個(gè)輸入框的開頭和下一個(gè)標(biāo)簽的開頭之間切換，因?yàn)樗�的位置是不可預(yù)測(cè)的且呈鋸齒形。 但事實(shí)證明，我的擔(dān)心是多余的。 使用者眼睛的斜眼運(yùn)動(dòng)非�？�。 讀取第二行時(shí)，眼睛不需要調(diào)整焦點(diǎn)和視距。

我們可以看到測(cè)試2與測(cè)試1相比，盡管視覺節(jié)拍的數(shù)量有所減少，但大多數(shù)用戶（專家和新手）仍然需要重新檢查輸入框的相應(yīng)標(biāo)簽。

測(cè)試3：標(biāo)簽靠近輸入框的頂部，并且標(biāo)簽與左側(cè)

對(duì)齊。 根據(jù)測(cè)試2的結(jié)果，我們知道標(biāo)簽離輸入框越近，用戶的眼睛從標(biāo)簽移到輸入框的速度就越快。 因此，令我們驚訝的是，測(cè)試3中的大多數(shù)可視停靠點(diǎn)都在輸入框而不是標(biāo)簽上。

在輸入框上方放置一個(gè)標(biāo)簽，用戶可以一眼捕獲兩個(gè)元素。 因此，當(dāng)您需要輸入熟悉的數(shù)據(jù)（例如名字或姓氏）時(shí)，用戶的視覺不需要停留在標(biāo)簽上。 他們可以同時(shí)集中查看標(biāo)簽和輸入框，因此不需要其他視覺停止和掃描。

另外，根據(jù)測(cè)試結(jié)果，用戶從標(biāo)簽到輸入框的來(lái)回掃描只有50ms，相當(dāng)于測(cè)試1的1/10。因此，用戶可以快速填寫表格，大大減少了 用戶的認(rèn)知負(fù)擔(dān)。 在前兩輪測(cè)試中

中，下拉列表框被證明是最突出的表單元素，我想檢查其位置是否會(huì)影響此結(jié)果。 結(jié)果，它根本沒有影響，并且無(wú)論它在哪里，它總是引起用戶的注意。 在所有情況下，我們都發(fā)現(xiàn)它確實(shí)是最引人注目的元素，甚至比“提交”按鈕更為突出。

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

測(cè)試4：標(biāo)簽靠近輸入框的頂部，標(biāo)簽保持對(duì)齊，并且標(biāo)簽為粗體

，我們將此測(cè)試視為測(cè)試3的子案例，而不是完整的測(cè)試案例， 但是最終得到的結(jié)果差異使我們將其視為單獨(dú)的案例。 我想到了盧克在他的文章中所說(shuō)的可見的敘事：理解視覺組織。 “在標(biāo)簽位于輸入框上方的布局中，建議對(duì)輸入框的標(biāo)簽使用粗體，這會(huì)增加其視覺效果，并將其帶到布局的前臺(tái)。” 但是，在

中，加粗標(biāo)簽導(dǎo)致從標(biāo)簽到輸入框的掃描時(shí)間從不加粗標(biāo)簽的50ms增加到加粗標(biāo)簽的80ms，幾乎增加了60％。 發(fā)現(xiàn)更顯著的標(biāo)簽沒有明顯的優(yōu)勢(shì)。 粗體標(biāo)簽對(duì)于用戶來(lái)說(shuō)更難以閱讀和感知，這可能是由于視覺上的混淆以及粗體文本和輸入框的粗邊框之間的干擾。

我和Luke一起回顧了這些結(jié)果，我們同意測(cè)試頁(yè)面上沒有視覺設(shè)計(jì)會(huì)影響粗體標(biāo)簽。 就像我在本文開頭所說(shuō)的那樣，我們正在測(cè)試時(shí)間或速度，這些時(shí)間或速度必須沒有任何其他視覺干擾，但是結(jié)果上粗體標(biāo)簽的性能相當(dāng)差。 從分析我們的測(cè)試結(jié)果來(lái)看，我們最終得出了一些有趣的設(shè)計(jì)準(zhǔn)則。 將以下設(shè)計(jì)準(zhǔn)則與Luke的表單設(shè)計(jì)原則相結(jié)合，將幫助您在各種情況下構(gòu)建最佳的表單。

1。 標(biāo)簽位置

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

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

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

3。 粗體標(biāo)簽

對(duì)于用戶來(lái)說(shuō)，讀取粗體標(biāo)簽有點(diǎn)困難，因此最好使用純文本標(biāo)簽。 但是，在使用粗體標(biāo)簽時(shí)，您希望輸入框的樣式為淺色邊框。

4。 在下拉列表框

中謹(jǐn)慎使用它們，因?yàn)樗鼈兎浅Ｎ�引人�?您可以將它們用于輸入重要數(shù)據(jù)。 當(dāng)您將它們用于次要數(shù)據(jù)時(shí)，請(qǐng)將其放在次要輸入框下。

5。 下拉列表框

的標(biāo)簽放置可確保用戶立即知道下拉列表的要求，而不是使用單獨(dú)的標(biāo)簽，并將下拉列表框的默認(rèn)值設(shè)置為label。 這適用于非常長(zhǎng)的項(xiàng)目列表，因?yàn)橛脩魰?huì)在默認(rèn)值消失之前記住其目的。

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

原作者：Matteo penzo

編譯器作者：agileyang

本文由@發(fā)表 敏捷翻譯，每個(gè)人都是產(chǎn)品經(jīng)理。 未經(jīng)許可，禁止轉(zhuǎn)載。

來(lái)自無(wú)飛濺，基于cc0協(xié)議