雖然表單類型多樣，有不同目的的、收集不同內(nèi)容的、不同尺寸的，但是卻有一些共同的基本的元素可以幫你的用戶快速且順利地填寫它。
【亞馬遜創(chuàng)建賬戶的表單】
- 1. 類別或者條目（Category or Section）：它可以幫助用戶快速理解表單的作用，同時(shí)，當(dāng)你要收集的數(shù)據(jù)多于一個(gè)類別時(shí)，比如：個(gè)人信息、職業(yè)信息、財(cái)務(wù)信息等……對數(shù)據(jù)歸類整理具有很大的幫助作用。
- 2. 標(biāo)簽（Label）：它的作用主要是告訴用戶，在這一欄需要填寫什么。
- 3. 占位符（Placeholder）：對于標(biāo)簽下需要填寫內(nèi)容的額外注釋。
- 4. 出錯(cuò)信息（Error Message）：當(dāng)用戶填寫的信息無法被錄入時(shí)給予反饋。
- 5. 提交操作的主按鈕（Primary CTA button）：放置于表單底部，用戶用來提交填寫好的表單的按鈕。
表單狀態(tài)
基本上來講，
你的表單在用戶使用過程中存在三種狀態(tài)：
- 1. 默認(rèn)狀態(tài)：就是用戶在填寫前表單的狀態(tài)。
- 2. 焦點(diǎn)狀態(tài)：在用戶正在填寫的欄目上做著重提醒，這樣可以幫助用戶聚焦正在填寫的欄目，哪怕他的注意力離開了屏幕一會(huì)兒，回來后也能馬上找到剛剛正在填寫的欄目。
- 3. 反饋狀態(tài)：這種狀態(tài)一般是給用戶一些反饋信息（大多數(shù)是出錯(cuò)信息）。一般情況下，這種狀態(tài)會(huì)出現(xiàn)在用戶移至下一個(gè)填寫區(qū)域的時(shí)候。另外，當(dāng)用戶提交表單時(shí)，如果系統(tǒng)無法馬上驗(yàn)證信息，也會(huì)出現(xiàn)這種狀態(tài)。
【表單的默認(rèn)狀態(tài)，焦點(diǎn)狀態(tài)，反饋狀態(tài)】
好的案例
1.表單要盡量簡單
盡量讓你的表單短且簡單。收集必要的數(shù)據(jù)，避免重復(fù)的輸入。比如，把“再次輸入你的密碼”這一欄去掉，而是在“輸入密碼”區(qū)域增加一個(gè)“密碼可視”的按鈕，讓用戶可以選擇看到自己輸入的密碼內(nèi)容。
【Jumia和亞馬遜不同的用戶密碼驗(yàn)證方式】
2.使用框內(nèi)提醒
向用戶反饋“輸入錯(cuò)誤”提示時(shí)，最好把錯(cuò)誤提醒放在對應(yīng)的輸入框內(nèi)。
【Facebook和亞馬遜不同的“錯(cuò)誤提醒”方式】
3.將相關(guān)信息分組
這一點(diǎn)很重要，把相關(guān)的信息分組，并將這些組按序列排列。這樣可以幫助用戶減少認(rèn)知負(fù)荷，并能更加專注地填寫當(dāng)下的信息。
【hotels.ng結(jié)賬頁面截圖，一個(gè)很好的將信息分組的例子】
4.正確使用標(biāo)簽，并將其左對齊
標(biāo)簽要放在填寫框的上方，最好不要把標(biāo)簽替換掉。如果沒有標(biāo)簽，用戶在提交表單之前很會(huì)反復(fù)確認(rèn)他們填寫的內(nèi)容是否正確，這個(gè)過程會(huì)非常艱難，最直接的結(jié)果是就用戶需要思考很多，導(dǎo)致提交率下降。而使用標(biāo)簽時(shí)，我們習(xí)慣于將標(biāo)簽放在填寫欄的左上方，具體原因可以參看下面這篇論文，里面綜合講述了為什么這種方式對用戶提交信息轉(zhuǎn)化更有效。《Label Placement in Forms》
5.輸入框的大小要與輸入內(nèi)容的長度和尺寸相匹配
簡單來講，要確保輸入框的區(qū)域能夠完美匹配輸入內(nèi)容的長度，比方說輸入地址的區(qū)域長于輸入郵政編碼的長度。
【Flutterwave 登錄表單的填寫區(qū)域長度剛剛好】
【Payporte的登錄表單填寫區(qū)域長度就不太合適了】
6.CTA（提交操作） 按鈕
所有的表單在最后都應(yīng)該有一個(gè)“提交表單“的按鈕，或者一個(gè)“下一步”按鈕。如果一個(gè)頁面里不止一個(gè)按鈕，那么需要把重點(diǎn)放在主要的提交按鈕上，另一個(gè)按鈕需要稍微削弱一些存在感。
【亞馬遜將主要提交按鈕突出得很好】
如果使用彈窗狀態(tài)來收集數(shù)據(jù)，那么次重點(diǎn)按鈕通常是關(guān)閉彈窗的按鈕。我們一般會(huì)在彈窗右上角使用“X”按鈕來關(guān)閉彈窗，而不是專門設(shè)計(jì)一個(gè)“關(guān)閉表單”的按鈕。
【Medium的登錄頁面使用“X”而不是使用一個(gè)“關(guān)閉按鈕” 來關(guān)閉窗口】
7.搜索區(qū)域
不要隱藏你的搜索框，尤其當(dāng)你的網(wǎng)頁的內(nèi)容非常多的時(shí)候，搜索會(huì)是用戶的有限選擇操作。
【亞馬遜的搜索框十分明顯】
另外，當(dāng)一個(gè)用戶提交一個(gè)搜索任務(wù)后，不要清除搜索框的內(nèi)容，這樣方便用戶能很快且清晰地看到自己最初的搜索詞是什么。
【Medium在搜索結(jié)果出來后不會(huì)清除搜索框里的內(nèi)容】
8.清晰
將信息清晰地傳達(dá)給用戶，盡可能清晰地告訴用戶什么內(nèi)容是被需要的，不要給出讓用戶誤解的信息。沒人喜歡填寫表單，所以避免讓用戶填寫第二次。
【Cowrywise的標(biāo)簽短小精煉、信息清晰，甚至按鈕上的文本表達(dá)也很到位】
小小聲明一下：
以上的所有案例在這里沒有任何褒義和貶低的含義，僅僅是為了舉例教學(xué)。希望此篇文章能給你帶來幫助，謝謝觀看。
原文鏈接：《Creating User-friendly forms》
譯文地址：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作 (公眾號)
原文作者：Momoh Silm
譯者：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作
]]>
每個(gè)步驟（寄送地址、寄送選項(xiàng)、信用卡詳細(xì)信息）都收在一個(gè)手風(fēng)琴面板中。而每個(gè)面板都通過AJAX提交。提交成功后，這個(gè)面板就會(huì)收起，并且通過滑動(dòng)動(dòng)畫展開下一個(gè)面板。
看起來就像這樣：
Boots的單頁結(jié)賬頁面，使用了手風(fēng)琴面板展現(xiàn)每一個(gè)步驟。
用戶千辛萬苦才完成了下單過程。錯(cuò)誤難以更正，因?yàn)樯舷聺L動(dòng)并不方便。手風(fēng)琴面板讓人非常痛苦和分心。不可避免地，客戶要求我們作出改變。
我們進(jìn)行了改版，讓每個(gè)面板單獨(dú)成為一個(gè)頁面，也就不需要手風(fēng)琴和AJAX了。不過，我們還是保留了客戶端驗(yàn)證，防止不必要的服務(wù)器請求。
看起來就像這樣：
Boots的結(jié)賬頁面：每一步都是單獨(dú)的一個(gè)頁面。
這個(gè)版本的轉(zhuǎn)化率好多了。雖然我不記得具體數(shù)字了，我知道客戶比較滿意。
6年后（2014年），我在*Just Eat*工作，發(fā)生了同樣的事情。我們設(shè)計(jì)了一個(gè)單頁結(jié)賬流程，其中每個(gè)部分都有獨(dú)立頁面。這一次，我記下了相關(guān)數(shù)據(jù)。
結(jié)果是每年能增加2百萬訂單。要清楚，這是訂單量，不是利潤。這個(gè)數(shù)據(jù)是基于新版本至少一周后，結(jié)賬轉(zhuǎn)化率提升的比例得出的。這部分轉(zhuǎn)化成了訂單，數(shù)量激增52倍。
這是我們的移動(dòng)端優(yōu)先的設(shè)計(jì)：
Just Eat的結(jié)賬分為多個(gè)頁面。我們還在設(shè)計(jì)中進(jìn)一步簡化了支付頁面：用戶先選擇“現(xiàn)金支付”或“銀行卡支付”，然后才會(huì)轉(zhuǎn)到相關(guān)的頁面?？上覀儾]有對這項(xiàng)優(yōu)化進(jìn)行測試。
兩年后（2016年），GDS的Robin Whittleton告訴我，把每一步分為單獨(dú)頁面，是一種獨(dú)立的設(shè)計(jì)模式，叫做“一頁只做一件事”。除了它產(chǎn)生的數(shù)據(jù)效果，這種模式的背后還有充分的合理性，這部分我們很快就會(huì)講到。
不過在這之前，我們來仔細(xì)看看這種模式到底是什么。
“一頁只做一件事”到底是什么意思？
一頁只做一件事，并不是一定要在一個(gè)頁面上只展示單一的元素或組件（雖然也可以這么做）。比如說，很可能仍然會(huì)保留頁頭和頁尾。
類似的，也不是說每個(gè)頁面上只能有一個(gè)輸入框（當(dāng)然，這么做也是可以的）。
這種模式是指把復(fù)雜的流程分解成多個(gè)小碎片，把每個(gè)小碎片獨(dú)立一頁展示。
比如說，與其把地址輸入表單放在寄送選項(xiàng)和支付表單頁面，倒不如把地址輸入放在一個(gè)專用頁面。
地址輸入表單有許多輸入框，但它對于用戶來說，實(shí)際上是個(gè)單一的、獨(dú)立的問題。在專用頁面里回答這個(gè)問題是有道理的。
我們看看這種模式到底好在哪里。
好在哪里？
雖然這種模式常常能結(jié)出碩果（其實(shí)就是指訂單和轉(zhuǎn)化率了），我們最好還是要了解它背后的原理。
1. 減少認(rèn)知負(fù)荷
正如Ryan Holiday在《The Obstacle Is The Way》中所說：
回想一下你第一次看到復(fù)雜代數(shù)式時(shí)的情景。這整個(gè)就是一團(tuán)混亂的未知符號。但是當(dāng)你將它分解，獨(dú)立成各個(gè)部分，答案便水落石出。
一步步分解等式，就能輕松解決問題。
用戶在填寫表單時(shí)也是一樣的道理，或者其他任何重要的事情都一樣。如果屏幕上元素減少，只有唯一的選擇，阻礙就降到最低。因此，用戶會(huì)專注于完成任務(wù)。
2. 處理錯(cuò)誤更容易
當(dāng)用戶填寫小型表單時(shí)，錯(cuò)誤可以很容易被發(fā)覺，并盡早呈現(xiàn)出來。如果只有一個(gè)錯(cuò)誤要修正，那就很容易，能降低用戶放棄的可能性。
即使有多個(gè)錯(cuò)誤，Kidly的地址填寫表單也很容易更正。
3. 頁面加載更快
如果頁面的設(shè)計(jì)很簡單，加載就會(huì)更快。更快的加載速度能降低用戶離開的風(fēng)險(xiǎn)，為我們的服務(wù)建立起信任。
4. 易于追蹤行為
一頁上內(nèi)容越多，就越難以了解用戶因?yàn)槭裁措x開。不要誤會(huì)我的意思：頁面數(shù)據(jù)分析不能左右設(shè)計(jì)，但這是個(gè)很不錯(cuò)的副產(chǎn)品。
5. 易于追蹤過程和返回上一步
如果用戶需要頻繁提交信息，我們可以把它們以更細(xì)的顆粒來保存。舉個(gè)例子，如果用戶中途退出，我們還可以發(fā)送郵件，鼓勵(lì)他們完成訂單。
6. 滾動(dòng)操作減少，甚至被消滅
不要誤會(huì)我的意思：滾動(dòng)不是什么大問題——用戶的期望中，網(wǎng)頁就是這么用的。但如果頁面短小，用戶就沒必要滾動(dòng)了。主操作項(xiàng)就更容易出現(xiàn)在屏幕視野內(nèi)，能強(qiáng)調(diào)它的重要性，易于任務(wù)完成。
7. 容易產(chǎn)生分支
有時(shí)候，我們需要根據(jù)之前的答案，給用戶提供一條不同的路徑。舉個(gè)簡單的例子，兩個(gè)聯(lián)動(dòng)的下拉菜單，用戶在第一個(gè)菜單里的選擇，會(huì)影響第二個(gè)菜單中的內(nèi)容。
一頁只做一件事可以輕松處理這種情況：用戶作出選擇并提交，服務(wù)器來決定用戶接下來看到什么——天然具有簡單和包容的特點(diǎn)。
我們也可以用JavaScript。不過無論是構(gòu)建還是確保界面的可用性，都需要更高的成本。如果JavaScript出錯(cuò)，用戶的體驗(yàn)也就被破壞了。而且，根據(jù)所有這些排列組合選項(xiàng)來加載頁面，會(huì)顯著加重頁面負(fù)擔(dān)。
或者，我們可以使用AJAX，但這并沒有避免渲染新頁面（或者部分）。更關(guān)鍵的是，它并沒有減輕服務(wù)端的數(shù)據(jù)往返壓力。
還不止這些。我們需要發(fā)送更多代碼量，并且發(fā)起AJAX請求，還要處理錯(cuò)誤、顯示加載指示器。這又讓頁面加載變慢了。
自定義加載指示器是有問題的，因?yàn)樗鼈儾⒉粶?zhǔn)確，不像瀏覽器的原生加載進(jìn)度。用戶也不熟悉它們——相對于整個(gè)網(wǎng)站來說，它們是特殊的存在。無論如何，相似性是用戶體驗(yàn)的慣例，除非真有必要，否則不要打破它。
而且，頁面上有兩個(gè)動(dòng)態(tài)更新的聯(lián)動(dòng)輸入項(xiàng)，這會(huì)需要用戶按照一定順序來操作。我們也可以通過可用/禁用和顯示/隱藏來控制這些輸入項(xiàng)，但這樣也更加復(fù)雜。
最后，用戶的某些更改，可能會(huì)導(dǎo)致隨后的元素消失或者變化，這也讓人迷惑。
8. 對使用屏幕閱讀器的用戶更友好
如果頁面上內(nèi)容減少，屏幕閱讀器就不必長途跋涉穿過許多多余的次要信息。用戶可以直接前往第一個(gè)標(biāo)題，然后迅速開始操作表單。
9. 易于更改細(xì)節(jié)
想象一下某人正要確認(rèn)訂單。關(guān)鍵時(shí)刻，他發(fā)現(xiàn)支付信息里有一處錯(cuò)誤。此時(shí)回到專用頁面比找到頁面*當(dāng)中*的某個(gè)部分更容易。
用戶點(diǎn)擊“編輯”，會(huì)前往支付信息頁面，里面有專用的標(biāo)題和相關(guān)的表單項(xiàng)目。
深陷一個(gè)長頁面中是會(huì)令人迷失方向。記住，用戶點(diǎn)擊鏈接代表他們要執(zhí)行特定的操作——頁面上的其他東西都是干擾信息。
長頁面還可能會(huì)加重工作量。比如說，如果想要在一個(gè)頁面中展開和收起面板，你就需要更多額外的邏輯思考。
一頁只做一件事，這些問題都得到了解決。
10. 用戶對數(shù)據(jù)更有掌控力
用戶不會(huì)只加載一半的頁面。要么全部，要么沒有。如果他們需要更多信息，就會(huì)點(diǎn)擊鏈接，他們有選擇能力。只要每一步都更接近目標(biāo)，用戶并不介意點(diǎn)擊。
11. 解決了性能問題
如果每件事都復(fù)雜無比——單頁應(yīng)用就是一個(gè)極端例子——性能問題就很難解決。是因?yàn)閳?zhí)行時(shí)間問題？內(nèi)存泄漏？還是AJAX請求導(dǎo)致的？
人們很容易認(rèn)為AJAX能提升用戶體驗(yàn)，但增加代碼量很少情況能創(chuàng)造更快的體驗(yàn)。
復(fù)雜性轉(zhuǎn)移到客戶端，會(huì)掩蓋服務(wù)端的根本問題。但如果頁面只做一件事情，性能問題就不容易產(chǎn)生。如果真發(fā)生了問題，排查原因也很容易。
12. 它有一種在前進(jìn)的感覺
因?yàn)橛脩粼诓煌５厍巴乱徊剑瑫?huì)產(chǎn)生一種正在前進(jìn)的感覺，在用戶填寫表單時(shí)給他們一種積極的感受。
13. 降低丟失信息的風(fēng)險(xiǎn)
長表單需要更長時(shí)間來完成。如果所花時(shí)間太長，頁面超時(shí)可能導(dǎo)致信息丟失，產(chǎn)生嚴(yán)重的挫敗感。
又或者，電腦可能卡死，*《我是布萊克》*里的主角Daniel就是這樣的例子。他的健康每況愈下，而且第一次用電腦就遇到了死機(jī)，然后數(shù)據(jù)丟失。最終他放棄了。
14. 第二次使用的體驗(yàn)更順暢
比如，假設(shè)我們儲存了用戶的支付信息，我們可以直接跳過那一頁，直接帶他們?nèi)?ldquo;結(jié)賬確認(rèn)”頁面。這會(huì)減少阻礙，提升轉(zhuǎn)化率。
15. 這是移動(dòng)優(yōu)先設(shè)計(jì)的一種補(bǔ)充
移動(dòng)優(yōu)先的設(shè)計(jì)，提倡在小屏幕上只呈現(xiàn)最重要的信息。一頁只做一件事，也遵循著相同的方式。
16. 設(shè)計(jì)過程很簡單
當(dāng)我們設(shè)計(jì)一套復(fù)雜流程時(shí)，分解成細(xì)小頁面和組件，可以讓人更容易理解這些問題。
還可以方便地調(diào)換頁面來改變順序。我們一次只研究一件事，這點(diǎn)和用戶一樣，能讓我們更輕松地分析問題。
這可以減輕設(shè)計(jì)負(fù)擔(dān)——這種模式讓用戶受益的同時(shí)，還能有這樣的附加福利。
這種模式適合所有情況嗎？
也不完全是。Caroline Jarrett在2015年寫過一篇文章《一頁只做一件事》，里面講得很清楚。她解釋道，用戶調(diào)研“會(huì)告訴你某些問題組合起來放在長頁面里更合適”。
但是反過來，她也提到了“對于設(shè)計(jì)師來說‘屬于一組’的問題……對于用戶而言，并不一定要放在一個(gè)頁面上”。
她提出了一個(gè)頗具啟發(fā)性的例子，GOV.UK的驗(yàn)證頁面中，他們嘗試把“創(chuàng)建用戶名”和“創(chuàng)建密碼”先后放在兩個(gè)頁面上。
就像許多設(shè)計(jì)師所認(rèn)為的，Caroline覺得把這兩者放在不同頁面有點(diǎn)太過了。實(shí)際上，用戶對此一點(diǎn)也不介意。
關(guān)鍵在于，以一頁只做一件事為出發(fā)點(diǎn)，然后通過用戶研究，驗(yàn)證把其中一些項(xiàng)目編組合并，是否能進(jìn)一步改善用戶體驗(yàn)。
這并不代表最終結(jié)果一定是把頁面合并——在我經(jīng)驗(yàn)中，最好的結(jié)果往往是把事情拆分開來，僅此而已。當(dāng)然，我也希望聽聽你的經(jīng)驗(yàn)。
總結(jié)
這種低調(diào)不起眼的用戶體驗(yàn)設(shè)計(jì)模式很靈活、高性能、有包容性。這是真正擁抱互聯(lián)網(wǎng)的方式，對于自信滿滿和小心翼翼的用戶而言都很簡單。
一個(gè)頁面上展現(xiàn)很多（或者全部）內(nèi)容可能會(huì)營造一種簡單的幻象，但就像代數(shù)式問題一樣，除非把它們分解，否則很難處理。
如果把任務(wù)看作是用戶想要完成的一筆交易，把它分解為多個(gè)小步驟很有必要。這就像我們在用網(wǎng)頁的一磚一瓦來搭建漸進(jìn)式表單。每一頁背后的隱喻，都給潛意識營造一種正在前進(jìn)的感覺。
我還沒有遇到過哪種其他的設(shè)計(jì)模式，能具備這么多的優(yōu)點(diǎn)。這就是那種真理時(shí)刻——答案總是最簡單的。
作者信息：Adam Silver
原文鏈接：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
]]>
每天我們都使用表單進(jìn)行基本的網(wǎng)上操作。網(wǎng)上購物、注冊郵箱、社交網(wǎng)絡(luò)甚至參與討論、描述美味的午餐等等都需要我們填好表單。不夸張地說，表單是數(shù)字信息分享的生命根基。然而多年以來，表單的體驗(yàn)鮮有提升，僅僅停留在功能足夠好卻達(dá)不到體驗(yàn)上的優(yōu)秀。然而現(xiàn)在，在使用恰當(dāng)技術(shù)的幫助下，我們可以設(shè)計(jì)出更快、更簡單、更有成效的表單體驗(yàn)。
在表單體驗(yàn)中一條經(jīng)典的原則是“越短越好”。耗費(fèi)用戶更少的精力可以帶來更高的轉(zhuǎn)化率，這當(dāng)然看起來符合邏輯，但是這條原則沒有考慮到很多因素，比如應(yīng)用場景，設(shè)計(jì)方式、表單體驗(yàn)的吸引力等等。
舉個(gè)例子，我發(fā)現(xiàn)一個(gè)被引用的次數(shù)遠(yuǎn)超其它的報(bào)告，它的測試成果被多篇文章和言說提及并被當(dāng)做“真理”，而可怕的是這個(gè)研究成果其實(shí)是相當(dāng)有局限性的。這個(gè)報(bào)告是Imaginary Landscape(一個(gè)開源的網(wǎng)絡(luò)開發(fā)機(jī)構(gòu)）近十年前的一次實(shí)驗(yàn)，試驗(yàn)中當(dāng)表單從11個(gè)字段減少到4個(gè)字段，轉(zhuǎn)化率增加了160%。但這只是一個(gè)頁面，一次測試，兩個(gè)變量得到的實(shí)驗(yàn)結(jié)果，假設(shè)他們進(jìn)行了多組4個(gè)字段的實(shí)驗(yàn)，或者做10個(gè)字段與11個(gè)字段的表單作對比，4個(gè)與5個(gè)字段表單做對比，也會(huì)令實(shí)驗(yàn)更加值得信服。然而他們沒有，這只能說明僅在這一個(gè)特定的情況下，確實(shí)減少表單64%的字段能使表格更容易填寫。
在Call To Action 2015的演講上,來自Unbounce 的Michael Aagaard分享了類似的案例。以提高一個(gè)特定表單的商業(yè)轉(zhuǎn)化率作為任務(wù)，他首先將表單的字段數(shù)從9削減到6，轉(zhuǎn)化率下降了14%。深入研究后他發(fā)現(xiàn)，表單中那些被刪除的字段構(gòu)成了一個(gè)不太引人注目的體驗(yàn)，而這恰恰是最吸引用戶的部分。在第二次實(shí)驗(yàn)，他調(diào)整了原始表單的組織結(jié)構(gòu)和清晰度，并保持9個(gè)字段不變，轉(zhuǎn)化率增加了19%。事實(shí)證明，短的表單不總是更好。
所以如果不是通過簡單的使表單更短，我們怎樣用現(xiàn)代技術(shù)來設(shè)計(jì)最好的表單呢？讓我們來考慮一些新原則：
－優(yōu)先保證表單的可瀏覽性
－提供更易填寫的表單格式
－給予恰當(dāng)?shù)妮斎胂拗?/p>
－利用定位
1.優(yōu)先保證表單的可瀏覽性
很早之前Jakob Nielsen的研究告訴我們，用戶通常只是快速瀏覽網(wǎng)頁而不是細(xì)致地從上到下閱讀。在填寫表單的時(shí)候也是這樣，盡管設(shè)計(jì)者希望填寫者全心全意，用戶也未必如你所愿。讓用戶能夠高效的瀏覽表單，對避免錯(cuò)填漏填至關(guān)重要，尤其是當(dāng)表單是用戶只能填寫一次的時(shí)候（比如電子商務(wù)地址表單，注冊表單等等）。
－標(biāo)簽位置
關(guān)于標(biāo)簽的位置已經(jīng)有了很多研究，然而這場辯論還在繼續(xù)。表單大師Luke Wroblewski在研究中確定，用戶對標(biāo)簽頂部對齊的表單完成時(shí)間最短，因?yàn)榇朔N方式減少了眼球運(yùn)動(dòng)的需要量。在通常意義的表單標(biāo)簽中，右對齊的方式能讓用戶第二快的完成表單，尤其建議在當(dāng)頁面高度有限時(shí)使用這種方式。雖然左對齊標(biāo)簽的表單用戶完成的最慢，但是當(dāng)表單需填寫的數(shù)據(jù)不太常見時(shí)，這種方式能提高理解。
－提示文字
如果將標(biāo)簽作為框內(nèi)提示文字，幫助性也不大。一旦表單獲取點(diǎn)擊焦點(diǎn)，提示文字就消失了，用戶不再能看見它。這會(huì)讓用戶產(chǎn)生短期記憶的壓力而增加錯(cuò)誤的機(jī)率。
即使把標(biāo)簽分開，另外增加框內(nèi)提示文字，用戶乍一看上去也會(huì)覺得像已經(jīng)填寫了的樣子。舉個(gè)例子，Nielsen Norman Group曾做過的一項(xiàng)眼球追蹤研究就說明，空的輸入框比有提示文字的輸入框更能引起用戶的關(guān)注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。換句話說，被認(rèn)為是有用的表單提示文本其實(shí)弊大于利，尤其是對習(xí)慣大致瀏覽的用戶。
好的：空的表單字段
不好的：被提示文字掩蓋的表單字段
在某些情況下，提示文字比普通文本的顏色較輕，這可能緩解上述問題。然而這種技術(shù)產(chǎn)生了一個(gè)對比度的問題，在白色背景下配淺灰色文本通常不符合被普遍接受的網(wǎng)絡(luò)可訪問性指南（正常文本對比4.5:1）。此外，根據(jù)W3C，提示文字也不支持殘疾人的輔助設(shè)計(jì)（如屏幕閱讀器，見https://www.w3.org/WAI/tutorials/forms/instructions/），這使得這些殘疾人用戶更難準(zhǔn)確填寫表單。
－浮動(dòng)的標(biāo)簽
浮動(dòng)標(biāo)簽是一個(gè)迅速獲得普及的新的交互設(shè)計(jì)方式。在它的設(shè)計(jì)中，標(biāo)簽文字開始作為提示文字，然后一旦用戶開始填寫，標(biāo)簽將升到上面，解決了上述提示文字消失的問題。
雖然這種方式還可以幫助減少頁面長度，在移動(dòng)端特別有幫助。但是它不能解決上述文本框看上去已經(jīng)被填補(bǔ)的問題。因此，Nielsen Norman Group不建議這種做法，還是應(yīng)該保持標(biāo)簽在上面，除非頁面長度是最重要的設(shè)計(jì)關(guān)注點(diǎn)。
2.提供更易填寫的表單格式
以前，在填寫表格時(shí)用戶有很多的猜測。“我的電話號碼應(yīng)該是哪種格式？我的信用卡有沒有少輸一位？這個(gè)鍵盤上的符號“@”在哪里？” 新技術(shù)使我們能夠不讓用戶被這些疑慮困擾，提供更清爽的體驗(yàn)。
－輸入掩碼
幫助用戶格式化輸入文本的輸入掩碼，雖然在外觀上與提示文字類似，其實(shí)有明顯的不同。首先，掩碼只出現(xiàn)在用戶點(diǎn)擊輸入框的時(shí)候，避免了上述瀏覽障礙的問題。其次，輸入的文字自動(dòng)應(yīng)用正確的文本格式，讓用戶將填充字段時(shí)的焦點(diǎn)放在所需的數(shù)據(jù)上，這樣更容易注意到錯(cuò)誤。在下面的例子中，填寫電話號碼時(shí)括號和破折號自動(dòng)填充。
在填寫手機(jī)號、信用卡、貨幣等等的時(shí)候，這種簡單的技術(shù)可以節(jié)省我們的時(shí)間和精力。
－輸入字段的HTML屬性
設(shè)計(jì)師知道對于輸入特定的數(shù)據(jù)需要展示正確的移動(dòng)鍵盤，但是對究竟哪種才是正確的鍵盤類型有些疑慮。
舉個(gè)例子，對于最常用的“數(shù)字”類型屬性的輸入框，常常不會(huì)觸發(fā)數(shù)字小鍵盤，觸發(fā)的是普通的帶有數(shù)字區(qū)域的鍵盤，數(shù)字鍵的大小遠(yuǎn)小于小鍵盤。
“數(shù)字”鍵盤和“電話”小鍵盤
對于只包括數(shù)字的字段，比如日期，郵編，信用卡等等。使用數(shù)字小鍵盤可以有更大的點(diǎn)擊目標(biāo)，從而使用戶用更小的精力輸入。（為了使其展示，前端中可用“tel”作為type值或者添加屬性“pattern＝［0-9]* ”。）然而，為數(shù)字狀態(tài)設(shè)置全鍵盤，對如街道地址等以數(shù)字作為開始的混合字段依然有用。
這里有其他的幾種可以被加入輸入框的屬性，從而可以消除額外的點(diǎn)擊和錯(cuò)誤。
- 自動(dòng)填寫：利用瀏覽器可以保存并列舉用戶以前填寫過的值。對敏感數(shù)據(jù)應(yīng)關(guān)閉此功能。
- 自動(dòng)更正：更正輸入的拼寫錯(cuò)誤。對名稱，地址等特殊字段應(yīng)該關(guān)閉此功能。
- 自動(dòng)首字母大寫：自動(dòng)大寫輸入的第一個(gè)字母。這適用于填寫姓名，而不可用于電子郵件地址。
- 拼寫檢查：用紅色下劃線標(biāo)出拼寫錯(cuò)誤的單詞。對名稱，地址等特殊字段應(yīng)該關(guān)閉此功能。
3.限制輸入
如今越來越多的人用小屏的移動(dòng)設(shè)備，我們需要考慮到小屏的使用場景，避免用戶不必要的輸入，在提高用戶滿意度的同時(shí)還可以減少錯(cuò)誤率。
－地址預(yù)填充
在網(wǎng)上注冊表單中地址的填寫常常是最麻煩的，因?yàn)榘ǘ鄠€(gè)字段，長長的地址名。通過把長地址拆解為單個(gè)字段，不僅有助于讓用戶聚焦在輸入上（是的他們總是會(huì)頻繁切換頁面），也削減了大量的輸入。
在下面的例子中輸入谷歌總部的地址（街道，城市，州，郵編，國家），完整的輸入過程只需鍵入10個(gè)字母，而如果不用自動(dòng)填充的話，用戶需要手動(dòng)輸入50多次。
上面使用谷歌API的解決辦法可以在大多數(shù)情況下表現(xiàn)良好，但是對于輸入標(biāo)志性建筑和公寓號的適用性有限，因?yàn)檫@些也許不包括在API提供的反饋之中。
而ThinkGeek的方法，由軟件即服務(wù)（SaaS）供應(yīng)商提供，稱為PCA預(yù)測，初始搜索時(shí)允許輸入公寓號碼，輸入后將地址正確的格式化。
THINKGEEK.COM
－郵箱預(yù)填充
另一種減少輸入的方法就是在郵件地址字段中提供一個(gè)常見郵箱域名的列表。列表在用戶輸入了“@”按鈕時(shí)出現(xiàn)，主要就是使用了一個(gè)預(yù)填充的解決方案，這樣每次輸入郵件地址最多可以節(jié)省12次按鍵。
注意輸入框文本 “郵箱地址” 已經(jīng)消失
4.利用定位
雖然調(diào)用定位數(shù)據(jù)常用在移動(dòng)應(yīng)用程序中，但是我們不能忘記在所有的平板電腦和臺式機(jī)上也可以使用。特別是當(dāng)在觸摸屏上打字很麻煩時(shí)，基于位置的信息預(yù)填充可以節(jié)省用戶寶貴的時(shí)間并提高轉(zhuǎn)化率。
諾德斯特龍百貨網(wǎng)站的產(chǎn)品詳情頁就是這種技術(shù)的一個(gè)很好的例子，產(chǎn)品利用定位完全跳過了表單填寫。頁面調(diào)用定位信息，并在最接近的商店自動(dòng)查找項(xiàng)目的庫存，而不是要求用戶輸入郵政編碼來獲取地址。這樣不僅僅節(jié)省了用戶的時(shí)間，還可以讓用戶直接看到“最近店面地址”這個(gè)有用的信息。
NORDSTROM.COM
雖然由于精度問題，預(yù)填充一個(gè)完整的地址可能是有困難的。通過谷歌的Places API，可以同時(shí)使用地理位置信息和地址預(yù)填充兩種方式以達(dá)到最好的效果，根據(jù)用戶的實(shí)時(shí)位置給出更為精確的位置填寫參考。
ZUPPLER.COM
當(dāng)然，因?yàn)椴荒鼙ＷC準(zhǔn)確性，所以需要允許用戶可以對自動(dòng)生成的位置數(shù)據(jù)進(jìn)行手動(dòng)修改。
總結(jié)
總之，遵循這些原則可以幫助設(shè)計(jì)出易用的表單并創(chuàng)造愉悅的表單體驗(yàn)：
- 優(yōu)先保證表單的可瀏覽性，設(shè)計(jì)易于閱讀的標(biāo)簽，并避免無關(guān)的內(nèi)容妨礙用戶瀏覽。
- 提供更易填寫的表單格式，為每個(gè)輸入條目的類型設(shè)計(jì)輸入掩碼，并使用適當(dāng)?shù)逆I盤（以及其他HTML屬性）。
- 給予恰當(dāng)?shù)妮斎胂拗疲褂妙A(yù)填充
- 利用定位，無需再次點(diǎn)擊添加。
以上說明我們在不斷變化的數(shù)字時(shí)代中總是有更多可以學(xué)習(xí)的東西。另附一些高質(zhì)量的表單設(shè)計(jì)資源：
- Luke Wroblewski的書《Web表單設(shè)計(jì)》，還有他的博客（http://www.lukew.com/ff/），里面涵蓋了各種UX的話題
- W3C的表單指導(dǎo)方針（https://www.w3.org/WAI/tutorials/forms/）
- Amanda Cheung寫在UX Booth的文章：“如何使表單風(fēng)格通俗易懂”（http://www.uxbooth.com/articles/styling-forms-accessibly/）
英文原文：MIKE MADAIO, THE NEW RULES OF FORM DESIGN.
原文地址：HTTP://WWW.UXBOOTH.COM/ARTICLES/THE-NEW-RULES-OF-FORM-DESIGN/
譯文地址：http://ddc.dianrong.com/?p=2531
]]>
Pricing
Pricing
Pricing Plan
Pricing page
Pricing
Pricing Table
Product Plans
Upgrade page
Pricing page
Sign Up UI
Modal
Freelance Website
Sign Up
Daily UI #1
Sign Up Modal
Sign Up
Flocabulary
To Do App Concept
DailyUI
p.s.我們簡單說說表單中含有哪些元素：
標(biāo)簽（Label）告訴用戶該表單需要填寫什么類型的信息，通常放置在表單文本框之外。
表單字段（Form field）則是用來收集用戶輸入的信息，在我們平常使用的表單之中，每個(gè)字段包含著某一類型的信息（如姓名、性別等）。
占位符文本（Placeholder text），又叫提示文本，位于表單文本框里面，一般用于提示用戶填寫。在大多數(shù)的做法中，當(dāng)用戶開始輸入，這些提示文本會(huì)自動(dòng)消失。
一條經(jīng)典的表單設(shè)計(jì)原則是表單越短越好。這條法則看上去似乎有理有據(jù)，但是它卻沒給我們帶來預(yù)期高的用戶轉(zhuǎn)化率。這條指導(dǎo)原則錯(cuò)就錯(cuò)在沒有考慮其他因素，如用戶輸入，它們該如何設(shè)計(jì)、如何影響表單的體驗(yàn)。
舉個(gè)例子，在我的研究中發(fā)現(xiàn)這篇文章被設(shè)計(jì)師們引用的次數(shù)遠(yuǎn)遠(yuǎn)超過其他文章，被大多數(shù)人奉為經(jīng)典，想想就可怕。這篇文章來源于Imaginary Landscape(一個(gè)開源的網(wǎng)絡(luò)開發(fā)社區(qū))將近10年前的一次報(bào)告，文章里面提到如果將一個(gè)11個(gè)字段的表單減少至4個(gè)字段，那么轉(zhuǎn)化率就會(huì)提升160%。但這份報(bào)告只給出了一個(gè)頁面、二個(gè)變量和一次測試的結(jié)果，他們沒有做更多的測試，比如對比不同的4個(gè)字段表單之間的測試結(jié)果，對比10和11個(gè)字段以及5和4個(gè)字段表單之間不同的結(jié)果，所以這份報(bào)告存在很明顯的漏洞，根本不能令人信服。
來自Michael Aagaard在Call To Action 2015分享的一個(gè)與上面類似的案例。案例中，他負(fù)責(zé)提升某表單的用戶轉(zhuǎn)化率。他一開始的做法是將原本表單的字段從9個(gè)減少至6個(gè)，但是轉(zhuǎn)化率沒有提升反而降了14%。后來經(jīng)過研究，他發(fā)現(xiàn)原本表單中最吸引用戶注意的恰好是被刪除的字段，結(jié)果顯而易見，表單對用戶的吸引力變?nèi)趿恕０l(fā)現(xiàn)問題后，Michael Aagaard進(jìn)行了第二次測試，他在保持9個(gè)字段不變動(dòng)的情況下調(diào)整了表單的結(jié)構(gòu)使之更清晰，結(jié)果轉(zhuǎn)化率提升了19%。事實(shí)證明，減少表單字段不一定能提升用戶轉(zhuǎn)化率。
所以，我們該如何設(shè)計(jì)出好的表單？這里有一些新的設(shè)計(jì)原則也許適用：
1.優(yōu)先考慮用戶瀏覽方式
2.能夠輕松填寫的格式
3.限制輸入
4.利用定位
（1）優(yōu)先考慮用戶瀏覽方式：
來自Jakob Nielsen很早之前的研究：用戶瀏覽網(wǎng)頁是通過眼睛快速掃描的方式瀏覽，而不是從上往下逐字地閱讀。即使是在填寫表單上面，用戶也是如此?？紤]到表單輸入的效率，用戶有效的掃描網(wǎng)頁對于減少錯(cuò)誤或錯(cuò)失字段的情況至關(guān)重要，尤其是當(dāng)表單只能填寫（提交）一次的時(shí)候（電商地址填寫，注冊帳號等等）。
表單標(biāo)簽的位置
雖然已經(jīng)有了大量關(guān)于表單標(biāo)簽位置的研究，但仍然存有爭議。表單方面的專家Luke Wroblewski有一篇研究明確了表單標(biāo)簽采取頂部對齊的方式能讓用戶更快完成瀏覽，原因是這種對齊方式對眼球移動(dòng)的需求比其他對齊方式要更少。其中采用右對齊方式標(biāo)簽的表單瀏覽時(shí)間僅次于頂部對齊標(biāo)簽的表單，如果你的網(wǎng)頁高度有限的話推薦這種對齊方式。采用左對齊標(biāo)簽方式的表單是三者之中瀏覽時(shí)間最長的，但是，這種對齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的時(shí)候使用（如一些重要的輸入）。
提示
占位符文本（又叫提示文本）。關(guān)于提示文本，一般來說它對用戶來說弊大于利。其中包括把標(biāo)簽作為占位符文本來使用的情況，這樣的話當(dāng)我們在表單里面添加內(nèi)容的時(shí)候，提示文本會(huì)自動(dòng)消失。這種做法雖然可以讓用戶不再看到提示文本，但是這很容易造成用戶短期記憶的壓力以及增加犯錯(cuò)的機(jī)會(huì)。
即使標(biāo)簽不作為提示文本，另外添加一個(gè)提示文本。用戶這種掃描式的瀏覽很容易造成框內(nèi)已經(jīng)被輸入了文字的誤會(huì)。來自NN Group的研究，研究中表明了空字段對比有文字的字段更吸引用戶注意，以及用戶更多的會(huì)跳過那些有提示文本的字段。換句話說，被認(rèn)為對用戶有利的提示文本其實(shí)對用戶來說弊大于利，尤其會(huì)對用戶瀏覽網(wǎng)頁方面造成困難。
Good: 一個(gè)空的表單字段
Bad: 表單字段里的幫助文本令人費(fèi)解
在某些情況下，為了減輕上面所說的問題，占位符文本可以使用比普通的文本更淺的顏色。然而這種方法容易導(dǎo)致一個(gè)對比度的問題，白色背景上的淺灰色文本不符合W3C Web內(nèi)容的可訪問性指南（正常文本比4.5:1）。此外，根據(jù)W3C，占位符文本不支持輔助殘疾人的設(shè)計(jì)（如屏幕閱讀器），這會(huì)讓這部分用戶填寫表單變得很困難。
浮動(dòng)標(biāo)簽（Floating Labels）
這是一個(gè)現(xiàn)在很受歡迎的新穎的交互設(shè)計(jì)方式：浮動(dòng)（或自適應(yīng)）標(biāo)簽。整個(gè)交互過程，一開始標(biāo)簽文本作為占位符文本，之后一旦用戶開始填寫它就會(huì)移動(dòng)到表單字段的上方。這種方式很好的解決了上面所說關(guān)于標(biāo)簽消失的問題。
而且這種方式應(yīng)用在移動(dòng)端上還能幫助我們減少頁面長度。但是，它還是沒有解決上面所講的一個(gè)很重要的問題：用戶掃描式的瀏覽很容易誤會(huì)框內(nèi)已經(jīng)被輸入了文字。因此，NN Group建議還是避免這種交互方式，仍然采用標(biāo)簽在字段上方的做法，除非頁面長度是現(xiàn)階段你需要解決優(yōu)先級最高的問題。
(2)能夠輕松填寫的格式
以前，我們填寫表單是需要靠猜的，比如我的手機(jī)號碼應(yīng)該用哪種格式？信用卡號碼填寫有沒有遺漏？“@”符號在鍵盤的哪個(gè)位置？現(xiàn)在，新的表單設(shè)計(jì)能夠幫助用戶做出判斷，提高表單使用體驗(yàn)。
輸入掩碼（Input Masks）
字段掩碼，能幫助用戶輸入的文本編排格式。首先，用戶填寫一個(gè)字段的時(shí)候只能出現(xiàn)一種掩碼，以免出現(xiàn)上述問題。其次，當(dāng)用戶填寫時(shí)自動(dòng)為文本編排格式，讓用戶將關(guān)注的重點(diǎn)放在所需要填寫的信息以及更容易被發(fā)現(xiàn)的錯(cuò)誤上面。在下面的例子中，括號、破折號和間隔被應(yīng)用于電話號碼的輸入上面。
當(dāng)我們填寫電話號碼、信用卡號、貨幣等等的時(shí)候，這個(gè)簡單的方法能夠節(jié)省我們的時(shí)間和精力。
輸入字段（Input Fields）的HTML屬性
現(xiàn)在設(shè)計(jì)師們已經(jīng)知道如何正確調(diào)用手機(jī)上的小鍵盤，但實(shí)際上仍有很多人不會(huì)使用正確的鍵盤類型。
“數(shù)字（Number）”鍵盤vs.“電話號碼（tel）”小鍵盤
對于僅包含數(shù)字的字段，如日期、郵編、信用卡號等，使用“電話號碼”樣式的小鍵盤因?yàn)橛|發(fā)面大的原因能讓用戶輕松的輸入數(shù)字。（前端的實(shí)現(xiàn)方式， 標(biāo)簽的type屬性里使用“tel”或者添加屬性 “pattern=”[0-9]*”）。
這里還有其他幾個(gè)屬性，將它們添加到文本字段里面也能幫助我們消除多余的按鍵以及錯(cuò)誤。（注：以下建議需考慮中文適用性）
自動(dòng)填寫：利用瀏覽器顯示用戶之前填寫的數(shù)值。但需要將敏感數(shù)據(jù)設(shè)置為“關(guān)閉”。
自動(dòng)更正：當(dāng)用戶出現(xiàn)文字拼寫錯(cuò)誤的時(shí)候自動(dòng)更正。但要注意如果是姓名、地址等特殊字段的時(shí)候需要關(guān)閉此功能。
自動(dòng)大寫：第一個(gè)字母大寫。
拼寫檢測：用紅色強(qiáng)調(diào)拼寫錯(cuò)誤的單詞。但也需要注意如果是姓名、地址等特殊字段的時(shí)候需要關(guān)閉此功能。
（3）限制輸入
如今越來越多人使用手機(jī)去處理生活中各種各樣的事情，考慮到手機(jī)的使用場景以及它本身屏幕小的情況，我們需要讓用戶在填寫表單的時(shí)候避免一些不必要的輸入，這樣不僅能夠提高用戶滿意度還可以降低操作的錯(cuò)誤率。
地址預(yù)填充（Pre-Fills）
地址的填寫是任何注冊表單中最麻煩的部分，里面含有多個(gè)字段。通過調(diào)整表單字段至單個(gè)字段，我們發(fā)現(xiàn)用戶不僅僅能保持在當(dāng)前輸入的狀態(tài)（不需要頻繁的切換），還可以削減大量的用戶輸入。
在下面的例子我們試著填寫了谷歌總部的地址（街道、城市、州、郵編、國家）。整個(gè)表單我們只用了不到10次按鍵就完成了填寫。這看似簡單的輸入背后隱藏了超過50次的潛在手動(dòng)輸入。
郵件地址預(yù)填充
另一種減少輸入的方法就是在郵件地址字段中提供常見的域名。當(dāng)用戶開始輸入@鍵的時(shí)候就會(huì)出現(xiàn)這些常見的域名。
利用定位
在移動(dòng)端APP里面調(diào)用地理位置信息是很常見的做法，但也別忘了這種做法同樣適用于平板電腦和臺式電腦。特別是觸摸屏，眾所周知，在觸摸屏上填寫表格特別麻煩。使用基于地理位置信息的預(yù)填充方式剛好能幫助用戶節(jié)省寶貴的時(shí)間，同時(shí)提高用戶轉(zhuǎn)化率。
Nordstrom網(wǎng)站的產(chǎn)品詳情頁就是個(gè)很好的例子，該頁面調(diào)用了位置信息來自動(dòng)搜尋離用戶最近的店鋪。這樣做除了節(jié)省時(shí)間外，用戶不需要花費(fèi)精力就能得到可能對其有用的信息。
Nordstrom.com
但是，由于精度問題，想要通過預(yù)填充填寫一個(gè)完整的地址是很困難的。谷歌的Places API基于用戶位置，通過使用地理位置信息和地址預(yù)填充兩種方式來解決這個(gè)問題，為用戶提供準(zhǔn)確的位置參考。
zuppler.com
當(dāng)然，因?yàn)椴豢赡芡耆珳?zhǔn)確，所以需要允許用戶對這些自動(dòng)生成的位置信息進(jìn)行修改。
總結(jié)
總之，遵循這些設(shè)計(jì)原則能幫助大家設(shè)計(jì)出更易用的表單以及創(chuàng)造更好的表單體驗(yàn)：
1.優(yōu)先考慮用戶瀏覽方式，設(shè)計(jì)易于用戶閱讀的“標(biāo)簽（labels）”，并避免無關(guān)緊要的信息干擾用戶瀏覽；
2.提供能夠輕松填寫的格式，考慮每一種字段類型，為其提供掩碼（masks）以及合適的鍵盤輸入；
3.限制用戶輸入，使用預(yù)填充的方式；
4.利用定位，節(jié)省用戶時(shí)間。
原文作者：Mike Madaio
譯文鏈接：UI中國
]]>網(wǎng)站是企業(yè)宣傳和展示其產(chǎn)品的一個(gè)非常好的媒介，同時(shí)也是收集用戶建議和評價(jià)的最佳途徑。作為網(wǎng)站最重要的組成部分之一，聯(lián)系表單是用戶反饋信息的重要窗口。聯(lián)系表單的設(shè)計(jì)應(yīng)該具有創(chuàng)意性，能夠吸引用戶的注意力，還要讓用戶能夠簡單快速的提交信息。在今天這篇文章中，我向和大家分享19個(gè)與眾不同的網(wǎng)頁聯(lián)系表單設(shè)計(jì)，相信能夠帶給你滿滿的設(shè)計(jì)靈感。
01. Manhattan
02. Mario Petrone
03. Waves of Ideas
04. Motion Kandy
05. Ripcord Graphics
06. Lasabree
07. Hippy Hippy Cakes
08. Sick Designer
09. Pearman
10. Cleek
