以往形式的經(jīng)典原則是“越短越好”，但隨著技術(shù)的發(fā)展，一些表格設(shè)計現(xiàn)在不適用，想學(xué)習(xí)最新的表格設(shè)計方法，千萬不要錯過這個！

我們每天都使用表單進(jìn)行基本的在線操作。在線購物，注冊電子郵件，社交網(wǎng)絡(luò)，甚至討論，描述美味的午餐等都需要我們填寫表格?？梢院敛豢鋸埖卣f，表格是數(shù)字信息共享的生命線。然而，多年來，形式的體驗很少有所改善，只是保持足夠的功能而不是體驗?，F(xiàn)在，借助正確的技術(shù)，我們可以設(shè)計出更快，更簡單，更高效的表單體驗。

歡迎來到DDC微信公眾號：“微信ID：DR_DDC”

形式體驗中的經(jīng)典原則是“越短越好”。獲得更高的轉(zhuǎn)換率需要付出很多努力，這當(dāng)然看似合乎邏輯，但是這個原則沒有考慮很多因素，例如應(yīng)用場景，設(shè)計方法，表單體驗的吸引力等等。

例如，我發(fā)現(xiàn)引用次數(shù)遠(yuǎn)遠(yuǎn)高于其他報告。許多文章和演講都提到了它的測試結(jié)果，被視為“真理”?？膳碌氖?，研究結(jié)果非常有限。性。這份報告是近十年前Imagiry Landscape（一家開源網(wǎng)絡(luò)開發(fā)機(jī)構(gòu)）的一項實驗。當(dāng)表格從11個字段減少到4個字段時，轉(zhuǎn)換率增加了160％。但這僅僅是一個頁面，一個測試，兩個變量的實驗結(jié)果，假設(shè)他們已經(jīng)進(jìn)行了多組4場實驗，或者10場用11場場形式進(jìn)行比較，4場和5場場對比也將使實驗更多有說服力的。但是，它們沒有，它只表明在這種特殊情況下，通過使表單中64％的字段更容易填寫表單確實更容易。

在2015年的Call to Action演講中，來自Unbounce的Michael Aagaard分享了類似案例。作為提高特定表單業(yè)務(wù)轉(zhuǎn)換率的任務(wù)，他首先將表單中的字段數(shù)從9減少到6，轉(zhuǎn)換率下降了14％。經(jīng)過深入研究，他發(fā)現(xiàn)表格中刪除的字段構(gòu)成了不太引人注目的體驗，這是用戶最有吸引力的部分。在第二個實驗中，他調(diào)整了原始形式的組織結(jié)構(gòu)和清晰度，保持了9個字段不變，轉(zhuǎn)換率提高了19％。事實證明，短形式并不總是更好。

因此，如果不是縮短形式，我們?nèi)绾问褂矛F(xiàn)代技術(shù)來設(shè)計最佳形式？讓我們考慮一些新原則：

優(yōu)先考慮表單的可見性

提供更易于格式化的表單格式

給出適當(dāng)?shù)妮斎胂拗?/p>

使用定位

1.優(yōu)先考慮表格的可見性

很久以前，Jakob Nielsen的研究告訴我們，用戶通常只是快速瀏覽網(wǎng)頁而不是從上到下閱讀。填寫表格時也是這種情況，盡管設(shè)計師希望此人全心全意地填寫表格，但用戶可能不是您想要的。允許用戶有效地瀏覽表單對于避免錯誤填寫至關(guān)重要，尤其是當(dāng)表單僅供用戶使用時（例如電子商務(wù)地址表，注冊表等）。

標(biāo)簽位置

對標(biāo)簽的位置進(jìn)行了大量研究，但這種爭論仍在繼續(xù)。表格大師Luke Wroblewski在研究中確定用戶完成了標(biāo)簽頂部對齊形式的最短時間，因為它減少了所需的眼球運動量。在通常意義上的表單標(biāo)簽中，右對齊方式允許用戶以最快的速度完成表單，尤其是當(dāng)頁面高度有限時。雖然左對齊標(biāo)簽的表單用戶是最慢完成的，但這種方法可以提高對表單需要填充的數(shù)據(jù)不太常見的理解。

提示文字

