表單是網(wǎng)站的重要組成部分。從商業(yè)網(wǎng)站的聯(lián)系到反饋、從注冊到交流、從在線銀行到搜索都能見到表單在發(fā)揮巨大的作用。
什么是我們想要的，我們?yōu)槭裁聪胍@樣
在 cxpartners，我們已經(jīng)為很多不同的公司設(shè)計、測試了很多新的或已有的表單。在用了6年時間完成這些表單設(shè)計任務(wù)后，我們總結(jié)了一組黃金準則。
我們想驗證這些準則，并尋求進一步深入了解表單設(shè)計各個方面。這促使我們進行一個眼動跟蹤研究（eye-tracking study）來了解人們在不同的表單設(shè)計面前是如何反應(yīng)的，諸如：當人們面對一個長長的文本輸入框列表時，他們的眼睛究竟在看哪里。
我們也想找到一些優(yōu)化表單設(shè)計布局的方法，來確保用戶理解哪些表單是他們真正需要填寫的，同時也希望他們在填寫時能夠?qū)Ｗ⒂诒韱巍?/p>
最后，我們想要提供一個配有數(shù)據(jù)支持的設(shè)計指南列表。通過它，我們和其他設(shè)計師能夠設(shè)計出更好的表單。
相關(guān)研究
在Luke Wroblewski的“Web Form Design”，他提到了一些非常有用的表單設(shè)計原則?；谒耐扑]，Matteo Penzo和他的同事已經(jīng)進行了一次特定的眼動跟蹤測試來測量針對不同label布局的眼部掃視活動(saccadic activity)和掃視次數(shù)(saccades times)。他們?yōu)檫@個測試特別設(shè)計并創(chuàng)建了4種類型的表單，每個表單有4個輸入框（input fields）組成。
我們的研究與眾不同之處
表1：研究所選的4個表單
Google Mail注冊表單
Hotmail 注冊表單
Yahoo! Mail注冊表單
eBay 注冊表單
統(tǒng)計關(guān)聯(lián)
值得一提的是，此研究的主要目地是尋找設(shè)計表單實踐中的最佳流行趨勢。在統(tǒng)計上這可能并不一定有充分的根據(jù)。然而，我們已經(jīng)測試了那些熟悉這些在線表單的目標用戶，已經(jīng)在測試中使用那些在實際正被使用的表單形式，已經(jīng)提供給用戶一個良好的測試環(huán)境并鼓勵他們像在家中一樣操作這些表單。這些研究發(fā)現(xiàn)將是進一步研究的基礎(chǔ)。
我們是怎么做的
我們在位于布里斯托爾的辦公室測試了8個參與者（6女2男）。這些參與者平均年齡27歲，年齡范圍在22至33歲之間。所有的參與者有在日常生活中使用在線購物或Web郵件的經(jīng)歷，所以他們很熟悉Web表單。
每個參與者隨機的選中2個表單，表單的出現(xiàn)順序在所有的參與者間進行了平衡。參與者被要求填寫這些表單，假設(shè)他們正在家中注冊使用這些Web郵件服務(wù)。
在這個研究中，我們不僅參與者對于填寫表單的評論，而且觀察他們的動作和分析他們的眼部活動。通過匯總所有的數(shù)據(jù)，我們能夠洞察用戶在填寫表單時的一些行為，并優(yōu)化表單的設(shè)計和提出創(chuàng)建表單時應(yīng)注意的事項。
我們發(fā)現(xiàn)了什么：
原則1：要垂直而不是水平
用戶從上往下的填寫表單。因此簡單的垂直布局的表單通效果常好于多欄的布局。
所有的被測表單雖然標簽的對齊方式不同，但都是垂直的布局。在和左右標簽對齊對比后，我們發(fā)現(xiàn)垂直頂部對齊效果更好（ eBay的那個）。參與者發(fā)現(xiàn)相對于左右掃視，這種形式更容易在一列中向下進行掃視。
“隨著我的眼睛向下掃視發(fā)現(xiàn)下一個輸入框，這很容易”
小貼士：在所有的地方都使用簡單的垂直布局和頂部標簽對齊。
原則2：標簽左對齊更清晰
有時候由于一些限制（如能垂直的使用空間有限），不可能使用垂直布局的標簽，水平對齊布局也是可選的方案之一。
Yahoo和Hotmail都采用標簽右對齊的方式，而Google Mail采用左對齊的方式。參與者的眼動跟蹤測試表明，并沒有明顯的結(jié)論能證明標簽左對齊和右對齊哪個更好。然而，標簽左對齊通常被認為傳達信息更清晰。
雖然標簽左對齊被認為將使造成表單填寫最慢，那是因為需要更多的眼部注視和更長距離的視線移動。但這對于表單設(shè)計的目的而言并不總是一件壞事。標簽左對齊的表單通常有更整齊、更清晰的布局，它們能使用戶快速的掃視每個標簽，這增加了標簽的可讀性。
在他們的測試中，Penzo總結(jié)說：“粗體標簽應(yīng)該被盡可能的禁止，因為他們更不易閱讀?！比欢?，這個結(jié)論與我們看到的事實相矛盾。我們的發(fā)現(xiàn)這也符合Luke所贊同的，即“粗體更能讓標簽在前景中突顯出來”。我們的參與者也覺得使用粗體標簽將使填寫變得更容易。
“Google mail更容易閱讀，因為它是粗體的”
小貼士：如果垂直對齊標簽不可行，那么使用粗體標簽并左對齊。
原則3：什么時候打破“只用一欄”的定律
有一些可以預(yù)期案例表明，有些情況下“只用一欄”的定律是可以打破的。用戶期望看到姓名（姓/名）、日期（年/月/日）和時間（小時/分鐘）被寫在一行里。雖然如此，但如果要將多過一個的控件放在一行內(nèi)的話，需要設(shè)計師非常小心。
Yahoo和eBay的表單都有姓和名在同一行。許多參與者認為這樣很笨拙，需要從左到右的填寫兩個部分，然后繼續(xù)在垂直方向上繼續(xù)填寫。
然而，參與者并沒有對Yahoo發(fā)表同樣的評論。正如在圖1所示，eBay的表單在“姓”的部分相比Yahoo的有更多的注視點和更長的注視時間。我們猜測可能有以下兩個原因：
圖1：注視點圖（30-40秒）表明eBay表單的“姓”部分相對Yahoo有更長的注視持續(xù)時間
另外有趣的一點是，Yahoo非常明智的將次要的標簽文字直接包含在文本框中：First Name和Surname，這里使用淡灰色的字體，一旦用戶開始輸入這些字體將自動消失（圖2）.我們喜歡這個方法，它沒有額外的視線移動，用戶也不可能錯過閱讀標簽。一個需要謹記在心的問題是確保你的實現(xiàn)代碼能支持這樣的效果。
小貼士：當超過一個輸入框在一行時，確保他們被設(shè)計成像一個完整的整體（如：共享同一個標簽或把它們放的近一點）。
圖2：Yahoo將次要的標簽內(nèi)置于輸入框中，當開始輸入時就消失
原則4：當標題分組很重要時，將其設(shè)計成有顏色或有陰影的
我們設(shè)計表單時可將它分割成可管理的幾個部分，并將相關(guān)的控件放在一起，這樣當在填寫表單時就會感覺表單更短。
在測試中，Google mail是唯一一個沒有將表單內(nèi)容進行邏輯分組的，而其他三個都將相關(guān)的控件進行了分組，并給每個分組一個標題。
從眼動跟蹤的結(jié)果來看，參與者并沒有對分組的標題產(chǎn)生額外的注意力消耗（請看圖3的Hotmail注意力熱圖，它展示了參與者在頁面上看或沒看過什么）。有顏色或帶陰影字體（請看圖4 eBay的注意力熱圖）的標題可能更能吸引用戶的注意力。
“陰影字體的標題清晰很多”，“[Yahoo] 的輸入框分組很好，紫色的分組標題很好用，輸入框被很清楚的劃分，一眼就能理解”
圖3：Hotmail的注意力熱圖表明參與者并沒有將注意力集中在分組的標題上。
圖4：eBay的注意力熱圖表明參與者并沒有將注意力集中在分組的標題上。
將相關(guān)的輸入框進行合適的分組時相當有效的。問題就是：是否用戶總是不得不去看分組的標題？這可能取決于標題的目的和它們在表單中的重要程度。我們的建議是如果你想讓用戶去看標題，那就使用帶陰影或有顏色字體的標題。如果標題不重要，那就不用刻意去那么做。我們需要避免用戶在填寫時迷惑到他們。
小貼士：如果想讓用戶看標題，那么就使用帶顏色或陰影的字體強調(diào)它們。
原則5：不要使用*，盡量用清晰的方式表示可選
對于是否要用“*”來表示必填項或使用文字“選填”表示選填項，一直存在著爭論。eBay 和 Hotmail都使用*號來表示必填，而Google mail沒有任何提示，這可能被認為所有的項都是必填的。Yahoo是唯一一個使用斜體字表示選填的，如“可選e-mail”。
沒有用戶認識到Y(jié)ahoo的可選項說明，因為他們不認為斜體字代表了可選的含義。數(shù)據(jù)也同樣表明，沒有參與者注意到*號和在頁面頂部關(guān)于*號的說明（見圖5，顯示了那里沒有注意力涉及到）。參與者想要完成表單，他們中的一些提到：當他們不想提供特殊信息或他們認為這個問題沒必要時才會注意到*號或其他表示選填的標志。
“我不會考慮它們（*號好選填標識），除非我認為這個問題完全沒有必要”
圖5：Hotmail的注意力熱圖表示參與者沒有注意到*號（表示必填）
當人們看到一張表單時，他們總有填滿他們的欲望。如果有可能，只問用戶那些最重要的信息。如果出于市場調(diào)查或其他一些理由需要放一些選填內(nèi)容，我們建議清晰地標注這些問題，而不是把必填內(nèi)容標注出來。
從我們之前一個針對數(shù)百用戶的觀察測試中，我們發(fā)現(xiàn)不是所有的用戶知道“*”的作用。因此，我們建議將文字“選填”以淡灰色的格式顯示在輸入框的內(nèi)部，就像圖6所示的那樣。在這個例子中，這樣用戶就不可能錯過它，且沒有額外的眼部移動來發(fā)現(xiàn)它。我已經(jīng)用此設(shè)計對用戶進行了測試。
小貼士：只給出必須要的信息。如果可選項必須有，使他們更易于辨識而不要用*號來強調(diào)必填。
圖6：將術(shù)語“選填”內(nèi)置在輸入框內(nèi)，表示這是選填項
原則6：對數(shù)字和郵編使用單一輸入框
我們已經(jīng)進行了多年的用戶體驗測試。在此期間，我們經(jīng)?？梢钥吹接脩魧τ谌绾翁顚憯?shù)字（郵編和電話號碼）很迷惑。
eBay對于電話號碼的輸入用了兩個輸入框，包括一個電話的國際代號輸入框。雖然有一個在輸入框的下方有一個輸入的示例，但對于需要如何輸入一個移動電話號碼仍不是很清晰。就像圖7所示的eBay注意力熱圖所示，紅色的點（熱點）表示用戶在電話號碼輸入框上耗費了最多的注意力。
“你是怎么輸入一個手機號碼的？”“體驗不是相當友好”
圖7：eBay的注意力熱點圖表示用戶在電話號碼輸入框上耗費了最多的注意力
有一些方式可以避免這個問題。其中之一就是將問題簡單話。單個輸入框通常相比兩個或多個輸入框更有效率。同樣重要的一點是需要有一個良好的校驗系統(tǒng)，它能判斷是否用戶的輸入是有效的。用戶經(jīng)常不確定是否應(yīng)該在郵編中包含一個空格。一個好的設(shè)計應(yīng)該能有一定的容錯性（有沒有空格都可以接受）。如果不是這樣，一個簡單、清晰的錯誤提示是必須顯示的。
電話號碼是一個有技巧的設(shè)計。國際代號可以以“00”或“+”開頭。什么樣的格式能被系統(tǒng)接受應(yīng)該被清楚的表明。此外，個人可能會以不同的方式記憶他們的電話號碼。如，一個英國的手機號碼是，07812345678，某人可能以3-4-4的格式記憶（078 1234 5678）或5-3-3的格式記憶（07812 345 678）。如果能接受所有類型的輸入，那將是最完美的。
小貼士：對數(shù)字和郵編使用單一輸入框，允許多種格式的輸入。如果不行，使用一個良好的校驗系統(tǒng)并提供清晰的錯誤提示。
原則7：避免多任務(wù)。如果必須有，確保最重要的消息突出
當用戶正在填寫一個表單時，他們總是像完成任務(wù)，期望能快速結(jié)束并轉(zhuǎn)移到主要的任務(wù)上，諸如購買或注冊一個服務(wù)。如果添加任何非重要的信息需要他們來閱讀，就會使注冊過程變長。這是需要被避免的。
然后，如果有一條重要的消息需要用戶了解，它應(yīng)該被高亮顯示并出現(xiàn)，確保用戶不會忽略它。
如圖8a所示的，參與者計劃沒有看到Hotmail頁面頂部的信息提示。他們完全忽略了此部分，直接進入了表單的下一部分。相反，在eBay 的頁面上，參與者不僅閱讀了在表單上部的提示信息，而且也閱讀了右欄的提示信息（見圖8b）。這些信息都做了高亮處理并被內(nèi)置或平行于表單，因此都獲得了用戶的關(guān)注。
小貼士：讓用戶專注于他們的任務(wù)，避免對他們的干擾。如果一個提示很重要并且需要用戶關(guān)注，確保他們足夠突出到能吸引用戶的注意力。
圖8：（a）Hotmail的注意力熱圖（b）eBay的熱圖展示了高亮和內(nèi)置（平行）于表單的提示有可能被用戶閱讀
原則8：請注意引入實時反饋
每當用戶完成表單輸入的某一項后，Yahoo通過在輸入框后顯示一個小標記提供了即時反饋。幾秒后，標記會消失（圖9所示）。大多數(shù)參與者任務(wù)他們注意到了它們。然而，并有些人覺得動態(tài)提示會讓他們混淆一些東西。因此，一些人給出了正面的評價，另一些則認為他們是干擾。
“提示小圖標很有用，它能有效幫助我確認輸入的內(nèi)容”
即時反饋對于那些需要即時呈現(xiàn)和立即注意的信息很有用。
小貼士：用合適的方式小心地使用即時反饋
圖9：Yahoo的截圖，在輸入框的尾部提供即時反饋（正確或錯誤提示）
原則9：將備注放在相關(guān)的輸入框旁
eBay 和 Googlemail在每個輸入框旁都有備注，Yahoo則在輸入框尾部有即時動態(tài)提示。Hotmail，從另一個角度來講，在每個輸入框下方有（動態(tài)）的描述。
總體來說，相對在輸入框下方參與者更喜歡在輸入框尾部看到描述信息。
“我更愿意它們在尾部，這能讓我看到它們”
如果在輸入框底部都使用黑色字體的描述，將容易使頁面變得雜亂，就像Googlemail的頁面那樣。
“那看上去像一大堆的文字，非常凌亂”
Yahoo和Hotmail都將描述放在輸入框尾部。但有趣的是參與者更多的閱讀了Hotmail的描述而不是Yahoo的（如圖10中兩者的對比）。Hotmail有一個整齊的布局，所有的輸入框都保持相同的尺寸和相同的水平和垂直對齊方式。相反的是，Yahoo將不同尺寸的文字輸入框和下拉列表框混合排列，并且沒有對齊。因此當描述出現(xiàn)在尾部時，用戶容易忽略和錯過它們。
圖10：表明Hotmail用戶相比Yahoo用戶更多地關(guān)注了控件尾部的即時說明
此外，當給每個控件都提供描述時，非常有必要確保它們被放置在正確的位置。如，eBay提供如何選擇一個密碼的描述（要求至少6位數(shù)字或字母）。然而，它們被放置在“重新輸入密碼”框的下方。正確的方式應(yīng)該是在第一次輸入密碼前提示，在“創(chuàng)建密碼”輸入框附近（見圖11）。
小貼士：如果可能，將相關(guān)的描述放在每個控件后，并確保正確的對齊方式
圖11：eBay的如何選擇一個密碼的描述應(yīng)該是在第一次輸入密碼前提示，在“創(chuàng)建密碼”輸入框附近
原則10：如果表單有多頁，告訴用戶進行到哪步了
我們建議使用滾屏的方式顯示表單，而不是創(chuàng)建很多很短的表單頁。雖然所有我們進行眼動跟蹤測試的表單都在一頁之內(nèi)，但參與者仍然希望能知道還剩下幾步，之后會有些什么內(nèi)容。
小貼士：提供給用戶一個進度顯示器來展示完成一個注冊或支付需要完成哪些步驟
其他原則
在以上內(nèi)容外我們還有其他一些原則：
總結(jié)
當用戶在填寫表單時，他們不喜歡被顯著地干擾。他們希望盡可能快的完成任務(wù)。因此十分有必要將表單設(shè)計得清晰和整齊。用戶樂意完成一個容易理解、簡潔利索，但有一點長的表單。相反，他們不歡迎被視覺分割且復(fù)雜的表單。
