毫無疑問，所有的人都討厭填寫表單，不信你可以問一下你身邊的人對于填寫表單的態度。
最常見的表單是登陸和注冊，號稱左右門神，是迎接新用戶的第一道門檻。這里有一個案例：修改登陸注冊表單后為網站年收入增加三億美元，你就可以看出兩個小小的表單意味著什么。
表單使人痛苦是一個不能改變的事實，所以我們來談怎樣減少用戶填寫表單的痛苦，而不是消除。
我會用不止一篇文章來談這個問題，在開始之前，你還需要明白兩個事實
1. 有關用戶體驗的問題，所有不考慮實際情況就對號入座的行為都是耍流氓。
2. 這是一個永無止境的話題，因為易用性和人性化是永無止境的。
啰嗦完畢，開始正文：
我認為在論述“怎樣”這類問題時，實踐和數據是最有說服力的，但我們不可能總是擁有數據和實踐的條件，所以靠個人經驗和推理能力也是不錯第二選擇，但就難免要落下點意淫和忽悠的嫌疑了。
今天這幾個結論全是純實踐+數據的科學論證，來自馬泰奧·彭佐發表在UXmatters網站上的文章：Label Placement in Forms，這篇文章發表于2006年7月，但至今仍位于UXmatters文章排行榜的第一名。
這篇文章里，佐哥研究了人們在看一個簡單的表單時，眼球移動的情況，學名叫眼動追蹤。通過擺弄表單中標簽和輸入框之間的位置關系，他做了這么幾個實驗：
實驗一：Label 標簽左對齊，并位于輸入框的左側
這是當時網頁中最流行的表單布局。測試結果發現，所有測試用戶在標簽和輸入框之間都會有一個明顯的眼球跳動，學名叫眼跳（下圖中的藍線）。這意味著用戶簡單的感知到了它們之間的聯系。然而，實驗中一個眼跳的平均延遲時間是500毫秒，有點長，這表明用戶正在經歷著一個較沉重的認知負擔。
標簽和輸入框之間的空白貌似很好地引導用戶的視線移向輸入框。但事實上，在這段空白上沒有視點（下圖中的藍圓），標簽和輸入框之間過多的距離將迫使用戶花費更多的時間檢查兩者的對應關系。下圖展示了這項測試的眼動追蹤數據。
另外，你可以看到表單中包含了一個下拉菜單：Number of colleagues，佐哥關于它的發現是：下拉菜單是最搶眼（eye-catching）的表單元素。當面對一個簡單的表單時，所有用戶的第一個視點都落在下拉菜單上。這個表單元素清晰的傳達了用戶應該如何與它交互，用戶在大腦里賦予了它更高的重要性。而且，在這個實驗表單中，下拉菜單的選項僅僅是一些數字。在大多數的實驗里，包括專家用戶，都會通過不斷重復檢查標簽來提醒自己下拉菜單列表中數字的值。
實驗二：標簽右對齊，位于輸入框左側
與上一實驗相同的是，標簽同樣位于輸入框的左側，只改變了對齊方式。實驗結果發現：標簽右對齊，用戶的視點減少了幾乎一半，表單的完成時間也幾乎減少了一半。說明這種布局極大的減少了用戶填寫表單需要的認知負擔。
實驗中標簽和對應的輸入框之間幾乎沒有眼跳活動，一是因為用戶非?？斓睦斫饬溯斎肟虻暮x，二是因為眼部橫向移動的距離大大縮短了。
標簽左對齊時，用戶平均需要500毫秒的眼跳時間，標簽右對齊時，對于專家用戶，在輸入框和對應標簽之間的眼跳時間僅僅只有170毫秒，對于初學者用戶僅有240毫秒。
佐哥開始認為，這種特殊的表單設計將不利于用戶的眼睛由輸入框移動到下一個標簽的起始，因為標簽的起始位置是不可預測的。結果，他發現自己錯了，用戶的眼睛進行斜線移動是非?？斓?，而且他們不需要定位到標簽的起始位置，眼動數據如下圖2
在實驗中，大多數用戶，包括專家和小白用戶，依然需要檢查輸入框和標簽之間的對應關系，雖然相對簡短的眼跳使這項任務比之更簡單。
實驗三：標簽左對齊，位于輸入框上方
從第二個實驗的結果，我們知道標簽距離輸入框越近，用戶的眼睛就可以從標簽更快地移動到輸入框。因此，當佐哥在實驗三中發現用戶大多數的視點位于輸入框上而不是標簽上時（如實驗三的眼動數據），佐哥一點也不驚訝。
將標簽置于輸入框的上方，這使得用戶的眼睛移動一次，就可以捕獲兩個表單元素。而且，如果一個標簽是用戶非常熟悉的數據，例如他們的姓名，那么用戶將不需要在標簽上固定視點閱讀標簽。因此，消除了額外的視點和眼跳。
注意：可以看看這篇文章“Introduction to Eyetracking”，一段關于人類眼部是如何工作的簡短介紹
測量了在這個實驗中用戶從標簽移動到輸入框的眼跳時間：僅需50毫秒。想想那個標簽左對齊的實驗，眼跳時間幾乎是這次的10倍。因此，用戶可以非?？斓耐瓿蛇@樣的表單，減少了認知的負擔。
前兩個實驗證明，下拉菜單是最搶眼的表單元素。而在實驗三中，佐哥調整了下拉菜單的位置。結果發現，它還是一樣的吸引用戶的注意，與位置沒有關系。事實上，綜合所有的實驗，佐哥發現它是最搶眼的表單元素，甚至比提交（submit）按鈕更吸引人們的注意力。
還有，在這個實驗中，沒有專家用戶需要檢查標簽和輸入框之間的聯系，雖然一些小白用戶仍然需要。
實驗四：標簽加粗，位于輸入框上方
佐哥說，這本來不是一個專門的實驗，但由于實驗結果與預期大為不同，使他將這個實驗獨立出來。Luke Wroblewski?在實驗前預測：“在這個布局中（標簽位于輸入框的上方），建議對標簽使用加粗的字體。這將會增加它們在視覺上的權重，并且將它們突出在界面的更前方?！?/p>
然而實驗結果發現：加粗的標簽導致用戶在標簽和輸入框之間增加了大約60%的眼跳時間。從50毫秒增加到80毫秒，更顯眼的標簽沒有什么明顯的好處，加粗的標簽使用戶更難以閱讀和感知。也可能因為粗體和輸入框的深色邊框距離較近，使用戶產生了更多的迷惑。
結論
1. 標簽位置：將標簽置于輸入框上方最有效。這樣用戶不需要分開閱讀標簽和輸入框，但要注意在視覺上分離輸入框和下一個標簽。
2.標簽的對齊：當標簽位于輸入框的左側時，盡量讓它們右對齊。使用標簽左對齊，將會使用戶承擔沉重的認知負擔。
3. 粗標簽：閱讀粗標簽對用戶有一點困難，因此最好使用未加粗的標簽。如果你選擇使用粗標簽，那么要注意標簽與輸入框邊框之間的沖突。
4. 下拉菜單：使用它們需要特別注意，因為它們是如此的搶眼。最好使用在較重要的數據上，或者將它們置于重要輸入框的下方。
5. 下拉菜單的標簽：不對下拉菜單使用任何單獨的標簽，將下拉列表的默認值作為其標簽。這樣可以確保用戶立刻意識到你在描述什么。并且很好的適用于較長的菜單列表中，在默認值消失之前，用戶已經知道了這個輸入框的目的。