如果標(biāo)簽在框中用作提示文本，則不是很有用。一旦表單獲得單擊焦點，提示文本就會消失，用戶將無法再看到它。這將允許用戶產(chǎn)生短期記憶壓力并增加出錯的機(jī)會。

即使標(biāo)簽被分開并且添加了框中的文本，用戶也會覺得他們已經(jīng)乍一看已經(jīng)填寫了。例如，Nielsen Norman Group進(jìn)行的眼動追蹤研究表明，空輸入框比帶有提示文本的輸入框更容易吸引用戶注意，并且用戶比空輸入框更容易忽略。帶有提示文本的輸入框。換句話說，被認(rèn)為有用的表單提示文本實際上更有害而不是好，特別是對于通常習(xí)慣于瀏覽的用戶。

△好：空場

△壞：表單字段被提示文字掩蓋

在某些情況下，提示文本比普通文本輕，這可以緩解上述問題。但是，這種技術(shù)會產(chǎn)生對比度問題，白色背景上的淺灰色文本通常不符合普遍接受的網(wǎng)絡(luò)可訪問性指南（普通文本比較4.5: 1）。此外，根據(jù)W3C，提示文本不支持殘疾人的輔助設(shè)計（如屏幕閱讀器，見https://www.w3.org/WAI/tutorials/forms/instructions/），這使得這些殘疾用戶準(zhǔn)確填寫表格。 。

浮動標(biāo)記

浮動代碼是一種快速交互的新方式。在其設(shè)計中，標(biāo)簽文本以提示文本開頭，一旦用戶開始填寫，標(biāo)簽將上升，解決了上述提示文本消失的問題。

雖然這種方法也可以幫助減少頁面長度，但它在移動端尤其有用。但它并沒有解決上面的文本框似乎已被填充的問題。因此，尼爾森諾曼集團(tuán)不建議采用這種方法，除非頁面長度是最重要的設(shè)計問題，否則它仍然應(yīng)該將標(biāo)簽保持在最頂層。

2.提供更容易格式化的表單格式

以前，用戶在填寫表單時會有很多猜測。 “我的電話號碼應(yīng)該是哪種格式？我的信用卡丟失了嗎？這個鍵盤上的符號“ @” Where？”新技術(shù)使我們能夠防止用戶受到這些問題的困擾。提供更清爽的體驗。

輸入掩碼

幫助用戶格式化輸入文本的輸入掩碼雖然在外觀上與提示文本相似，但實際上是完全不同的。首先，只有當(dāng)用戶點擊輸入框時才會出現(xiàn)遮罩，避免了上述瀏覽障礙的問題。其次，輸入文本自動應(yīng)用正確的文本格式，允許用戶在填充字段時專注于所需的數(shù)據(jù)，從而更容易發(fā)現(xiàn)錯誤。在下面的示例中，填寫電話號碼時會自動填充括號和短劃線。

這種簡單的技術(shù)在填寫手機(jī)號碼，信用卡，貨幣等時節(jié)省了我們的時間和精力。

輸入字段的HTML屬性

設(shè)計人員知道有必要顯示正確的移動鍵盤以輸入特定數(shù)據(jù)，但是對于哪種鍵盤類型正確存在疑問。

例如，對于“數(shù)字”類型屬性的最常用輸入框，通常不會觸發(fā)數(shù)字小鍵盤，觸發(fā)具有數(shù)字區(qū)域的普通鍵盤，數(shù)字鍵的大小遠(yuǎn)小于小鍵盤。

△“號碼”鍵盤和“l(fā)dquo;手機(jī)”鍵盤

對于僅包含數(shù)字的字段，例如日期，郵政編碼，信用卡等。使用數(shù)字小鍵盤可以獲得更大的點擊目標(biāo)，從而允許用戶輕松輸入。 （為了使其顯示，前端可以用作“類型值”或添加屬性“l(fā)d_; pattern=[0-9] *”。）但是，設(shè)置全鍵盤為數(shù)字狀態(tài)，如街道地址等。起始混合字段仍然有用。

可以將其他幾個屬性添加到輸入框以消除額外的點擊和錯誤。

自動填充：使用瀏覽器保存并列出用戶先前填寫的值。應(yīng)為敏感數(shù)據(jù)關(guān)閉此功能。

