毫無疑問纠俭，所有的人都討厭填寫表單，不信你可以問一下你身邊的人對于填寫表單的態(tài)度浪慌。
最常見的表單是登陸和注冊冤荆，號稱左右門神，是迎接新用戶的第一道門檻权纤。這里有一個(gè)案例：修改登陸注冊表單后為網(wǎng)站年收入增加三億美元钓简，你就可以看出兩個(gè)小小的表單意味著什么乌妒。
表單使人痛苦是一個(gè)不能改變的事實(shí)，所以我們來談怎樣減少用戶填寫表單的痛苦外邓，而不是消除撤蚊。
我會用不止一篇文章來談這個(gè)問題，在開始之前损话，你還需要明白兩個(gè)事實(shí)
1. 有關(guān)用戶體驗(yàn)的問題侦啸，所有不考慮實(shí)際情況就對號入座的行為都是耍流氓。
2. 這是一個(gè)永無止境的話題丧枪，因?yàn)橐子眯院腿诵曰怯罒o止境的光涂。
啰嗦完畢，開始正文：
我認(rèn)為在論述“怎樣”這類問題時(shí)拧烦，實(shí)踐和數(shù)據(jù)是最有說服力的忘闻，但我們不可能總是擁有數(shù)據(jù)和實(shí)踐的條件，所以靠個(gè)人經(jīng)驗(yàn)和推理能力也是不錯(cuò)第二選擇恋博，但就難免要落下點(diǎn)意淫和忽悠的嫌疑了齐佳。
今天這幾個(gè)結(jié)論全是純實(shí)踐+數(shù)據(jù)的科學(xué)論證，來自馬泰奧·彭佐發(fā)表在UXmatters網(wǎng)站上的文章：Label Placement in Forms交播，這篇文章發(fā)表于2006年7月重虑，但至今仍位于UXmatters文章排行榜的第一名。
這篇文章里秦士，佐哥研究了人們在看一個(gè)簡單的表單時(shí)缺厉，眼球移動的情況，學(xué)名叫眼動追蹤隧土。通過擺弄表單中標(biāo)簽和輸入框之間的位置關(guān)系提针，他做了這么幾個(gè)實(shí)驗(yàn)：
實(shí)驗(yàn)一：Label 標(biāo)簽左對齊，并位于輸入框的左側(cè)
這是當(dāng)時(shí)網(wǎng)頁中最流行的表單布局辐脖。測試結(jié)果發(fā)現(xiàn)，所有測試用戶在標(biāo)簽和輸入框之間都會有一個(gè)明顯的眼球跳動皆愉，學(xué)名叫眼跳（下圖中的藍(lán)線）嗜价。這意味著用戶簡單的感知到了它們之間的聯(lián)系。然而幕庐，實(shí)驗(yàn)中一個(gè)眼跳的平均延遲時(shí)間是500毫秒久锥，有點(diǎn)長，這表明用戶正在經(jīng)歷著一個(gè)較沉重的認(rèn)知負(fù)擔(dān)异剥。
標(biāo)簽和輸入框之間的空白貌似很好地引導(dǎo)用戶的視線移向輸入框瑟由。但事實(shí)上，在這段空白上沒有視點(diǎn)（下圖中的藍(lán)圓）冤寿，標(biāo)簽和輸入框之間過多的距離將迫使用戶花費(fèi)更多的時(shí)間檢查兩者的對應(yīng)關(guān)系歹苦。下圖展示了這項(xiàng)測試的眼動追蹤數(shù)據(jù)青伤。
另外，你可以看到表單中包含了一個(gè)下拉菜單：Number of colleagues殴瘦，佐哥關(guān)于它的發(fā)現(xiàn)是：下拉菜單是最搶眼（eye-catching）的表單元素狠角。當(dāng)面對一個(gè)簡單的表單時(shí)，所有用戶的第一個(gè)視點(diǎn)都落在下拉菜單上痴施。這個(gè)表單元素清晰的傳達(dá)了用戶應(yīng)該如何與它交互擎厢，用戶在大腦里賦予了它更高的重要性。而且辣吃，在這個(gè)實(shí)驗(yàn)表單中动遭，下拉菜單的選項(xiàng)僅僅是一些數(shù)字。在大多數(shù)的實(shí)驗(yàn)里神得，包括專家用戶厘惦，都會通過不斷重復(fù)檢查標(biāo)簽來提醒自己下拉菜單列表中數(shù)字的值。
實(shí)驗(yàn)二：標(biāo)簽右對齊哩簿，位于輸入框左側(cè)
與上一實(shí)驗(yàn)相同的是，標(biāo)簽同樣位于輸入框的左側(cè)节榜，只改變了對齊方式羡玛。實(shí)驗(yàn)結(jié)果發(fā)現(xiàn)：標(biāo)簽右對齊，用戶的視點(diǎn)減少了幾乎一半宗苍，表單的完成時(shí)間也幾乎減少了一半稼稿。說明這種布局極大的減少了用戶填寫表單需要的認(rèn)知負(fù)擔(dān)。
實(shí)驗(yàn)中標(biāo)簽和對應(yīng)的輸入框之間幾乎沒有眼跳活動讳窟，一是因?yàn)橛脩舴浅让歼？斓睦斫饬溯斎肟虻暮x，二是因?yàn)檠鄄繖M向移動的距離大大縮短了丽啡。
標(biāo)簽左對齊時(shí)谋右，用戶平均需要500毫秒的眼跳時(shí)間，標(biāo)簽右對齊時(shí)补箍，對于專家用戶改执，在輸入框和對應(yīng)標(biāo)簽之間的眼跳時(shí)間僅僅只有170毫秒，對于初學(xué)者用戶僅有240毫秒坑雅。
佐哥開始認(rèn)為辈挂，這種特殊的表單設(shè)計(jì)將不利于用戶的眼睛由輸入框移動到下一個(gè)標(biāo)簽的起始，因?yàn)闃?biāo)簽的起始位置是不可預(yù)測的霞丧。結(jié)果呢岗，他發(fā)現(xiàn)自己錯(cuò)了冕香，用戶的眼睛進(jìn)行斜線移動是非秤汲ⅲ快的后豫，而且他們不需要定位到標(biāo)簽的起始位置，眼動數(shù)據(jù)如下圖2
在實(shí)驗(yàn)中突那，大多數(shù)用戶挫酿，包括專家和小白用戶，依然需要檢查輸入框和標(biāo)簽之間的對應(yīng)關(guān)系愕难，雖然相對簡短的眼跳使這項(xiàng)任務(wù)比之更簡單早龟。
實(shí)驗(yàn)三：標(biāo)簽左對齊，位于輸入框上方
從第二個(gè)實(shí)驗(yàn)的結(jié)果猫缭，我們知道標(biāo)簽距離輸入框越近葱弟，用戶的眼睛就可以從標(biāo)簽更快地移動到輸入框。因此猜丹，當(dāng)佐哥在實(shí)驗(yàn)三中發(fā)現(xiàn)用戶大多數(shù)的視點(diǎn)位于輸入框上而不是標(biāo)簽上時(shí)（如實(shí)驗(yàn)三的眼動數(shù)據(jù)）芝加，佐哥一點(diǎn)也不驚訝。
將標(biāo)簽置于輸入框的上方射窒，這使得用戶的眼睛移動一次藏杖，就可以捕獲兩個(gè)表單元素。而且脉顿，如果一個(gè)標(biāo)簽是用戶非常熟悉的數(shù)據(jù)蝌麸，例如他們的姓名，那么用戶將不需要在標(biāo)簽上固定視點(diǎn)閱讀標(biāo)簽艾疟。因此来吩，消除了額外的視點(diǎn)和眼跳。
注意：可以看看這篇文章“Introduction to Eyetracking”汉柒，一段關(guān)于人類眼部是如何工作的簡短介紹
測量了在這個(gè)實(shí)驗(yàn)中用戶從標(biāo)簽移動到輸入框的眼跳時(shí)間：僅需50毫秒误褪。想想那個(gè)標(biāo)簽左對齊的實(shí)驗(yàn)，眼跳時(shí)間幾乎是這次的10倍碾褂。因此兽间，用戶可以非常快的完成這樣的表單正塌，減少了認(rèn)知的負(fù)擔(dān)嘀略。
前兩個(gè)實(shí)驗(yàn)證明，下拉菜單是最搶眼的表單元素乓诽。而在實(shí)驗(yàn)三中帜羊，佐哥調(diào)整了下拉菜單的位置。結(jié)果發(fā)現(xiàn)鸠天，它還是一樣的吸引用戶的注意讼育，與位置沒有關(guān)系。事實(shí)上，綜合所有的實(shí)驗(yàn)奶段，佐哥發(fā)現(xiàn)它是最搶眼的表單元素饥瓷，甚至比提交（submit）按鈕更吸引人們的注意力。
還有痹籍，在這個(gè)實(shí)驗(yàn)中呢铆，沒有專家用戶需要檢查標(biāo)簽和輸入框之間的聯(lián)系，雖然一些小白用戶仍然需要蹲缠。
實(shí)驗(yàn)四：標(biāo)簽加粗棺克，位于輸入框上方
佐哥說，這本來不是一個(gè)專門的實(shí)驗(yàn)线定，但由于實(shí)驗(yàn)結(jié)果與預(yù)期大為不同娜谊，使他將這個(gè)實(shí)驗(yàn)獨(dú)立出來。Luke Wroblewski?在實(shí)驗(yàn)前預(yù)測：“在這個(gè)布局中（標(biāo)簽位于輸入框的上方）斤讥，建議對標(biāo)簽使用加粗的字體因俐。這將會增加它們在視覺上的權(quán)重，并且將它們突出在界面的更前方周偎∧ㄊ＃”
然而實(shí)驗(yàn)結(jié)果發(fā)現(xiàn)：加粗的標(biāo)簽導(dǎo)致用戶在標(biāo)簽和輸入框之間增加了大約60%的眼跳時(shí)間。從50毫秒增加到80毫秒蓉坎，更顯眼的標(biāo)簽沒有什么明顯的好處澳眷，加粗的標(biāo)簽使用戶更難以閱讀和感知。也可能因?yàn)榇煮w和輸入框的深色邊框距離較近蛉艾，使用戶產(chǎn)生了更多的迷惑钳踊。
結(jié)論
1. 標(biāo)簽位置：將標(biāo)簽置于輸入框上方最有效勿侯。這樣用戶不需要分開閱讀標(biāo)簽和輸入框拓瞪，但要注意在視覺上分離輸入框和下一個(gè)標(biāo)簽。
2.標(biāo)簽的對齊：當(dāng)標(biāo)簽位于輸入框的左側(cè)時(shí)助琐，盡量讓它們右對齊祭埂。使用標(biāo)簽左對齊，將會使用戶承擔(dān)沉重的認(rèn)知負(fù)擔(dān)兵钮。
3. 粗標(biāo)簽：閱讀粗標(biāo)簽對用戶有一點(diǎn)困難蛆橡，因此最好使用未加粗的標(biāo)簽。如果你選擇使用粗標(biāo)簽掘譬，那么要注意標(biāo)簽與輸入框邊框之間的沖突泰演。
4. 下拉菜單：使用它們需要特別注意，因?yàn)樗鼈兪侨绱说膿屟邸?/b>最好使用在較重要的數(shù)據(jù)上葱轩，或者將它們置于重要輸入框的下方睦焕。
5. 下拉菜單的標(biāo)簽：不對下拉菜單使用任何單獨(dú)的標(biāo)簽藐握，將下拉列表的默認(rèn)值作為其標(biāo)簽。這樣可以確保用戶立刻意識到你在描述什么垃喊。并且很好的適用于較長的菜單列表中趾娃，在默認(rèn)值消失之前，用戶已經(jīng)知道了這個(gè)輸入框的目的缔御。