自動更正：更正輸入的拼寫錯誤。對于名稱，地址等特殊字段，應(yīng)關(guān)閉此功能。

自動初始化大寫：自動大寫輸入的第一個字母。這適用于填寫姓名而不適用于電子郵件地址。

拼寫檢查：拼寫錯誤拼寫的單詞。對于名稱，地址等特殊字段，應(yīng)關(guān)閉此功能。

3.限制輸入

如今越來越多的人使用小屏移動設(shè)備，我們需要考慮使用小屏幕，避免用戶不必要的輸入，提高用戶滿意度，同時降低錯誤率。

地址預(yù)填充

填寫在線注冊表單中的地址通常是最麻煩的，因為它包括多個字段和長地址名稱。通過將長地址分成單個字段，它不僅可以幫助用戶專注于輸入（是的，它們總是頻繁地切換頁面），而且還會減少大量輸入。

在下面的示例中，輸入Google總部的地址（街道，城市，州，郵政編碼，國家/地區(qū)）。完整的輸入過程只需要輸入10個字母，如果不需要自動填充，用戶需要手動輸入50次以上。

上述使用Google API的解決方案在大多數(shù)情況下都可以很好地運行，但對輸入地標(biāo)和公寓號的適用性有限，因為這些可能不包含在API提供的反饋中。

ThinkGeek的方法由軟件即服務(wù)（SaaS）提供商提供，稱為PCA預(yù)測。執(zhí)行初始搜索時，允許輸入公寓號，輸入后地址格式正確。

△ThinkGeek.com

郵箱預(yù)先填充

減少輸入的另一種方法是在電子郵件地址字段中提供常用電子郵件域名列表。當(dāng)用戶輸入“@”時，列表會出現(xiàn)。按鈕，主要使用預(yù)先填充的解決方案，每個傳入的電子郵件地址最多可節(jié)省12次擊鍵。

△請注意輸入框文字“電子郵件地址”。已經(jīng)消失了

4.使用定位

雖然通常在移動應(yīng)用中使用呼叫位置數(shù)據(jù)，但我們不能忘記在所有平板電腦和臺式機(jī)上使用它。特別是當(dāng)在觸摸屏上打字是麻煩的時，基于位置的信息預(yù)填充可以節(jié)省用戶寶貴的時間并提高轉(zhuǎn)換率。

Nordstrom百貨商店網(wǎng)站上的產(chǎn)品詳細(xì)信息頁面就是這項技術(shù)的一個很好的例子，產(chǎn)品使用定位完全省略了表格填寫。該頁面不是要求用戶輸入郵政編碼來獲取地址，而是調(diào)用位置信息并自動查找最近商店中物品的庫存。這不僅可以節(jié)省用戶的時間，還可以讓用戶直接看到“最近的商店地址”。這個有用的信息。

△nordstrom.com

盡管由于準(zhǔn)確性問題預(yù)先填充完整地址可能是困難的。通過Google的Places API，您可以使用地理位置信息和地址預(yù)填充來獲得最佳效果，根據(jù)用戶的實時位置提供更準(zhǔn)確的位置填充參考。

△Zuppler.com

當(dāng)然，由于無法保證準(zhǔn)確性，因此必須允許用戶手動修改自動生成的位置數(shù)據(jù)。

總結(jié)

總之，遵循這些原則可以幫助設(shè)計易于使用的表單并創(chuàng)建愉快的表單體驗：

優(yōu)先考慮表單的可瀏覽性，設(shè)計易于閱讀的標(biāo)簽，并避免妨礙用戶的不相關(guān)內(nèi)容。

提供更易于格式化的表單格式，每種輸入條目的輸入掩碼以及適當(dāng)?shù)逆I盤（以及其他HTML屬性）。

給出適當(dāng)?shù)妮斎胂拗?，使用預(yù)填充

使用定位，您無需再次單擊“添加”。

以上表明，在不斷變化的數(shù)字時代，我們總是需要學(xué)習(xí)更多東西。

« 如何使用網(wǎng)站排名進(jìn)行網(wǎng)站操作？ | 快速播放紅色男子性感服裝表演：現(xiàn)金流速度提升速度 »